Icon hanging below first line

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?

--
Stanimir

re: Icon hanging below first line

On 2008-06-07, Stanimir Stamenkov <s7an10@netscape.netwrote: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.

re: Icon hanging below first line

Sat, 07 Jun 2008 11:35:57 -0500, /Ben C/:I see. The problem is I didn't want to take the icon out of the
heading and the link it constitutes, i.e. I don't want to have two
links where the icon one is generally empty (has no text content).
The validation errors come from the Yahoo added garbage. If you
save it locally and clean the garbage manually - it is o.k. Sorry
for the inconvenience.

--
Stanimir

re: Icon hanging below first line

Sat, 07 Jun 2008 11:35:57 -0500, /Ben C/:
For whoever might be interested it appears as a known issue:

https://bugzilla.mozilla.org/show_bug.cgi?id=294306

--
Stanimir

re: Icon hanging below first line

Sun, 08 Jun 2008 14:20:23 +0300, /Stanimir Stamenkov/:My partial solution:

http://www.geocities.com/stanio/test...ng-icon-2.html

<h2><a href="#"><img alt="" src="icon1.png" class="icon">
<span>Lorem Ipsum Dolor Sit Amet Consectetuer Adipiscing
Elit</span></a></h2>

I enclose the link text in a SPAN which I style as block and give
text-indent to it. The drawback of it is the link active area is
extended to the whole block width and not just the text.

--
Stanimir

re: Icon hanging below first line

Sun, 08 Jun 2008 16:54:54 +0300, /Stanimir Stamenkov/:
This seems like complete workaround in my case:

http://www.geocities.com/stanio/test...ng-icon-3.html

I've not styled the link and the SPAN in it as blocks, but given
negative margin to the SPAN. I had to explicitly style the
underline decoration and background-color on hover on the SPAN,
additionally.

--
Stanimir