3

Example: http://jsfiddle.net/xUrDc/

I'm trying to surround each li with a border exactly one pixel wide. In order that the lines meet properly, I'm setting margin-top:-1px on each li (Otherwise the border is too thick between each).

When I set my browser to IE7 in debug mode, the border at the top disappears. Can anybody tell me why this might be the case or suggest a better way to achieve the look I want?

Flash
  • 15,945
  • 13
  • 70
  • 98

1 Answers1

7

Ignoring the possibility of doing it a different way, you can fix IE7 by adding zoom: 1 to ul li.

See: http://jsfiddle.net/xUrDc/1/

Why does this work? In short, it provides a magical property known as hasLayout to the element in IE7, which happens to fix this bug.

More info: What bug does zoom:1; fix in CSS?

Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • Nice, does this cause any side effects in other browsers? – Flash Jun 10 '11 at 05:44
  • In short: no. (WebKit does support `zoom`, but setting `zoom: 1` changes nothing because it's the default) – thirtydot Jun 10 '11 at 05:46
  • @thirtydot it seems to break when I add the `ul a` styles: http://jsfiddle.net/xUrDc/3/ (Apologies for not putting these in the question). – Flash Jun 10 '11 at 05:56
  • @Andrew: For whatever reason, you need to remove the whitespace: http://jsfiddle.net/xUrDc/4/ – thirtydot Jun 10 '11 at 05:58
  • Wow, what? How can that make any difference? – Flash Jun 10 '11 at 06:01
  • @Andrew: It's another IE7 bug, the specifics of which I've forgotten. Another way to fix it without removing whitespace is to add `font-size: 0` on your `ul`: http://jsfiddle.net/xUrDc/5/ – thirtydot Jun 10 '11 at 06:08
  • @thirtydot Thanks, I would never have guessed that. – Flash Jun 10 '11 at 06:14
  • @Andrew: Here's a resource talking about the bug in question: http://www.cssnewbie.com/fixing-ie6-whitespace-bug/ – thirtydot Jun 10 '11 at 06:20