line-height inconsistency: IE vs firefox? (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

satlas -> line-height inconsistency: IE vs firefox? (12/22/2006 15:44:19)

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!



Tailslide -> RE: line-height inconsistency: IE vs firefox? (12/22/2006 16:15:48)

If you mean the actual content area of the site that holds text rather than a form textarea then it's best not to specify a height as it might break your layout when people enlarge the text size in their browsers.

Could you post the URL as it's much much easier to sort out if we can see the problem.



satlas -> RE: line-height inconsistency: IE vs firefox? (12/22/2006 17:06:51)

I am not specifying a height for the actual content area. However, 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.

Sorry if I wasn't clear. Any ideas?



Tailslide -> RE: line-height inconsistency: IE vs firefox? (12/22/2006 17:23:56)

I understand completely now - unfortunately I'm not able to offer much help as I tend to only deal with CSS layouts rather than table layouts.

Couple of suggestions which may or may not work -

You've got a lump of CSS styling in the middle of the body element - it should only be in the head of the document so I'd move that up especially as you might be getting a conflict on font sizing there.

If you're having trouble with line-height - try using % e.g line-height:140% and see if that helps at all.




satlas -> RE: line-height inconsistency: IE vs firefox? (12/22/2006 17:27:46)

i'll look into that, thanks for the info! :)



d a v e -> RE: line-height inconsistency: IE vs firefox? (12/23/2006 5:03:45)

usually a number (e.g. 1.4) rather than a percentage is better for line heights as percentages are based on the parent container (i think) so can be bit weird



Tailslide -> RE: line-height inconsistency: IE vs firefox? (12/23/2006 5:36:28)

Far as I know (and I could well be wrong) but % line height is to do with font sizing. I always use % for line-height and it increases or decreases according to font-size.



d a v e -> RE: line-height inconsistency: IE vs firefox? (12/23/2006 7:05:07)

i read somewhere (Eric meyer i think) that the percentage is inherited from the parent container whereas ... er no wait a minute i have to check and see what i'm on about ;) i'll try and post back today when i find it :) in the meantime try both!



jaybee -> RE: line-height inconsistency: IE vs firefox? (12/23/2006 7:33:00)

So that's a definitely, certain, maybe then. [:D]



Tailslide -> RE: line-height inconsistency: IE vs firefox? (12/23/2006 8:20:51)

I'm quite willing to be proved wrong on this - but i do use that method all the time without any issues. It may be because I tend to declare it on the body element along with the overall font size (100.01%) so maybe it doesn't cause an issue because it's declared on the main viewport if you see what I mean, rather than lower down the cascade - so maybe that's the trick - declare the line-height on the body.



jaybee -> RE: line-height inconsistency: IE vs firefox? (12/23/2006 8:25:23)

Mmmm I've got a site that goes bonkers in IE on the line height front. I'll have a play this weekend, assuming I'm still sober. [;)]



womble -> RE: line-height inconsistency: IE vs firefox? (12/23/2006 8:28:08)

We'll see you next year then Jaybee. [;)]



Tailslide -> RE: line-height inconsistency: IE vs firefox? (12/23/2006 8:47:10)

Here you go - it's definitely relative to the font-size. This is the closest explanation to English I could find:

quote:

The line-height property will accept a value to control the spacing between baselines of text. ... Percentage values are relative to the element's font size.


source: http://www.htmlhelp.com/reference/css/text/line-height.html



satlas -> RE: line-height inconsistency: IE vs firefox? (12/24/2006 16:36:23)

thanks guys, i'll try it and let you know!



jaybee -> RE: line-height inconsistency: IE vs firefox? (12/24/2006 18:09:57)

It works. I had applied a line height in the divs. Took it out and applied it on the body and it's fine.

Interestingly FF and IE7 applied the original version correctly, IE6 didn't



niente -> RE: line-height inconsistency: IE vs firefox? (11/25/2008 5:44:38)

line-height implementation in IE is buggy, look at here for more info: [:(]

reference.sitepoint.com/css/line-height

[sm=unsure.gif]

I used conditional CSS to fix the IE problem. First I defined a line-height in the CSS file (for FireFox), 

.bigcube {line-height:13px;}


then in the HTML page I inserted a conditional CSS for IE: 

<HEAD>
<link rel="stylesheet" type="text/css" href="styles.css">
<!--[if IE]>
<style>
.bigcube {line-height:11px;}
</style>
<![endif]-->
</HEAD>


Warning: the conditional instruction [if IE] cannot be inserted into the css file but must be used in the html page to work.

Hope it helps! [;)]



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125