SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can't get <li> to align horizontal

    this is weird. I've always been able to align <li> horizontal without a problem but the images are aligning vertical in the ProductInfo div element:

    Code:
    #ProductDescriptionWrapper
    {
    	margin: 0px 0px 10px 0px;
    	overflow: hidden;
    }
    
    #ProductDescThumbnail
    {
    	float: left;
    	margin: 0px 0px 0px 0px;
    	width: 125px;
    	
    }
    
    #ProductDescription
    {
    	float: left;
    	width: 430px;
    	text-align: justify;
    }
    
    #ProductInfo
    {
    	margin: 0px 0px 10px 0px;
    }
    
    .ProductInfo li
    {
    	float: left;
    	display: inline;
    	vertical-align: bottom;
    	text-align: left;	
    }
    
    #ProducCrossSells
    {
    	margin: 0px 0px 10px 0px;
    }
    
        <div id="ProductDescriptionWrapper">
            <div id="ProductDescThumbnail"><img src="/Content/Images/product/dummythumbnail.jpg" /></div>
            <div id="ProductDescription">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean metus ante, 
                aliquet sit amet convallis et, tincidunt sit amet elit. Suspendisse potenti. 
                Fusce mauris lorem, vestibulum sed adipiscing vel, fermentum vel enim. 
                Curabitur ligula odio, vulputate eget faucibus a, bibendum quis velit. 
                Donec eu tellus erat.
            </div>
        </div>
        <div id="ProductInfo">
            <ul>
                <li><img src="/Content/Images/product/dummyProductInfo1.jpg" /></li>
                <li><img src="/Content/Images/product/dummyProductInfo2.jpg" /></li>
                <li><img src="/Content/Images/product/dummyProductInfo3.jpg" /></li>
                <li><img src="/Content/Images/product/dummyProductInfo4.jpg" /></li>
            </ul>
            <ul>
                <li><img src="/Content/Images/product/dummyProductInfo5.jpg" /></li>
            </ul>          
        </div>
        <div id="ProducCrossSells">
            <ul>
                <li><img src="/Content/Images/product/dummyCrossSell1.jpg" /></li>
                <li><img src="/Content/Images/product/dummyCrossSell2.jpg" /></li>
                <li><img src="/Content/Images/product/dummyCrossSell3.jpg" /></li>
                <li><img src="/Content/Images/product/dummyCrossSell4.jpg" /></li>
            </ul>
        </div>

  2. #2
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,578
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    .ProductInfo li
    Should be #ProductInfo li, it's an ID and not a class name

  3. #3
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh god.


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
  •