Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts

    Question CSS to set UL LI Inline-Block

    I cannot seem to set my UL LI to be inline?!

    here is my HTML:
    Code:
    <ul class="3products">
    			<li><a href="#" title="pic1"><img src="images/pic1.jpg" alt="pic1" /></a></li>
    			<li><a href="#" title="pic2"><img src="images/pic2.jpg" alt="pic2" /></a></li>
    			<li class="last"><a href="#" title="pic3"><img src="images/pic3.jpg" alt="pic3" /></a></li>
    		</ul>
    here is my CSS
    Code:
    #main .3products {width:948px; height:227px;}
    	#main .3products li { width:308px; height:227px; display: inline-block; margin-right:8px; }
    	#main .3products li.last { margin-right:0px; }
    and here is the site:

    http://www.jbiddulph.com/touchtile/products.HTML#

    What am I doing wrong?

    Please help?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello jarv,
    Pretty sure .3products is invalid. http://webdesign.about.com/cs/css/qt/tipcssidnames.htm

    Try .threeProducts instead maybe.

    See the links in my signature about validating.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    jarv (01-08-2013)

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,303
    Thanks
    23
    Thanked 612 Times in 611 Posts
    I dropped the .3products also and the display: inline-block; in favor of display: inline;. This is what I used:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style type="text/css">
    #main li { width:308px; height:227px;margin-right:8px;display:inline;}
    #main li.last { margin-right:0px; }
    </style>
    </head>
    
    <body>
    <div id="main">
    <ul class="3products">
    	<li><a href="#" title="pic1"><img src="images/pic1.jpg" alt="pic1"></a></li>
    	<li><a href="#" title="pic2"><img src="images/pic2.jpg" alt="pic2"></a></li>
    	<li class="last"><a href="#" title="pic3"><img src="images/pic3.jpg" alt="pic3"></a></li>
    </ul>
    </div>
    </body>
    </html>

  • Users who have thanked sunfighter for this post:

    jarv (01-08-2013)

  • #4
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    Thanks!


  •  

    Posting Permissions

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