CODEWITHSUNDEEP
cssinternet-explorerinternet-explorer-7
Jeaf Gilbert
Jeaf Gilbert

Reputation: 11991

Last row list items are missing bottom margin on IE7

I'm wondering why list items as last row are missing bottom margin on IE7?

http://jsfiddle.net/JeaffreyGilbert/sW5DB/ enter image description here

Upvotes: 2

Views: 560

Answers (1)

thirtydot
thirtydot

Reputation: 228182

There are (annoying) ways to fix it still using floats, but the easiest solution in this case is to switch to display: inline-block.

See: http://jsfiddle.net/3rjdf/

Replacing float:left with three new properties:

ul { width:300px; margin:0; padding:0; overflow:hidden; list-style:none; background:#ccc; }
li { display:inline-block; *display:inline; zoom:1; /* float:left; */ width:98px; height:120px; margin-bottom:30px; border:1px solid black; background:#f0f0f0; }

*display:inline; zoom:1; is explained here. Suffice to say that it makes it work in IE7.

I also had to collapse whitespace in your HTML (why? read 1 and 2):

<ul>
    <li></li><li></li><li></li><li></li><li></li>
</ul>

Upvotes: 2

Related Questions