Home/ Questions/Q 3487556
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T11:09:48+00:00

I have been trying to create LI elements with float left and an image

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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).

    • 0