Page 1 of 1

Weird height in IE6 and IE7.

Posted: Tue Jun 16, 2009 5:13 pm
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.

Re: Weird height in IE6 and IE7.

Posted: Wed Jun 17, 2009 9:05 am
by ofir0803
try padding:0px; on the class name: light and dark.

Re: Weird height in IE6 and IE7.

Posted: Thu Jun 18, 2009 12:41 am
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?

Re: Weird height in IE6 and IE7.

Posted: Fri Jul 17, 2009 1:22 pm
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.

Re: Weird height in IE6 and IE7.

Posted: Fri Jul 17, 2009 3:50 pm
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.