Icon hanging below first line

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • Stanimir Stamenkov

    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:

    Latest news coverage, email, free stock quotes, live scores and video are just the beginning. Discover more every day at Yahoo!


    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
  • Ben C

    #2
    Re: Icon hanging below first line

    On 2008-06-07, Stanimir Stamenkov <s7an10@netscap e.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:
    >
    Latest news coverage, email, free stock quotes, live scores and video are just the beginning. Discover more every day at Yahoo!

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

    Comment

    • Stanimir Stamenkov

      #3
      Re: Icon hanging below first line

      Sat, 07 Jun 2008 11:35:57 -0500, /Ben C/:
      On 2008-06-07, Stanimir Stamenkov <s7an10@netscap e.netwrote:
      >
      >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 <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.
      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

      Comment

      • Stanimir Stamenkov

        #4
        Re: Icon hanging below first line

        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:



        --
        Stanimir

        Comment

        • Stanimir Stamenkov

          #5
          Re: Icon hanging below first line

          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@netscap e.netwrote:
          >>
          >>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 <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.
          >
          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:

          Latest news coverage, email, free stock quotes, live scores and video are just the beginning. Discover more every day at Yahoo!


          <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

          Comment

          • Stanimir Stamenkov

            #6
            Re: Icon hanging below first line

            Sun, 08 Jun 2008 16:54:54 +0300, /Stanimir Stamenkov/:
            My partial solution:
            >
            Latest news coverage, email, free stock quotes, live scores and video are just the beginning. Discover more every day at Yahoo!

            >
            <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:

            Latest news coverage, email, free stock quotes, live scores and video are just the beginning. Discover more every day at Yahoo!


            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

            Comment

            Working...