1

I have been trying to create LI elements with float left and an image (as a "block") inside of them. The code works fine in all browser, except for IE 7 (and 6), where the LI are organized vertically instead of horizontally. What should I change in order for the code to work well in IE7? (you can find the code at http://jsbin.com/ilexa/edit as well) .

CODE:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css">

<style>
ul {
    width:700px;
}
li {
    float:left;
    margin:10px;
}
li img {
    display:block;
    margin: 0 auto ;
    width:50px;
    height:50px;
}
</style>
</head>
<body>
<ul>
    <li><img src="http://dummyimage.com/50x50/000/fff" /></li>
    <li><img src="http://dummyimage.com/50x50/000/fff" /></li>
    <li><img src="http://dummyimage.com/50x50/000/fff" /></li>
    <li><img src="http://dummyimage.com/50x50/000/fff" /></li>
    <li><img src="http://dummyimage.com/50x50/000/fff" /></li>
    <li><img src="http://dummyimage.com/50x50/000/fff" /></li>
</ul>
</body>
</html>
Gidi
  • 43
  • 2

1 Answers1

0

Is it necessary to have the <img> as block? Can't the spacing be completely handled by the <li>? An alternative could be to declare also <img> as float: left - or perhaps even inline-block (see Block-level elements within display: inline-block).

Community
  • 1
  • 1
Martin Algesten
  • 13,052
  • 4
  • 54
  • 77
  • @Matrin - I need as a block since I am inserting more stuff in the LI later on (I did not include it in the source to make it simple). Why should the "block" attribute cause this problem ? (Gidi) – Joel Dec 05 '10 at 10:50
  • I suspect IE follows the "standard" block layout of allowing one block per line, despite it being wrapped in a float. Try setting `float` on the image itself and keep it block - does that help? – Martin Algesten Dec 05 '10 at 10:54