line-height inconsistency: IE vs firefox?

satlas · 12-22-2006, 01:38 PM

Hey everyone,

I've run into another cross-browser inconsistency (ugh) and I can't figure out a workaround for it.

I have specific amount of vertical space alloted for a text area of my site. I don't know which browser is giving me a problem, but in IE there is more vertical space in-between each line of text, which is making this area a fair amount longer in IE as compared to firefox (where there is less space between each line).

I tried setting the "line-height" property for the CSS rule. But the the browsers are calculating these line heights in their own way.

There must be a workaround for this, I just can't figure it out or find anything on it!

Help, anybody?

Thanks!

StupidScript · 12-22-2006, 02:41 PM

What measurement value are you using for your line-height specs? I usually use px for that, as opposed to pt or en/em. If you aren't using any measurement value, you're letting the browser use its default. i.e.

Code:

#bodyContent { line-height:14px }

satlas · 12-22-2006, 03:11 PM

yeah, i tried setting the line-height property with px, but the browsers are calculating the height in their own way.... if this helps...

I am not specifying a height for the actual content area. I would like the height to be the same between browsers so I can achieve the layout I want. Please look at the site in both IE and firefox:

http://www.bestbuys.com/newbestbuys

I am trying to make the left and right navigational areas ("brands" and "partners") end at the same level as the most popular area.

However, since there is more spacing inbetween lines in IE than firefox, I will never be able to do this across browsers. That's why i'm trying to fix the spacing difference.

StupidScript · 12-22-2006, 03:41 PM

I'm not seeing the CSS definition of the 'mainfontnormal' class.

How about doing a quick browser check and write different CSS for MSIE than for other, standards-compliant browsers? I end up having to do that almost all the time.

satlas · 12-22-2006, 05:32 PM

What do you mean write different CSS for IE? Can you please elaborate on this as it pertains to my problem?

Thanks again

StupidScript · 12-22-2006, 08:05 PM

Code:

<script type="text/javascript">
var isie = (navigator.userAgent.indexOf("MSIE")!=-1) ? 1 : 0;
lineHeight="18px";
if (isie) { lineHeight="10px"; }
styl="<style type='text/css'>\n";
styl+=".mainfontnormal {\n";
styl+="line-height: "+lineHeight+";\n";
styl+="}\n";
styl+="</style>\n";
document.write(styl);
</script>
<div class="mainfontnormal">
1) Line 1 ________EEEEEEEEE<br />
2) Line 2 ________EEEEEEEEE<br />
3) Line 3 ________EEEEEEEEE<br />
4) 
<script type="text/javascript">
document.write("line-height="+lineHeight+"<br />\n");
</script>
</div>

But I gotta say, with a properly-structured document, I didn't see any difference in the handling of the line-height CSS declaration. You might want to look at the CSS nesting. MSIE has several different interpretive quirks in the way it handles nested CSS instructions. Check out their own various bits of documentation for a good look at the confusion.

<edit>
PS: You can't have the SCRIPT stuff in between the lines of a normal STYLE container (or the other way 'round) because they use the same browser parsing engine. i.e.

Code:

<style type="text/css">
.mainfontnormal {
<script type="text/javascript">
document.write("line-height:"+lineHeight+";\n");
</script>
}
</style>

On a good note, this means that if the browser has its Javascript engine turned off, they won't be able to deal with the CSS, either!

</edit>

StupidScript · 12-22-2006, 08:39 PM

BTW: I prefer to do this stuff in a server-compiled language, rather than let the client-side deal with it, because of client-side code bloat. Here's the same thing in PHP (with "short_open_tag" on in php.ini):

Code:

<?
$isie = (eregi('MSIE',$_SERVER['HTTP_USER_AGENT'])) ? 1:0;
$lineHeight="18px";
if ($isie) { $lineHeight="10px"; }
?>
<style type="text/css">
.mainfontnormal {
line-height: <?=$lineHeight?>;
}
</style>
<div class="mainfontnormal">
1) Line 1 ________EEEEEEEEE<br />
2) Line 2 ________EEEEEEEEE<br />
3) Line 3 ________EEEEEEEEE<br />
4) line-height=<?=$lineHeight?><br />
</div>

<sigh ... edit>
Maybe more simple: You could easily write a very few lines of code (Javascript) instead of all of the above in the client-side code:

Code:

<script type="text/javascript">
var isie = (navigator.userAgent.indexOf("MSIE")!=-1) ? 1 : 0;
if (isie) {
styl="<link rel='stylesheet' href='style_ie.css' type='text/css' />\n"; }
else {
styl="<link rel='stylesheet' href='style.css' type='text/css' />\n"; }
document.write(styl);
</script>

to achieve the same effect. This gives you more flexibility in the entire style palette being used by the browser.
</edit>

satlas · 12-24-2006, 10:26 AM

Thank you!!! this worked perfectly. Only thing is, I can't set the spacing in IE as small as it is in Firefox. But I can make the spacing as big as IE, so the end result works.

For example, to make FF and IE the same, I would have to set FF to 16 and IE to around 8 (wow, huge difference). But since the font size is set to 12, I guess you can't set the spacing to anything less than that?

StupidScript · 12-26-2006, 02:15 PM

You should be able to set the line-height to whatever you want, as long as it's a positive amount (not a negative amount). For example, "font-size:12pt;line-height:0px" would result in all of the lines overlapping on top of the first line, with essentially no line-height at all.

I'd look very closely at the CSS nesting properties; other line-height specs and un-specified line-height conditions. These are probably having a great effect on the way MSIE is rendering the instructions, and are a well-known issue with that browser. There are a lot of nested DIV elements, each with their own class, and these are likely stacking up the instructions and confusing MSIE. Perhaps you'll need to explicitly set a line-height property for every tag/class/id in order to get the exact result you are looking for, instead of letting the browser handle anything.