IE 7 zoom: 1 problems

HTML & CSS
1

Hello, I am having a bit of trouble with IE 7. Everything works fine in other browsers and I have narrowed it down the the zoom: 1 applied via the clearfix. If I remove the zoom attribute it works fine but with it the ul fails to display at all. Any thoughts?

ul.grid {
  *zoom: 1;
}
ul.grid:before, ul.grid:after {
  content: "";
  display: table;
}
ul.grid:after {
  clear: both;
}
ul.grid > li {
  width: 23%;
  margin: 0 1% 1% 1%;
  float: left;
  height: auto;
  display: block;
}

<div class="container">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

			<ul class="grid">
				<li><img src="http://placehold.it/500x500"></li>
				<li><img src="http://placehold.it/500x500"></li>
				<li><img src="http://placehold.it/500x500"></li>
				<li><img src="http://placehold.it/500x500"></li>
				<li><img src="http://placehold.it/500x500"></li>
				<li><img src="http://placehold.it/500x500"></li>
			</ul>
		</div>
2

Hi,

I’m not seeing any differences in IE7 with that snippet. Do you have a live example or at least a working demo?

Applying zoom to lists in IE7 can stop them working as lists and mess up bullets and numbering but if you aren’t using markers than the zoom should be ok - it’s just the same as adding a dimension in most respects.

3

This is a live version of it. http://test.jeremyc.kodingen.com/index.html

Another strange issue In IE 8 the columns align vertically just fine, but in chrome they are offset but a small amount.

4

Hi,

Its a float bug on the p above the grid. You must make sure that in IE you clear floats:


ul.grid{clear:both}

Or don’t float the p element as it is 100% wide and doesn’t need to be floated.

5

You can’t expect fractions of percentages to add up exactly as browsers will round them differently and indeed Opera will ignore fractions of percentages altogether where percentage widths are concerned. That’s why grid layouts fail. You could just float the last item in the row right and remove its left margin and the it should line up but you should expect that multiple elements in a percentage environment will never be exact.

6

Thank you for the quick response, it fixed the issue perfectly. As for the grid i had a feeling that that was the cause.