Cross Browser/Platform Issues with drop downs

Maverick25r · October 3rd, 2006, 03:34 PM

Let my start out by saying that I hate how every browser has to be effin different, even on different platforms. My dropdowns are just fine and dandy on OSX with safari and firefox. But when I look at them on IE the drop downs are shifted way too far to the right. Firefox for windows has the drop downs about a pixel too low. What a headache.

Here is my html

Code:

<div id="nav2">
<ul id="nav">
  <li><a href="aboutus.html">ABOUT US</a>
	<div id="navmargin">
	<ul>
	  <li><a href="">Our History</a></li>
      <li><a href="">Leadership</a></li>
      <li><a href="">Contact Us</a></li>
		</ul>
		</div>
	</li>

  <li><a href="ourapproach.html">OUR APPROACH</a>
	<div id="navmargin">
	<ul>
      <li><a href="">Safety
        </a></li>
      <li><a href="">Project Controls</a></li>
      <li><a href="">Industry Affilations</a></li>
    </ul>
	</div>
  </li>

  <li><a href="services.html">SERVICES</a>
    <div id="navmargin">
	<ul>
      <li><a href="">Fabrication - High Purity/Plastics</a></li>
      <li><a href="">Fabrication - High Purity/Micro Welding</a></li>
      <li><a href="">Fabrication - Industrial <br />Pipe</a></li>
      <li><a href="">Fabrication - Skid and Modular</a></li>
      <li><a href="">Field Install - <br />Process Piping</a></li>
	  <li><a href="">CAD</a></li>
    </ul>
	</div>
  </li>
  
        <li><a href="projects.html">FACILITIES</a>
   <div id="navmargin">
    <ul>
      <li><a href="">Clean Room</a></li>
      <li><a href="">Traditional Fabrication Area</a></li>
    </ul>
	</div>
  </li>
   
   <li><a href="industriesserved.html">INDUSTRIES</a>
    <div id="navmargin">
	<ul>
      <li><a href="">Food and Beverage</a></li>
      <li><a href="">Semiconductor</a></li>
      <li><a href="">Water and Waste Water</a></li>
      <li><a href="">Biotech and <br />Pharmeceutical</a></li>
      <li><a href="">Chemical</a></li>
	  <li><a href="">Ethanol</a></li>
	  <li><a href="">Power</a></li>
	  <li><a href="">Pulp and Paper</a></li>
	  <li><a href="">Nuclear</a></li>
    </ul>
	</div>
  </li>
  
   <li><a href="projects.html">PROJECTS</a>
   <div id="navmargin">
    <ul>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>
	</div>
  </li>
  
</ul>

</div>

Here is my CSS

Code:

#nav2 {
	min-height:23px;
	height:23px;
	width:652px;
	float:left;
	background-image:url(images/navbg.jpg);
	background-repeat:repeat-x;
	text-align:center;
	font-family:arial;
	font-size:10px;
	color:#FFFFFF;
	border-bottom:solid;
	border-bottom-color:#FFFFFF;
	border-bottom-width:1px;
	}
	

	
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}

#nav li li a {
font-family:arial;
font-size:10px;
color:#FFFFFF;
text-decoration:none;
padding: 0;
margin: 0;

}


#nav li li a:hover {
font-family:arial;
font-size:10px;
color:#7AFD60;
text-decoration:none;
padding: 0;
margin: 0;
}

#nav a {
display: block;
width: 10.84em;
padding: 0;
margin: 0;
}

#nav li {float: left;width: 10.84em;
padding:6px 0px 0px 0px;
margin: 0px;
}

#nav li a {
font-family:arial;
font-size:10px;
color:#FFFFFF;
text-decoration:none;
padding: 0;
margin: 0;
}

#nav li ul {
	position: absolute;
	width: 10.84em;
	left: -999em;
	background-color:#999999;
	padding: 0px 0px 5px 0px;
	margin: 0px;
	border-bottom-color:#FFFFFF;
	border-bottom-width:1px;
	border-left-color:#FFFFFF;
	border-left-width:1px;
	border-right-color:#FFFFFF;
	border-right-width:1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
}

#nav li:hover ul {
left: auto;
}

#nav li:hover ul, #nav li.sfhover ul {left: auto;}

#navmargin {
	margin-top:6px;
}

Sorry if I am getting annoying on this forum.

ukgeoff · October 3rd, 2006, 05:24 PM

We are here to help you learn.

I'm getting so I can type this in my sleep - go to the sticky at the top of the css forum, download and work through the tutorial on creating css driven menus.

All will be come clear, I promise. And if things are still a bit grey, you can always come back and ask.

Maverick25r · October 4th, 2006, 09:27 AM

I've tried that tutorial and it only makes me more confused. I even found stuff wrong with it. It says to put the text decoration for the links under div#naviation li a but it only works if you put the text decoration under div#navigation ul a. I am so sick of these stupid menus. All I need to know is why my submenus are 1 pixel lower on FF on windows than FF on OSX.