CSS: NS/Opera dropdown doesn't look the same as IE [RESOLVED]
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;
}
Re: CSS: NS/Opera dropdown doesn't look the same as IE
OK, let's see.
First and foremost, ALWAYS develop in Gecko-based browsers or Opera first. THEN set to working around IE's bugs. The other way round is almost always harder.
Here are the minor things:
1) Remove the "space" LIs. The point of CSS is that you don't require any markup that is concerned with presentation.
2) Remove the font tag from the last li.
3) It is not a particularly good idea to have a different class for each li. Better to use width, padding and margin on the general class smartly.
4) If you really want to use the different classes, at least remember that you don't need to repeat the display and float properties every time. They are inherited.
5) Add this rule:
#nav li ul li {
float: none;
}
It solves the particular problem you have.
I think that's it for now.
Re: CSS: NS/Opera dropdown doesn't look the same as IE
CornedBee,
Thanks! Your help seems to have done the trick. Thanks again.
