On 2008-06-07, Stanimir Stamenkov <s7****@netscape.netwrote:
I'm trying to style an icon "hanging" below the first line of a
heading and I've found interesting difference between Mozilla and
the other browsers I'm trying with - Safari 3.1.1, Opera 9.27 and
IE 6:
http://www.geocities.com/stanio/test/hanging-icon.html
I've used negative 'text-indent' and with Mozilla the first line of
text doesn't flow over the "hanging" icon, while with the other
browsers I see what I want to achieve. Which is correct in this
case - what I see with Mozilla or with the other browsers? Could I
achieve the same effect another way?
It looks like a bug in Firefox. It seems to be having problems applying
text-indent when there's a float before the first bit of text.
Take the floated <imgout of the <h2and put it before it instead and
you should get the same effect in all the browsers. You'll need to
change "h2 .icon" just to .icon.
Check it's still valid if you do that-- you might need to put a div
around the img. And you also might want to repeat the <aaround the
<imgso it's still a link.
I say "still" valid, it's not valid at the moment, so you will need to
fix a few other things first. Test it at
http://validator.w3.org.