SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict sparkdigital's Avatar
    Join Date
    Feb 2005
    Location
    Kendal, Cumbria - The Lake District, UK
    Posts
    249
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    inline list navigation problem with FF/IE

    Hi,

    I'm using the following code for my inline navigation but the whole list is too far down the page in FF - I imagine they handle the top margin / padding for list elements in a different way from IE. How do I fix this?

    Here's my code:
    Code:
    #menu {
    	position: relative;
    	float: left;
    	margin: 0px;
    	padding: 10px 0px 0px 0px;
    	width: 900px;
    	height: 55px;
    	}
    #menu li {
    	font-family: Georgia, "Times New Roman", Times, serif;
    	color: #ffffff;
    	font-size: medium;
    	display: inline;
    	margin: 0px;
    	padding: 0px 20px 0px 0px;
    	text-transform: capitalize;
    	list-style: none;
    	}
    Thanks!

    Konrad

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Would need to see the whole page (preferably link) - there would be something else affecting the position of this.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Assuming that #menu is the actual ul in question then you have already addressed the top margin on the ul and so there should be no difference and I echo what Centauri has said above

  4. #4
    SitePoint Member
    Join Date
    Aug 2008
    Location
    Ohio
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sparkdigital, you will want to make sure that the unordered list, which Paul mentioned, has it's margins set to 0.

    If #menu is an id applied to your UL (ex. <ul id="menu">) then I would have to see some more code. If, like Listamatic examples, #menu is like #navcontainer, then you will need to apply 0 margins to your UL.

    An example would be the following:

    Code:
    <div id="navcontainer">
         <ul id="navlist">
              <li><a href="#">Item one</a></li>
              <li><a href="#">Item two</a></li>
              <li><a href="#">Item three</a></li>
              <li><a href="#">Item four</a></li>
              <li><a href="#">Item five</a></li>
         </ul>
    </div>
    If you've read Paul's post and you are still having problems then make sure your UL, or any class or id that is associated with your UL has margins: 0.

    For the example above it would be:

    Code:
    #navlist li
    {
    	display: inline;
    	list-style-type: none;
    	margin: 0;
    	padding: 5px 5px 5px 3px;
    	/* background-color: #ffffff; */
    }
    
    #navcontainer { background-color: #ffffff; margin: 0; }
    #navlist li:hover { background-color: #cccccc; color: #000000; }
    #navlist li a:hover { color: #ffffff; }
    #navlist li a:visited { color: #000000; }
    
    #navlist li a
    {
    	font-family: trebuchet ms;
    	font-size: 11px;
    	color: #000000;
    	text-decoration: none;
    }
    
    #navlist { padding: 5px 0px 4px 0px; margin: 0px;}
    This is a simple inline navbar I have created. You can add it and take a look at what it does.

    Try removing:

    margin: 0;

    From:

    Code:
    #navlist { padding: 5px 0px 4px 0px; margin: 0; }
    See if that result is similar to what you are seeing with your own navbar. When you remove margin: 0; you should see a gap above the navbar and whatever is above the navbar (in most cases some sort of site logo).

    Hope this helps, let us know!

    Zack


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
  •