Resolving a line-height issue in IE

Discussion in 'CSS' started by ririzarry, Dec 18, 2007.

0
  1. #1
    I'm seeing a glitch in IE that doesn't appear in Firefox, Opera or even Safari. I have a Subscribe section on my site Building the Ergonomic Guitar that offers RSS and email options. Each of the options is preceded by a small icon.

    When viewed in IE, the line-height setting set throughout the sidebar is ignored in this section resulting in the lines appearing much closer together than desired.

    I'm defining it as follows within the sidebar itself:

    <li><img style="border: 0pt none ; vertical-align: middle;" alt="" src='http://buildingtheergonomicguitar.com/wp-content/uploads/mailfeed-icon16x16.png'/> <a href="http://www.feedblitz.com/f/?Sub=112745" rel="nofollow" title="Get New Content Updates using Email">Subscribe to Email</a></li>

    This same issue appears in the content section as well. I noticed it when testing the alinks WordPress plugin which includes a small icon in outgoing links. And so the icon seems to be the thing throwing things for a loop...

    Thanks!

    Regards,

    Rob
     
    ririzarry, Dec 18, 2007 IP
  2. zoreli

    zoreli Member

    Messages:
    36
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    43
    #2
    Hi

    Try to add this on your img:

    margin:5px 0 5x 0;

    order is top,right,bottom, left.

    Regards, Zoreli
     
    zoreli, Dec 18, 2007 IP
  3. ririzarry

    ririzarry Peon

    Messages:
    76
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks so much for the feedback. BTW - I found this article which explains the issue I'm seeing. It also documents an approach as well so I'll give it a try.

    Regards,

    Rob
     
    ririzarry, Jan 4, 2008 IP
  4. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Oooh thanks for that link. The only line-height bug I was aware of (unless it's just another form of this one) was line-height in an element meant to IE the "height" of the element (two seperate things).

    I also wonder if I never see this in my stuff because my images' dimensions are always defined either in the HTML or the CSS?
     
    Stomme poes, Jan 4, 2008 IP
  5. ririzarry

    ririzarry Peon

    Messages:
    76
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I'm glad that was helpful! I've only seen this issue with the inline images for my subscription options and with the Alinks plugin. The subscription options don't present a big issue - its hardly noticeable. However, the bug clearly impacts the Alinks plugin with its use of an inline image.

    What's particularly interesting is that even if I disable the image in Alinks, it still shows the bug which makes me wonder how that's implemented. I've posted to the plugin author's site but haven't seen any response.

    I expect to do some testing this weekend so I can get at least the Alinks portion working properly.

    Regards,

    Rob
     
    ririzarry, Jan 4, 2008 IP
  6. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #6
    If the image is always the same, you could maybe try list-style-image instead of seperate images for each link. It's like an image replacing a bullet.
     
    Stomme poes, Jan 5, 2008 IP