Weird height in IE6 and IE7.

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Weird height in IE6 and IE7.

Post by JellyFish »

If you have a look at this page in Firefox you will see what is supposed to be seen. If you look at the same page with IE6 or IE7 you will see a weird extra space added to each element in the lists. If you were to open firebug on this page you'll notice each list item in the little boxes has a height of 15 pixels, in IE6&7 though, it's 26 pixels.

I've tried various things to fix this issue. I was even thinking of redesigning these lists from scratch (which I will do after this post, in hopes that I may be able to solve this). Does anyone know why this is happening in IE6 and 7?

Any help on this would be very appreciated.

PS: Why does it seem as though the IE team purposefully makes bugs in their software? IE6 has been around long enough for the web community to have a list of all the bugs in IE6, you would think that the IE team would have tackled all the bugs for IE6 in IE7.
Last edited by pickle on Fri Jul 17, 2009 3:49 pm, edited 1 time in total.
Reason: Fixed [url] tag
ofir0803
Forum Newbie
Posts: 22
Joined: Sun Jan 18, 2009 3:03 pm

Re: Weird height in IE6 and IE7.

Post by ofir0803 »

try padding:0px; on the class name: light and dark.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Re: Weird height in IE6 and IE7.

Post by JellyFish »

ofir0803 wrote:try padding:0px; on the class name: light and dark.
I have padding set to '1px 5px' for each list item (li) already. If I do what you say it gets rid of the 5 pixel padding on the left and right sides of each li in IE. I don't think this is exactly what I'm looking for. Even if I do what you say, except add 5px for the left and right margin, it still isn't the same. The top of each list item is butting up at the top. IE is some how adding to the height of these elements. I don't know why or when this started happening.

Does anyone know what bug (Usually IE bugs have special names :P) is causing this?
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Re: Weird height in IE6 and IE7.

Post by JellyFish »

Whenever one places an anchor element within a list-item element in IE6/7 and the anchor has the display property set to "block", extra white space is added to the bottom of the anchor element. I don't know why IE is doing this but it is. So if I remove the "display: block" rule, this solves the issue. But the links won't have as large of a click area; one would have to place their cursor over the link text. I would rather not lose this to an IE bug. There has to be another way around this. Maybe if I were to use something other than an unorder list.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Weird height in IE6 and IE7.

Post by pickle »

Try setting float:left - that'll give you the same wide link. You could also try setting line-height to 15 pixels & see if that fixes it.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Post Reply