IE6 has-layout not fixed with display: block HREF tags.

[GoogleCodeExporter]

What steps will reproduce the problem?

1. Create UL with A HREFs in each LI (navigation list)
2. Set the style of the A tags to display: block with padding.

What is the expected output? What do you see instead?

IE7 and Firefox display the list as expected. IE6 puts additional space
between each LI. This is due to the 'has layout' issue. Adding the zoom: 1
hack to the LI style fixes the solution in IE. 

I'm not sure if ie7.js SHOULD fix that, but it does appear that it does not
fix that issue.

Please provide any additional information below.

One caveat: I'm testing this all using the tredo soft multiple-IE install.

Sample HTML file attached.

Original issue reported on code.google.com by darrel.a...@gmail.com on 14 Feb 2008 at 2:46

Attachments:

• li_ie6_test.html

[GoogleCodeExporter]

Original comment by dean.edw...@gmail.com on 21 Feb 2008 at 9:41

• Changed state: Accepted
• Added labels: Type-Enhancement
• Removed labels: Type-Defect

[GoogleCodeExporter]

This is a huge problem for me, I would be extremely happy if this could be 
fixed :)

Original comment by kaak...@gmail.com on 26 Feb 2008 at 12:48

[GoogleCodeExporter]

http://www.flex360.com/client/gtt/ -- I am also having this issue in IE6 - 
works 
fine in IE7.xx and FF2.xx all of my links on the main portion (white area) are 
ignored, and I do not even get a pointer. While all of my links on the right 
column 
are fine. I have tried all versions of IE7.js and IE8.js. I take off your 
script and 
it works like a champ (looks like sh!t though :). Please help!!!!! AAAAAGGGGHH!

Thanks man.
Mike

Original comment by mike...@gmail.com on 19 Mar 2008 at 10:20

[GoogleCodeExporter]

There is a workaround, but I can't remember who came out with it:
Instead of writing each list item as normal:
<li><a href="#">testing...</a></li>

Use:
<li><a href="#">testing...[hit enter here]
</a></li>

See the attached file. 
Cheers from Brazil.
And thank you Dean for the hard work!!

Original comment by jardim.s...@gmail.com on 10 May 2008 at 6:22

Attachments:

• li_ie6_test.html

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Anyone found a solution for this yet? I'm having the same problem although I'm 
not using a list containing links.

Original comment by tom.mari...@gmail.com on 26 May 2008 at 11:22

[GoogleCodeExporter]

IE7.js does not specifically fix this issue but it provides an easy (and valid) 
way to fix 
it.

Add the following to the CSS for the block-level A element:

{{{
ul li a {
  border: 1px solid orange;
  display: block;
  padding: .2em 0px .2em 30px;
  margin: 0px;
  box-sizing: content-box; /* ADD THIS LINE */
}
}}}

That will force the A element to have "layout".

Original comment by dean.edw...@gmail.com on 14 Feb 2010 at 12:10

• Changed state: Done