Results 1 to 5 of 5

Thread: CSS List acting strange

  1. #1
    Join Date
    Feb 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default CSS List acting strange

    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?

  2. #2
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Try removing the space between the list tags:
    Code:
       </li>
       
       <li>
    Try this instead:
    Code:
       </li>
       <li>
    Good luck!

  3. #3
    Join Date
    Feb 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    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:
    HTML Code:
    <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!

  5. #5
    Join Date
    Feb 2009
    Posts
    303
    Thanks
    18
    Thanked 36 Times in 36 Posts

    Default

    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:
    Code:
    .productlist li
    {
        display: inline; <----
        float: left;
        margin-left: 15px;
        margin-bottom: 15px;
    }
    Try putting display:block, and then a width, say, like this:
    Code:
    .productlist li
    {
        display:block;
        width:150px;
        float: left;
        margin-left: 15px;
        margin-bottom: 15px;
    }
    See if that does anything...

    Hope that helps!
    Last edited by X96 Web Design; 02-28-2009 at 05:37 PM. Reason: oops
    Alex Blackie, X96 Design
    My Website
    I specialize in: HTML5, CSS3, PHP, Ruby on Rails, MySQL, MongoDB, Linux Server Administration

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •