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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Location
    Columbus, OH
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    List is moving cell down

    Will explain this as best as I can.

    I am including a horizontal CSS menu in a website I am making for a friend, when I simply use text everything is fine, as in picture below. This is a cropped screenshot btw.


    However when I add the list I get this.

    see how the entire cell has moved down?

    here is my code.

    the CSS is:
    Code:
    body,
    html {
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:12px;
    	margin:0;
    	padding:0;
    	color:#000;
    	background-image:url(../images/site_bg.png);
    	background-repeat:repeat-x;
    }
    
    #container {
    	width:950px;
    	margin:0 auto;
    	text-align:center;
    }
    /*End Global Styles Here*/
    
    /*Begin Head Styles Here*/
    #head {
    	height:192px;
    	background:#ebebeb;
    }
    
    /*Begin Nav Styles Here*/
    #nav {
    	height:47px;
    	background:#ef4036;
    }
    
    #nav li {
        display:inline;
    }
    
    #nav li a {   
    	color:#FFF;
    	font-size:16px;
    	font-weight:bold;
    	text-decoration: none;
    }
    /*End Nav Styles Here*/
    The Menu using list:
    Code:
    <div id="nav">
    	<ul>
        	<li><a href="#">Home</a></li>
        	<li><a href="#">About</a></li>
        	<li><a href="#">Services</a></li>
        	<li><a href="#">Products</a></li>
        	<li><a href="#">Contact Us</a></li>
    	</ul>
    </div>
    And Without:
    Code:
    <div id="nav">
    	Main Navigation Here
    </div>
    nav.php is loaded into a cell head.php as a php include.

    Thank You in advance
    Rab

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    That's coming from the default top margin that the browser is applying to the ul element. Fix it via:

    Code:
    #nav ul{margin:0}
    It's good practice to set all the margins and padding on all elements to 0, then they'll be consistent cross-browser, and you can set them to what you want - like this, at the top of your css:

    Code:
    *{margin:0;padding:0}
    If you use Firebug for Firefox it's very easy to see this sort of thing.


  •  

    Posting Permissions

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