CSS List acting strange

[thugslyf]

Hi Friends,

please look at the following URL
http://gunwebsystems.biz.mytempweb.com/brands.aspx

if you see there one item in the list is standing on its own in a single row? could someone tell me what is the reason for that im using a <ul> based list and css to create the list. please help me resolve this?

[Snookerman]

Try removing the space between the list tags:

   </li>
   
   <li>

Try this instead:

   </li>
   <li>

Good luck!

[thugslyf]

Hi,


I wonder its not the case? anyway i tried what u told using firebug editor and i see no difference. so it seems its not the cause..any idea

[Snookerman]

I did the same thing and the problem disappeared. Here is the markup I used, just remove the entire list and replace it with this one:

<ul class="productlist1">
	<li> <a href="viewbrand.aspx?BrandID=28"><img height="76" width="114" border="0" alt="Aquamate" src="BrandLogos/1287166470529468256010.jpg"/></a><br/>
		<div style="width: 115px; text-align: center;"><a class="redfont2" href="viewbrand.aspx?BrandID=28">Aquamate</a></div>
	</li>
	<li> <a href="viewbrand.aspx?BrandID=29"><img height="76" width="114" border="0" alt="Fred Smith" src="BrandLogos/128719753751286910FredSmithLogo.jpg"/></a><br/>
		<div style="width: 115px; text-align: center;"><a class="redfont2" href="viewbrand.aspx?BrandID=29">Fred Smith</a></div>
	</li>
	<li> <a href="viewbrand.aspx?BrandID=30"><img height="76" width="114" border="0" alt="GoodGear" src="BrandLogos/128720669598455894GoodGearOwner.jpg"/></a><br/>
		<div style="width: 115px; text-align: center;"><a class="redfont2" href="viewbrand.aspx?BrandID=30">GoodGear</a></div>
	</li>
	<li> <a href="viewbrand.aspx?BrandID=20"><img height="76" width="114" border="0" alt="Herfords Chemist" src="BrandLogos/128698708032615814yousavechemist.jpg"/></a><br/>
		<div style="width: 115px; text-align: center;"><a class="redfont2" href="viewbrand.aspx?BrandID=20">Herfords Chemist</a></div>
	</li>
	<li> <a href="viewbrand.aspx?BrandID=23"><img height="76" width="114" border="0" alt="Homemaker City Jindalee" src="BrandLogos/128702142514486370HOMEMAKERCITY.jpg"/></a><br/>
		<div style="width: 115px; text-align: center;"><a class="redfont2" href="viewbrand.aspx?BrandID=23">Homemaker City Jindalee</a></div>
	</li>
	<li> <a href="viewbrand.aspx?BrandID=25"><img height="76" width="114" border="0" alt="Kmart" src="BrandLogos/128702151802633449kmart.jpg"/></a><br/>
		<div style="width: 115px; text-align: center;"><a class="redfont2" href="viewbrand.aspx?BrandID=25">Kmart</a></div>
	</li>
	<li> <a href="viewbrand.aspx?BrandID=27"><img height="76" width="114" border="0" alt="Lloyd Loom Lusty Classics" src="BrandLogos/128716352262386977Thumb_LloydLoomAd_1.jpg"/></a><br/>
		<div style="width: 115px; text-align: center;"><a class="redfont2" href="viewbrand.aspx?BrandID=27">Lloyd Loom Lusty Classics</a></div>
	</li>
	<li> <a href="viewbrand.aspx?BrandID=34"><img height="76" width="114" border="0" alt="Maitland City Centre" src="BrandLogos/128777150378881914maitlandCC.gif"/></a><br/>
		<div style="width: 115px; text-align: center;"><a class="redfont2" href="viewbrand.aspx?BrandID=34">Maitland City Centre</a></div>
	</li>
	<li> <a href="viewbrand.aspx?BrandID=36"><img height="76" width="114" border="0" alt="mart" src="BrandLogos/128798614895158097mart.jpg"/></a><br/>
		<div style="width: 115px; text-align: center;"><a class="redfont2" href="viewbrand.aspx?BrandID=36">mart</a></div>
	</li>
	<li> <a href="viewbrand.aspx?BrandID=26"><img height="76" width="114" border="0" alt="Myer" src="BrandLogos/128702146720504624myer.jpg"/></a><br/>
		<div style="width: 115px; text-align: center;"><a class="redfont2" href="viewbrand.aspx?BrandID=26">Myer</a></div>
	</li>
	<li> <a href="viewbrand.aspx?BrandID=32"><img height="76" width="114" border="0" alt="Northbridge Plaza" src="BrandLogos/128762790814721071northbridge.jpg"/></a><br/>
		<div style="width: 115px; text-align: center;"><a class="redfont2" href="viewbrand.aspx?BrandID=32">Northbridge Plaza</a></div>
	</li>
	<li> <a href="viewbrand.aspx?BrandID=24"><img height="76" width="114" border="0" alt="Salamander Bay" src="BrandLogos/128698363140815779salamander1.jpg"/></a><br/>
		<div style="width: 115px; text-align: center;"><a class="redfont2" href="viewbrand.aspx?BrandID=24">Salamander Bay</a></div>
	</li>
	<li> <a href="viewbrand.aspx?BrandID=31"><img height="76" width="114" border="0" alt="Thorton Home Hardware" src="BrandLogos/128761444765948967thortonhh_logo.jpg"/></a><br/>
		<div style="width: 115px; text-align: center;"><a class="redfont2" href="viewbrand.aspx?BrandID=31">Thorton Home Hardware</a></div>
	</li>
	<li> <a href="viewbrand.aspx?BrandID=37"><img height="76" width="114" border="0" alt="Video Ezy" src="BrandLogos/128801862908079468velogo.jpg"/></a><br/>
		<div style="width: 115px; text-align: center;"><a class="redfont2" href="viewbrand.aspx?BrandID=37">Video Ezy</a></div>
	</li>
	<li> <a href="viewbrand.aspx?BrandID=33"><img height="76" width="114" border="0" alt="Warwick Farm Hometown" src="BrandLogos/128763649851286821Warwickfarmht.jpg"/></a><br/>
		<div style="width: 115px; text-align: center;"><a class="redfont2" href="viewbrand.aspx?BrandID=33">Warwick Farm Hometown</a></div>
	</li>
</ul>

The only thing I did was to remove the spaces between list items.

Good luck mate!

[X96 Web Design]

EDIT: This is for thugslyf, Snookerman posted while I was posting!

Tables for layout?! Shame!

Why is everything spaced out so much? (See attached) Is it supposed to be like that?

The problem may be this:

.productlist li
{
    display: inline; <----
    float: left;
    margin-left: 15px;
    margin-bottom: 15px;
}

Try putting display:block, and then a width, say, like this:

.productlist li
{
    display:block;
    width:150px;
    float: left;
    margin-left: 15px;
    margin-bottom: 15px;
}

See if that does anything...

Hope that helps!