CSS: NS/Opera dropdown doesn't look the same as IE [RESOLVED]

**lleemon** · Jan 20th, 2005, 03:07 PM

I am struggling with CSS and finally got things to a point where they look kind of clean in IE but when I view in Netscape and Opera browsers my dropdown menu is very distorted. Anyone have any ideas on what might be causing this issue?

HTML Code:

<html>

<head>
<title>Dyson sample DHTML</title>
<script language="JavaScript" src="../js_functions.js"></script>
<script type="text/javascript" src="drop_down3.js"></script>
<style type="text/css">
@import "style3.css";
</style>
</head>

<body>
<ul id="nav">
  <li class="space"></li>
  <li><a href="http://www.cyclonicvacuum.com" class="titles">home</a> </li>

  <li><a href="/dysonstory.html" class="titles">dyson</a> </li>
  <li class="rootcyclone"><a href="/rootcyclone.html" class="titles">rootcyclone</a></li>
  <li><a href="/dysonvacuum.html" class="titles">products</a> 
    <ul>
      <li><a href="/dc07-all-floors.html">Dyson DC07 All Floors</a></li>
      <li><a href="/dc07-all-floors-refurbished.html">Dyson DC07 - Factory Reconditioned</a></li>
      <li><a href="/dc07-low-reach.html">Dyson DC07 Low Reach</a></li>
      <li><a href="/dc07-low-reach-refurbished.html">Dyson DC07 Low Reach - Factory 
        Reconditioned</a></li>
      <li><a href="/dc07-full-kit.html">Dyson DC07 Full Kit</a></li>
      <li><a href="/dc07-animal.html">Dyson DC07 Animal</a></li>
      <li><a href="/dc07-animal-refurbished.html">Dyson DC07 Animal - Factory 
        Reconditioned</a></li>
      <li><a href="/dc07-full-gear.html">Dyson DC07 Full Gear</a></li>
      <li><a href="/dc11-all-floors.html">Dyson DC11 All Floors</a></li>
      <li><a href="/dc11-full-gear.html">Dyson DC11 Full Gear</a></li>
      <li><a href="/dc14-low-reach.html">Dyson DC14 Low Reach</a></li>
      <li><a href="/dc14-animal.html">Dyson DC14 Animal</a></li>
      <li><a href="/dc14-full-gear.html">Dyson DC14 Full Gear</a></li>
    </ul>
  </li>
  <li class="space"></li>
  <li class="ourcompany"><a href="/company.html" class="title_oc">our company</a></li>
  <li class="space"></li>
  <li><a href="/contact.html" class="titles">contact</a></li>
  <li class="space"></li>
  <li><a href="/policy.html" class="titles">policy</a></li>
  <li class="space"></li>
  <li><a href="/warranty.html" class="titles">warranty</a></li>
  <li class="space"></li>
  <li class="ourcompany"><font size="2" face="Arial, Helvetica, sans-serif">800-279-5120</font></li>
</ul>

</body>

</html>

Code:

a:link { text-decoration:none}
a:visited { text-decoration:none}

body {
	font-family: arial, helvetica, serif;
}

#nav, #nav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
	background: #fff; /* IE6 Bug */
}

#nav a {
	display: block; /* The element will be displayed as a a block-level element */
	width: 26em; /* makes the text bigger in submenu*/
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #999999;
	text-indent: 5px;
}

#nav a.titles {
	display: block;
	width: 1em;
}

#nav a.title_oc {
	display: block;
	width: 8em;
}

#nav li { /* all list items */
	float: left;
	width: 3em; /* width needed or else Opera goes nuts */
	/* border-bottom: 1px solid #ccc; */
	display: block;
}

#nav li.space { /* space list items */
	float: left;
	width: .90em; /* width needed or else Opera goes nuts */
	display: block;
}

#nav li.home { /* home list item */
	float: left;
	width: 2.1em; /* width needed or else Opera goes nuts */
	display: block;
}

#nav li.dyson { /* dyson list item */
	float: left;
	width: 2.28em; /* width needed or else Opera goes nuts */
	display: block;
}

#nav li.rootcyclone { /* rootcyclone list item */
	float: left;
	width: 5em; /* width needed or else Opera goes nuts */
	display: block;
}

#nav li.ourcompany { /* outcompany list items */
	float: left; 
	width: 6em; /* width needed or else Opera goes nuts */
	display: block;
}

#nav li ul { /* second-level lists - aka drop down list */
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff; /* IE6 Bug */
	border: 1px solid #ccc;
	/* border-bottom: 0; */
	border-bottom: 1px solid #ccc;
	position: absolute;
	width: 18em; /* makes the box bigger but not the actual text */
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	line-height: 18px;
}

ul li a:hover { color: #E2144A; } /* Hover Styles - top menu only */
li ul a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles - drop down list */

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}

#content {
	clear: left;
	color: #ccc;
}

Thread: CSS: NS/Opera dropdown doesn't look the same as IE [RESOLVED]

Thread Tools

Display

Threaded View

CSS: NS/Opera dropdown doesn't look the same as IE [RESOLVED]

Posting Permissions