ie horizontal float problem

floating images are not aligned vertically

[jur451c]

Hi, I have one of those wonderful ie bugs. I have a container within which are a number of thumbnails, all set to float:left. What i find is when the images go onto a new line all the images on the new line from the second onwards are lower than the first. The page renders fine in firefox so I guess this is an ie problem.

Please help!?!

[simonuk]

Welcome to WebmasterWorld!

We really need to see the code relating to your question so we can see what the problem is.

[jur451c]

hi the html is;

<div id="mainContent">
<h1>Gallery</h1>
<p><a href="images/test.jpg" rel="lightbox" title="look at me!"><img src="images/testb-t.jpg" width="100" height="100" class="imagethumb" alt="thumnail image"/></a></p>
<p><a href="images/test.jpg" rel="lightbox" title="look at me!"><img src="images/testb-t.jpg" width="100" height="100" class="imagethumb" alt="thumnail image"/></a></p>
<p><a href="images/test.jpg" rel="lightbox" title="look at me!"><img src="images/testb-t.jpg" width="100" height="100" class="imagethumb" alt="thumnail image"/></a></p>
<p><a href="images/test.jpg" rel="lightbox" title="look at me!"><img src="images/testb-t.jpg" width="100" height="100" class="imagethumb" alt="thumnail image"/></a></p>
<p><a href="images/test.jpg" rel="lightbox" title="look at me!"><img src="images/testb-t.jpg" width="100" height="100" class="imagethumb" alt="thumnail image"/></a></p>
<p><a href="images/test.jpg" rel="lightbox" title="look at me!"><img src="images/testb-t.jpg" width="100" height="100" class="imagethumb" alt="thumnail image"/></a></p>
<p><a href="images/test.jpg" rel="lightbox" title="look at me!"><img src="images/testb-t.jpg" width="100" height="100" class="imagethumb" alt="thumnail image"/></a></p>
<p><a href="images/test.jpg" rel="lightbox" title="look at me!"><img src="images/testb-t.jpg" width="100" height="100" class="imagethumb" alt="thumnail image"/></a></p>
<p><a href="images/test.jpg" rel="lightbox" title="look at me!"><img src="images/testb-t.jpg" width="100" height="100" class="imagethumb" alt="thumnail image"/></a></p>
<p><a href="images/test.jpg" rel="lightbox" title="look at me!"><img src="images/testb-t.jpg" width="100" height="100" class="imagethumb" alt="thumnail image"/></a></p>
<p><a href="images/test.jpg" rel="lightbox" title="look at me!"><img src="images/testb-t.jpg" width="100" height="100" class="imagethumb" alt="thumnail image"/></a></p>
<p><a href="images/test.jpg" rel="lightbox" title="look at me!"><img src="images/testb-t.jpg" width="100" height="100" class="imagethumb" alt="thumnail image"/></a></p>
<p><a href="images/test.jpg" rel="lightbox" title="look at me!"><img src="images/testb-t.jpg" width="100" height="100" class="imagethumb" alt="thumnail image"/></a></p>
<p><a href="images/test.jpg" rel="lightbox" title="look at me!"><img src="images/testb-t.jpg" width="100" height="100" class="imagethumb" alt="thumnail image"/></a></p>
<p><a href="images/test.jpg" rel="lightbox" title="look at me!"><img src="images/testb-t.jpg" width="100" height="100" class="imagethumb" alt="thumnail image"/></a></p>
<br class="clearfloat" />
<div>

and the relevant css is;

body {
margin: 0;
padding: 0;
text-align: center;
color: #FFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
background-color: #000;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: left top;
background-image: url(images/containerbackground.jpg);
}
.twoColHybLtHdr #container {
width: 80%;
border: 1px none #000000;
text-align: left;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: 160px;
background-repeat: no-repeat;
background-image: url(images/logoblue.png);
}
.twoColHybLtHdr #mainContent {
margin: 0 20px 0 13em;
}
img {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
.imagethumb {
float: left;
text-decoration: none;
height: 100px;
width: 100px;
margin-top: 25px;
margin-left: 25px;
}

[simonuk]

The simple fix is to add:

p {float:left;}

[jur451c]

thanks, that solved it!