fmz 14

I am in the process of converting a PSD to xthml/css and have funny thing going on with the main navigation element. It looks fine in Safari but in Firefox 3.6 the contact button has bumped down about 10px or more.

In addition, I had to set the width of the ul element unusually wide to accommodate the navigation.

Here is the code:

 <ul>
    <li class="selected"><a class="home" href="index.html">Home</a></li>
    <li><a  class="about" href="about.html">About Us</a></li>
    <li><a  class="portfolio" href="portfolio.html">Portfolio</a></li>
    <li><a  class="maintenance" href="maintenance.html">Maintenance</a></li>
    <li><a  class="testimonials" href="testomonials.html">Testimonials</a></li>
    <li><a  class="contact" href="contact.html">Contact Us</a></li>
  </ul>

And here is the css:

#header ul { 
position: relative; 
top: 0;
left: 265px; 
width: 710px; 
height: 42px; 
margin:0; 
padding: 0; 
list-style-type: none; 
}

#header ul li  { display: inline; }
#header ul li a { text-indent: -9999px; display: block; height: 42px; float: left; }    
a.home  { background: url(../_images/btn_home.png) no-repeat bottom center; width: 46px; }
a.about  { background: url(../_images/btn_about.png) no-repeat bottom center; width: 68px; }
a.portfolio { background: url(../_images/btn_portfolio.png) no-repeat bottom center; width: 59px; }
a.maintenance   { background: url(../_images/btn_maintenance.png) no-repeat bottom center; width: 90px; }
a.testimonials  { background: url(../_images/btn_testimonials.png) no-repeat bottom center; width: 90px; }
a.contact   { background: url(../_images/btn_contact.png) no-repeat bottom center; width: 79px; }

I would appreciate another set of eyes to look at this and help me figure out why the contact button is displaying so oddly in Firefox.

Thanks.

2 answers

Emily G 620
1
point
This was chosen as the best answer

remove the display:inline from #header ul li

That is causing all the li's to stack up over your contact because while they don't have a width they do have a left padding (line 207 in base.css).

You need to remove the top and bottom margin (line 141 in base.css) on the li to get the navigation into the right place:

#header ul li {margin:0;}
Answered almost 7 years ago by Emily G
  • Thank you for taking the time to look that over. Everything is working properly now. fmz almost 7 years ago
0
points

Check for margins that are being put in by the browser itself ! These have caught me out a few times in various different browsers (ie is the worst for it). Look up computed style in the inspector, if there is a margin in there - just take precedence by writing in your own margin: 0px; into the element thatis getting the computed margin.

Answered almost 7 years ago by mmuller
  • I checked and there doesn't appear to be any extra styling impacting it. fmz almost 7 years ago