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

On 2008-06-07, Stanimir Stamenkov <s7an10 (AT) netscape (DOT) net> wrote:

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 <img> out of the <h2> and 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 <a> around the
<img> so 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.

Sat, 07 Jun 2008 11:35:57 -0500, /Ben C/:

On 2008-06-07, Stanimir Stamenkov <s7an10 (AT) netscape (DOT) net> wrote:

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?

Take the floated <img> out of the <h2> and 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.

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).

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.

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

Sat, 07 Jun 2008 11:35:57 -0500, /Ben C/:

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.

For whoever might be interested it appears as a known issue:

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

--
Stanimir

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

Sat, 07 Jun 2008 11:35:57 -0500, /Ben C/:
On 2008-06-07, Stanimir Stamenkov <s7an10 (AT) netscape (DOT) net> wrote:

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?

Take the floated <img> out of the <h2> and 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.

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).

My partial solution:

http://www.geocities.com/stanio/test/hanging-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

Sun, 08 Jun 2008 16:54:54 +0300, /Stanimir Stamenkov/:

My partial solution:

http://www.geocities.com/stanio/test/hanging-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.

This seems like complete workaround in my case:

http://www.geocities.com/stanio/test/hanging-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