[RESOLVED] Odd UL Positioning Problem

[code=html]<ul style=”float:left; width:75%; margin-left:12%; padding:5px 0 0 5px; border:1px solid #999;”>
<li style=”float:left; width:100%; padding-bottom:5px;”><em>All Heritage Bath Natural Stone Tops:</em></li>
<li style=”float:left; text-align:center; width:24%; padding-bottom:5px;”><a href=”carrara_white.html” onMouseOver=”document.getElementById(‘carrara_white’).style.visibility=’visible’;” onMouseOut=”document.getElementById(‘carrara_white’).style.visibility=’hidden’;”><img src=”images/carrara_white_50x50.jpg” alt=”Carrara White Vanity Top” style=”border:1px solid #666;”></a><br><span id=”carrara_white” style=”visibility:hidden;”>Carrara White</span></li>
<li style=”float:left; text-align:center; width:24%; padding-bottom:5px;”><a href=”dark_emperador.html” onMouseOver=”document.getElementById(‘dark_emperador’).style.visibility=’visible’;” onMouseOut=”document.getElementById(‘dark_emperador’).style.visibility=’hidden’;”><img src=”images/dark_emperador_50x50.jpg” alt=”Dark Emperador Vanity Top” style=”border:1px solid #666;”></a><br><span id=”dark_emperador” style=”visibility:hidden;”>Dark Emperador</span></li>
<li style=”float:left; text-align:center; width:24%; padding-bottom:5px;”><a href=”glacier_blue.html” onMouseOver=”document.getElementById(‘glacier_blue’).style.visibility=’visible’;” onMouseOut=”document.getElementById(‘glacier_blue’).style.visibility=’hidden’;”><img src=”images/glacier_blue_50x50.jpg” alt=”Glacier Blue Vanity Top” style=”border:1px solid #666;”></a><br><span id=”glacier_blue” style=”visibility:hidden;”>Glacier Blue</span></li>
<li style=”float:left; text-align:center; width:24%; padding-bottom:5px;”><a href=”mohave_beige.html” onMouseOver=”document.getElementById(‘mohave_beige’).style.visibility=’visible’;” onMouseOut=”document.getElementById(‘mohave_beige’).style.visibility=’hidden’;”><img src=”images/mohave_beige_50x50.jpg” alt=”Mohave Beige Vanity Top” style=”border:1px solid #666;”></a><br><span id=”mohave_beige” style=”visibility:hidden;”>Mohave Beige</span></li>
<li style=”float:left; text-align:center; width:24%; padding-bottom:5px;”><a href=”rushmore_grey.html” onMouseOver=”document.getElementById(‘rushmore_grey’).style.visibility=’visible’;” onMouseOut=”document.getElementById(‘rushmore_grey’).style.visibility=’hidden’;”><img src=”images/rushmore_grey_50x50.jpg” alt=”Rushmore Grey Vanity Top” style=”border:1px solid #666;”></a><br><span id=”rushmore_grey” style=”visibility:hidden;”>Rushmore Grey</span></li>
<li style=”float:left; text-align:center; width:24%; padding-bottom:5px;”><a href=”sierra_ash.html” onMouseOver=”document.getElementById(‘sierra_ash’).style.visibility=’visible’;” onMouseOut=”document.getElementById(‘sierra_ash’).style.visibility=’hidden’;”><img src=”images/sierra_ash_50x50.jpg” alt=”Sierra Ash Vanity Top” style=”border:1px solid #666;”></a><br><span id=”sierra_ash” style=”visibility:hidden;”>Sierra Ash</span></li>
<li style=”float:left; text-align:center; width:24%; padding-bottom:5px;”><a href=”tuxedo_black.html” onMouseOver=”document.getElementById(‘tuxedo_black’).style.visibility=’visible’;” onMouseOut=”document.getElementById(‘tuxedo_black’).style.visibility=’hidden’;”><img src=”images/tuxedo_black_50x50.jpg” alt=”Tuxedo Black Vanity Top” style=”border:1px solid #666;”></a><br><span id=”tuxedo_black” style=”visibility:hidden;”>Tuxedo Black</span></li>
<li style=”float:left; text-align:center; width:24%; padding-bottom:5px;”><a href=”ubatuba.html” onMouseOver=”document.getElementById(‘ubatuba’).style.visibility=’visible’;” onMouseOut=”document.getElementById(‘ubatuba’).style.visibility=’hidden’;”><img src=”images/ubatuba_50x50.jpg” alt=”Ubatuba Vanity Top” style=”border:1px solid #666;”></a><br><span id=”ubatuba” style=”visibility:hidden;”>Ubatuba</span></li>
</ul>[/code]

This code is used to create a horizontal list of thumbnails.

It looks good until the browser window is resized. The thumbnails just all over the place. [url=http://www.foremostgroups.com/dev/2007corporate/K&B/vanity_tops/mohave_beige.html]Check it out[/url] for yourself (referring to the box with “All Heritage Bath Natural Stone Tops”). Resize your window manually, and you’ll see the thumbnails jump all over the place.

Any idea why this is?

Thanks.

Also in #CSS _↴