Eoghan O'Brien.com - Cork Web Designer/Developer, Ireland

Safari Clearfix Bug

I’m not sure if this has been mentioned before, but if you’ve ever used the clearfix you’ll have come across the content: property with a value of ”.”;

.clearfix:after {
content: ”.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}

What you might not have noticed is the that in Safari that dot value ”.” is actually shown on the page. So if, like me, you were scratching your head looking for an answer to this, I hope this helps.

The solution is quite obvious and very simple but hopefully using this page as a resource will save you time scouring your css for errors.

All you need to do is replace the ”.” with ” ” and no more strange dots appearing on your screen, the clearfix works just the same so all is good.

.clearfix:after {
content: ” ”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}

• CSS Naked Day
• IE Operation Aborted
• Safari Clearfix Bug
• Mmm...Launchy
• Moving to Magnolia