<li> line height difference in IE 7

HTML & CSS
1

hi all

i m having issue with setting the equal line height for <li> navigation

see this below link in IE 7
http://wdpixels.com/leftnav_issue/leftnav.html

You will see line height difference in the left and right navigation.

left navigation has <a> href tags but right navigation doesnt.

dont know why <a> href is disturbing the line height.

vineet

2

It’s just because you give the links a display:block;

The inline box model is extremely complicated. It’s just giving you a bug. I don’t see why you even need to have display:block there in the first place, but if you do eventually need to use some block level features, you can set it to display:inline-block; (also set zoom:1; to give haslayout).

IE7 will also need *+html a.leftnav_link{display:inline;} since IE7 technically doesn’t even support display:inline-block;

The IE7 feeding of that line along with zoom:1 will make it have display:inline-block behavior.

3

hi ryan

i want to use “Display:block” to make the the whole <li> row as clickable as link

if i use “Display:inline-box” then only the <li> text is clickable.

i want the whole <li> clickable as link

is there any solution to it.

vineet

4

Oh sorry,

this work for me

*+html a.leftnav_link{display:inline;}

thanks. its solved now

vineet

5

As I said, display:inline makes it work for IE7. Glad you got it working :).