Weird Line-Height Issue Only in IE8

[casbboy]

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

[RyanReese]

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.

[casbboy]

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

[RyanReese]

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

[Paul O'B]

Hi,

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

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

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

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

<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

[casbboy]

Thanks! I'll take a look at cleaning it up.

Cheers
Ryan

[goldfinchpcs]

Hi,

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

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

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

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

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