CSS Firefox Issue with Unordered List

  • devilwood
  • Silver Member
  • Silver Member
  • User avatar
  • Posts: 437

Post 3+ Months Ago

The links in Firefox get displayed lower than the area (background area color) where they need to be. IE ,the links are aligned where they are suppose to be and it works fine. Firefox displays the links but they are closer to the content rather than over the background color set by the navigation.


Code: [ Select ]
body{
margin:0;
width:800;
background-image: url(bg.jpg);
background-repeat: repeat-x;
background-color: #4e361e;
}

#page {
width: 800px;
padding-bottom:5px;
background-color:#fff;
margin: 0 auto;
border-top: 5px #999967 solid;
border-bottom: 5px #999967 solid;
display:table;
background-image: url(body2.jpg);
}

#header_img{
width:800px;
height:110px;
background-image:url(headerimg.jpg);
}

#navigation {
background-color:#6d6d4a;
border-top: 1px #999967 solid;
border-bottom: 1px #999967 solid;
border-left: 2px #999967 solid;
border-right: 2px #999967 solid;
    float: left;
    left: 0px;
    width: 99.5%;
    height: 20px;
}
#navigation ul {
    text-align: center;
}

#navigation ul li {
    display: inline;
    margin-right: .75em;
}
#navigation ul li a{
    font: 14px/18px Arial, Helvetica, sans-serif;
    color: #48231A;
    text-decoration: none;
}
#navigation ul li.last {
    margin-right: 0;
}
  1. body{
  2. margin:0;
  3. width:800;
  4. background-image: url(bg.jpg);
  5. background-repeat: repeat-x;
  6. background-color: #4e361e;
  7. }
  8. #page {
  9. width: 800px;
  10. padding-bottom:5px;
  11. background-color:#fff;
  12. margin: 0 auto;
  13. border-top: 5px #999967 solid;
  14. border-bottom: 5px #999967 solid;
  15. display:table;
  16. background-image: url(body2.jpg);
  17. }
  18. #header_img{
  19. width:800px;
  20. height:110px;
  21. background-image:url(headerimg.jpg);
  22. }
  23. #navigation {
  24. background-color:#6d6d4a;
  25. border-top: 1px #999967 solid;
  26. border-bottom: 1px #999967 solid;
  27. border-left: 2px #999967 solid;
  28. border-right: 2px #999967 solid;
  29.     float: left;
  30.     left: 0px;
  31.     width: 99.5%;
  32.     height: 20px;
  33. }
  34. #navigation ul {
  35.     text-align: center;
  36. }
  37. #navigation ul li {
  38.     display: inline;
  39.     margin-right: .75em;
  40. }
  41. #navigation ul li a{
  42.     font: 14px/18px Arial, Helvetica, sans-serif;
  43.     color: #48231A;
  44.     text-decoration: none;
  45. }
  46. #navigation ul li.last {
  47.     margin-right: 0;
  48. }





Code: [ Select ]

<body>


<div id="page">
    
    
        <div id="header">
            <div id="header_img">&nbsp;</div>
        </div>
    <div id="navigation">
    <ul>    
                            <li><a href="main.html" target="_self">Home</a></li>
                    <li><a href="about.html" target="_self">About</a></li>            
                    <li><a href="projects.html" target="_self">Special Projects</a></li>
                    <li><a href="news.html" target="_self">News and Events</a></li>
                            
     </ul>
</div>



<div content.....>

....</div></body>
  1. <body>
  2. <div id="page">
  3.     
  4.     
  5.         <div id="header">
  6.             <div id="header_img">&nbsp;</div>
  7.         </div>
  8.     <div id="navigation">
  9.     <ul>    
  10.                             <li><a href="main.html" target="_self">Home</a></li>
  11.                     <li><a href="about.html" target="_self">About</a></li>            
  12.                     <li><a href="projects.html" target="_self">Special Projects</a></li>
  13.                     <li><a href="news.html" target="_self">News and Events</a></li>
  14.                             
  15.      </ul>
  16. </div>
  17. <div content.....>
  18. ....</div></body>



Many thanks in advance.
  • devilwood
  • Silver Member
  • Silver Member
  • User avatar
  • Posts: 437

Post 3+ Months Ago

I just took out the <ul> and changed my css and now it works fine in firefox. Not sure why the <ul> was in there, just seems there's alot of horizontal css menus out there that are doing that, but I couldn't get it to display over the div navigation. The links were displayed a little farther down the page in firefox. I figured it had to be a padding issue of some sort that was causing it, but I never figured it out. I just removed the <ul>.
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1827
  • Loc: In the Great White North

Post 3+ Months Ago

otherwise changing the li display type to inline-block would have probably fixed the issue as well.
  • devilwood
  • Silver Member
  • Silver Member
  • User avatar
  • Posts: 437

Post 3+ Months Ago

Thanks for the reply. I'll update my code so I can do it both ways :} I thought I played around with the display options but I don't believe I used the hyphenated inline-block attribute.
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1827
  • Loc: In the Great White North

Post 3+ Months Ago

yeah that one has become my friend. Mostly for cases like the one you described with positioned ULs

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 17 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.