Wed, 2010-03-03 05:38
I have a ul inside a div and I can't seem to get the images to align up to the left. I figure it's my lack of understanding of the syntax involved.
CSS
#nav ul { list-style-type: none; image-align: left; } li { position: relative; float: left; } li img { display: block; float: left; } img.corner { width: 30px; height: 30px; border: none; display: block !important; } img.floatLeft { float: left; margin: 0; padding: 0; } img.floatRight { float: right; margin: 0px; padding: 0px 0px 0px 2px; } .clearboth { clear: both; } a img { list-style-type: none; border: none; margin: 0px; padding: 0px; } .roundcontainer { margin-left: auto; margin-right: auto; width: auto; background-color: #20547b; } .roundtop { background: url(images/Template/tr.jpg) no-repeat top right; } .roundbottom { background: url(images/Template/br.jpg) no-repeat bottom right; } #top_bar { width: 800px; height: 40px; background: url(Images/Template/top_bar2.jpg) repeat-x left; } #nav { float: left; width: 130px; background-color: #20547b; border-right: 2px solid #4186bd; }
HTML:
<div class="roundcontainer"> <div class="roundtop"> <img src="Images/Template/tl.jpg" width="30" height="30" class="corner" style="display: none" /> </div><br class="clearboth" /> <div id="top_bar"> </div> <div id="nav"> <ul> <li><img src="Images/Template/nav_home_off.jpg" /></li> <li><img src="Images/Template/nav_gallery_off.jpg" /></li> <li><img src="Images/Template/nav_videos_off.jpg" /></li> <li><img src="Images/Template/nav_tshirts_off.jpg" /></li> <li><img src="Images/Template/nav_comic_strip_off.jpg" /></li> <li><img src="Images/Template/nav_who_is_zoid_off.jpg" /></li> <li><img src="Images/Template/nav_cool_stuff_off.jpg" /></li> <li><img src="Images/Template/nav_links_off.jpg" /></li> </ul> </div> <div class="roundbottom"> <img src="Images/Template/bl.jpg" width="30" height="30" class="corner" style="display: none" /> </div> </div>
If someone could give me a hand with this I won't have to put my fist though the laptop screen. Thanks!