SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard
    Join Date
    Oct 2004
    Location
    Newport Beach
    Posts
    1,742
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Weird Line-Height Issue Only in IE8

    I have tested a certain setup on all browsers, including compatibility mode on IE8 and have discovered that extra space appears only in IE8; but works fine in IE7 comp mode. I've been told it is because I use line-height in my CSS, and IE 8 has major issues with it.

    Is there a fix for this? My line height for a particular H1 is 1.9em and renders fine in all browsers but IE8. Instead it looks like I have an extra <br> tag causing extra white space before new content.

    Any suggestions appreciated.

    Cheers
    Ryan
    Upcoming Movies - Movie News. Updated Daily.
    Movie Trailers - Awesome trailer site. Nuff said.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, IE8 generally doesn't have any issues with line-height, so whoever told you that is probably misinformed .

    If you have a link to look at that would be great, as we wouldn't be able to solve it lol.

    If it is not online (which would make this easier for us) then providing full HTML and CSS would be the next best. You shouldn't develop in compatibility view.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Wizard
    Join Date
    Oct 2004
    Location
    Newport Beach
    Posts
    1,742
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure. Just click the link below:

    Toy Story 3 Trailer

    The description that appears right under the Green area containing the film's title and trailer title is located even further down in IE 8.

    Cheers
    Ryan
    Upcoming Movies - Movie News. Updated Daily.
    Movie Trailers - Awesome trailer site. Nuff said.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, I am not seeing anything dropping down slightly (or at all) in IE8.

    Can you grab a screenshot and upload it to something like photobucket and then post the direct link here? Make sure your not seeing a cached version of hte page
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    The text is further down in IE8 because you have given IE a margin-top of 22px and other browsers only 8px.

    Code:
    <!--[if IE]>
    <style>
    .fulllink {
    font-size:6pt; 
    padding-left:5px; 
    position:relative; 
    top:26px;
    }
    #desc {
    margin-top:22px;
    }
    </style>
    <![endif]-->
    if you want to exclude IE8 from that rule then change the css as follows.

    Code:
    <!--[if lt IE 8]>
    <style>
    .fulllink {
    font-size:6pt; 
    padding-left:5px; 
    position:relative; 
    top:26px;
    }
    #desc {
    margin-top:22px;
    }
    </style>
    <![endif]-->
    Your code is a little haphazard and you shouldn't be using spans followed by two breaks to make space. Breaks are never used for making space and you should be using the correct element such as a p element or heading element (or div) and applying margins to those instead.

    Spans are inline elements and used for sections of inline content and not for block content that you then follow by a break.

    This is very bad:

    Code:
    <h1><a href="/tags/toy-story-3" style="line-height:1.9em;">Toy Story 3</a></h1>
                    <br />
                    <span style="font-size:11px; letter-spacing:0px; position:relative; margin-top:-5px; padding-bottom:4px; color:#FFFFFF;">Trailer B</span> <br />
                    <br />
    The same effect could be achieved with this code and styling externally with css.
    Code:
    <h1 class="trailer"><a href="/tags/toy-story-3" style="line-height:1.9em;">Toy Story 3</a> <span>Trailer B</span></h1>
    If you can keep the code organised and tidy it makes things much easier for you in the long run

  6. #6
    SitePoint Wizard
    Join Date
    Oct 2004
    Location
    Newport Beach
    Posts
    1,742
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! I'll take a look at cleaning it up.

    Cheers
    Ryan
    Upcoming Movies - Movie News. Updated Daily.
    Movie Trailers - Awesome trailer site. Nuff said.

  7. #7
    SitePoint Member
    Join Date
    Oct 2009
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    The text is further down in IE8 because you have given IE a margin-top of 22px and other browsers only 8px.

    Code:
    <!--[if IE]>
    <style>
    .fulllink {
    font-size:6pt; 
    padding-left:5px; 
    position:relative; 
    top:26px;
    }
    #desc {
    margin-top:22px;
    }
    </style>
    <![endif]-->
    if you want to exclude IE8 from that rule then change the css as follows.

    Code:
    <!--[if lt IE 8]>
    <style>
    .fulllink {
    font-size:6pt; 
    padding-left:5px; 
    position:relative; 
    top:26px;
    }
    #desc {
    margin-top:22px;
    }
    </style>
    <![endif]-->
    Your code is a little haphazard and you shouldn't be using spans followed by two breaks to make space. Breaks are never used for making space and you should be using the correct element such as a p element or heading element (or div) and applying margins to those instead.

    Spans are inline elements and used for sections of inline content and not for block content that you then follow by a break.

    This is very bad:

    Code:
    <h1><a href="/tags/toy-story-3" style="line-height:1.9em;">Toy Story 3</a></h1>
                    <br />
                    <span style="font-size:11px; letter-spacing:0px; position:relative; margin-top:-5px; padding-bottom:4px; color:#FFFFFF;">Trailer B</span> <br />
                    <br />
    The same effect could be achieved with this code and styling externally with css.
    Code:
    <h1 class="trailer"><a href="/tags/toy-story-3" style="line-height:1.9em;">Toy Story 3</a> <span>Trailer B</span></h1>
    If you can keep the code organised and tidy it makes things much easier for you in the long run
    I love this ticking off. This was very good I hope to see more professionals do this. I was really happy to read this because I use breaks to make space simply because I can't be bothered sometimes (darn lazy). I will try not to in the future.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •