Horizontal dropdown menu position problem

[Phil Gent]

Hi,

I'm struggling with a cross browser solution to position my menu ul and li elements in the same place inside a div.

I'm sure it's something simple, but any help or advice is still greatly appreciated.

This is the home page - http://amberleyknights.110mb.com/home.html

The dropdown menu on 'information' is simply a div that I have a javascript function to change the visibility from "hidden" to "visible". This part works fine.

When I view this at home on my mac (firefox), it appears in the correct place, but at work on my XP machine (also firefox) then the menu items are all shifted slightly to the left making my dropdown menu appear out of place. I can modify the CSS to fix this on my PC, but then it's wrong on my mac.

My HTML

<div class="menu">
  <ul id="menu">
    <li onclick="location.href='home.html';">Home</li>
    <li onclick="location.href='about.html';">About Us</li>
    <li id="info" onmouseover="dropmenu()" onmouseout="hidemenu()">Information</li>
    <li onclick="location.href='sponsor.html';">Sponsors</li>
    <li onclick="location.href='support.html';">Support</li>
    <li onclick="location.href='contact.html';">Contact</li>
</ul>
 
      <div id="dropdown" onmouseover="dropmenu()" onmouseout="hidemenu()">
    <ul>
      <li onclick="location.href='tables.html';">League Table</li>
      <li onclick="location.href='results.html';">Results</li>
      <li onclick="location.href='fixtures.html';">Fixtures</li>
      <li onclick="location.href='stats.html';" id="bottom">Player Stats</li>
    </ul>
      </div>
</div>
 

My CSS

.menu
    {
    background-image:url('images/out.png');
    width:560px;
    height:20px;
    -moz-box-shadow: 0px -3px 12px #ffffff;
    -webkit-box-shadow: 0px -3px 12px #ffffff;
    box-shadow: 0px -3px 12px #ffffff;
    position:relative;
    top:-20px;
    }
 
#menu
    {
    padding:0px 0px 0px 26px;
 
    }
#menu ul
    {
    height:20px;
    }
 
#menu li
    {
    float:left;
    height:20px;
    display:inline;
    padding-left:12px;
    padding-right:12px;
    font-weight:bold;
    }
 
#dropdown
    {
    position:absolute;
    left:179px;
    top:20px;
    visibility:hidden;
    z-index:5;
    border-left:1px solid white;
    border-bottom:1px solid white;
    border-right:1px solid white;
    }
 
#dropdown ul
    {
    width:107px;
    margin:0;
    padding:0;
    }
 
#dropdown li
    {
    display:block;
    background-color:#A0A0A0;
    font-weight:bold;
    border-top:solid grey 1px;
    padding: 2px 0px 2px 0px;
    magin:0;
    opacity: 0.8;
    filter: alpha(opacity=80);
    }    
 

Obviously I'm missing an important statement in the CSS to position it correctly no matter what browser/OS it is viewed in.

Thanks for listening/reading,
Phil

[Dormilich]

check in firebug, whether both browsers use different default settings for the <div>, <ul> & <li> (HTML tab, calculated style/layout)

[Phil Gent]

Ok, I have solved my problem.
It was an issue with the text length differing causing the <li>s to be longer/shorter so I have given each a set width and now it should work accross the board.
Thanks Dormlich, I have downloaded firebug, looks quite a handy little program.