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 3 of 3
  1. #1
    New Coder
    Join Date
    Dec 2005
    Posts
    61
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problems with list formatting

    Hi guys,

    I'm trying to format a list using HTML and CSS. The link to the page is below (excuse the fact that the page is a mess, I'm just experimenting at this stage). http://82.138.232.85/

    In IE the page kinda looks like what I want however it has pushed the bullets (the arrows) across to the right instead of lining them up with the header for that box. And in Firefox it's just totally screwed...any ideas?

    Here is the HTML:

    Code:
    <div id="Navigation">
    <ul>
    	<li><a href="link">Adidas</a></li>
    	<li><a href="link">Call of the Wild</a></li>
    	<li><a href="link">Fred Perry</a></li>
    	<li><a href="link">Frietag</a></li>
    	<li><a href="link">Levi's</a></li>
    	<li><a href="link">Maharishi Denim</a></li>
    	<li><a href="link">Medicom</a></li>
    	<li><a href="link">MHI by Maharishi</a></li>
    	<li><a href="link">Nike</a></li>
    	<li><a href="link">Silas</a></li>
    	<li><a href="link">Tonite</a></li>
    	<li><a href="link">Trainerspotter</a></li>
    	<li><a href="link">Umbro by Kim Jones</a></li>
    </ul>
    </div>
    And the relevant CSS:

    Code:
    /* Navigation */
    
    #Navigation {
    	width: 180px;
    	border: 0;
    	padding: 0;
    	margin: 2px;
    	font-family: Tahoma;
    	background-color: #E5E4D2;
    	color: #595957;
    	}
    
    #Navigation ul {
    	list-style: none;
    	margin: 2px;
    	padding: 0;
            border: none;
    	list-style: disc url(/skins/end/images/bullet.gif) inside;
    	font-size: 9px;
    	}
    		
    #Navigation li {
            border: 0;
    	margin: 2px;
    	padding: 0;
    	}
    
    #Navigation li a {
    	display: block;
    	padding: 0;
    	border: 0;
    	background-color: #D9D8C7;
    	color: #595957;
    	text-decoration: none;
    	width: 100%;
    	}
    
    html>body #Navigation li a {
    	width: auto;
    	}
    
    #Navigation li a:hover {
    	border: 0;
    	background-color: #F3F1E4;
    	color: #595957;
    	}
    Thanks!

    Paul

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    The way browsers handle list-style-position varies, I always set the bullet as a background image, its easy, and works out well most of the time. Try this
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    /* Navigation */
    
    #Navigation {
    	width: 180px;
    	border: 0;
    	padding: 0;
    	margin: 2px;
    	font-family: Tahoma;
    	background-color: #E5E4D2;
    	color: #595957;
    	font-size:0.6em;
    	}
    
    #Navigation ul {
    	margin:0;
    	padding: 1px;
    	list-style: none;
    	}
    		
    #Navigation li {
    	margin: 2px;
    	padding: 0 0 0 10px;
    	background:url(/skins/end/images/bullet.gif) left center no-repeat;
    	}
    
    #Navigation li a {
    	display: block;
    	padding:0;
    	border: 0;
    	background-color: #D9D8C7;
    	color: #595957;
    	text-decoration: none;
    	width:162px;
    	}
    #Navigation li a:hover {
    	border: 0;
    	background-color: #F3F1E4;
    	color: #595957;
    	}
    </style>
    </head>
    
    <body>
    <div id="Navigation">
    <ul>
    	<li><a href="link">Adidas</a></li>
    	<li><a href="link">Call of the Wild</a></li>
    	<li><a href="link">Fred Perry</a></li>
    	<li><a href="link">Frietag</a></li>
    	<li><a href="link">Levi's</a></li>
    	<li><a href="link">Maharishi Denim</a></li>
    	<li><a href="link">Medicom</a></li>
    	<li><a href="link">MHI by Maharishi</a></li>
    	<li><a href="link">Nike</a></li>
    	<li><a href="link">Silas</a></li>
    	<li><a href="link">Tonite</a></li>
    	<li><a href="link">Trainerspotter</a></li>
    	<li><a href="link">Umbro by Kim Jones</a></li>
    </ul>
    </div>
    </body>
    </html>

  • #3
    New Coder
    Join Date
    Dec 2005
    Posts
    61
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks that's much better!


  •  

    Posting Permissions

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