line-height inconsistency: IE vs firefox?

	Home Register Search Help Login

Recent Posts
Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

Sponsors
Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.
Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.
Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

line-height inconsistency: IE vs firefox?

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> line-height inconsistency: IE vs firefox?

Page: [1]


satlas Posts: 5 Joined: 12/8/2006 Status: offline	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 Posts: 6692 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	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. _____________________________ Little Blue Plane Web Design \| Land Rover project (in reply to satlas)


satlas Posts: 5 Joined: 12/8/2006 Status: offline	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? (in reply to Tailslide)


Tailslide Posts: 6692 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	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. _____________________________ Little Blue Plane Web Design \| Land Rover project (in reply to satlas)


satlas Posts: 5 Joined: 12/8/2006 Status: offline	RE: line-height inconsistency: IE vs firefox? - 12/22/2006 17:27:46 i'll look into that, thanks for the info! :) (in reply to Tailslide)


d a v e Posts: 4348 Joined: 7/24/2002 From: England (but live in Finland now) Status: offline	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 _____________________________ David Prescott Gekko web design (in reply to satlas)


Tailslide Posts: 6692 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	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. _____________________________ Little Blue Plane Web Design \| Land Rover project (in reply to d a v e)


d a v e Posts: 4348 Joined: 7/24/2002 From: England (but live in Finland now) Status: offline	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! _____________________________ David Prescott Gekko web design (in reply to Tailslide)


jaybee Posts: 14320 Joined: 10/7/2003 From: Berkshire, UK Status: offline	RE: line-height inconsistency: IE vs firefox? - 12/23/2006 7:33:00 So that's a definitely, certain, maybe then. _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to d a v e)


Tailslide Posts: 6692 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	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. _____________________________ Little Blue Plane Web Design \| Land Rover project (in reply to jaybee)


jaybee Posts: 14320 Joined: 10/7/2003 From: Berkshire, UK Status: offline	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. _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to Tailslide)


womble Posts: 6007 Joined: 3/14/2005 From: Living on the edge Status: offline	RE: line-height inconsistency: IE vs firefox? - 12/23/2006 8:28:08 We'll see you next year then Jaybee. _____________________________ ~~ "A cruel god ain't no god at all" ~~ ~~ Erase hate. Practice love. ~~ (in reply to jaybee)


Tailslide Posts: 6692 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	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 _____________________________ Little Blue Plane Web Design \| Land Rover project (in reply to womble)


satlas Posts: 5 Joined: 12/8/2006 Status: offline	RE: line-height inconsistency: IE vs firefox? - 12/24/2006 16:36:23 thanks guys, i'll try it and let you know! (in reply to Tailslide)


jaybee Posts: 14320 Joined: 10/7/2003 From: Berkshire, UK Status: offline	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 _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to satlas)

niente

Posts: 1
Joined: 11/25/2008
Status: offline

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

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!

< Message edited by niente -- 11/25/2008 6:03:25 >

(in reply to satlas)

Page: [1]

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> line-height inconsistency: IE vs firefox?

Page: [1]

Jump to: 1

New Messages	No New Messages
Hot Topic w/ New Messages	Hot Topic w/o New Messages
Locked w/ New Messages	Locked w/o New Messages

Post New Thread

Reply to Message

Post New Poll

Submit Vote

Delete My Own Post

Delete My Own Thread

Rate Posts