CSS: Code working in Mozilla/Opera but not in IE

[lleemon]

Previously posted about the reverse but took some advice and developed for the othertype of browsers. Now in IE my code doesn't look so hot.

I am trying to create a menu bar with a list dropdown. Not too sure where IE is reading this wrong.

Testing Page:
http://www.cyclonicvacuum.com/dhtml/sitemap.html

Main code

<ul id="nav">
  <li><a href="http://www.cyclonicvacuum.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('home','','../images/buttons/homeOver.gif',1)"><img src="../images/buttons/home.gif" name="home" width="35" height="20" border="0"></a></li>

  <li><a href="http://www.cyclonicvacuum.com/dysonstory.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('dysonStory','','../images/buttons/dysonstoryOver.gif',1)"><img src="../images/buttons/dysonstory.gif" name="dysonStory" width="38" height="20" border="0"></a> </li>
  <li class="rootcyclone"><a href="http://www.cyclonicvacuum.com/rootcyclone.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('rootcyclone','','../images/buttons/rootcycloneOver.gif',1)"><img src="../images/buttons/rootcyclone.gif" name="rootcyclone" width="86" height="20" border="0"></a></li>
  <li><a href="http://www.cyclonicvacuum.com/dysonvacuum.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('products','','../images/buttons/productsOver.gif',1)"><img src="../images/buttons/products1.gif" name="products" width="55" height="20" border="0"></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="ourcompany"><a href="http://www.cyclonicvacuum.com/company.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('company','','../images/buttons/ourcompanyOver.gif',1)"><img src="../images/buttons/ourcompany.gif" name="company" width="87" height="20" border="0"></a></li>
  <li><a href="http://www.cyclonicvacuum.com/contact.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('contact','','../images/buttons/contactOver.gif',1)"><img src="../images/buttons/contact.gif" name="contact" width="48" height="20" border="0"></a></li>
  <li class="policy"><a href="http://www.cyclonicvacuum.com/policy.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('policy','','../images/buttons/policyOver.gif',1)"><img src="../images/buttons/policy.gif" name="policy" width="39" height="20" border="0"></a></li>
  <li><a href="http://www.cyclonicvacuum.com/warranty.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('warranty','','../images/buttons/warrantyOver.gif',1)"><img src="../images/buttons/warranty.gif" name="warranty" width="58" height="20" border="0"></a></li>
</ul>

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: 4em; /* width needed or else Opera goes nuts */
	/* border-bottom: 1px solid #ccc; */
	display: block;
}

#nav li.rootcyclone { /* rootcyclone list item */
	float: left;
	width: 6em; /* 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.policy { /* outcompany list items */
	float: left; 
	width: 3em; /* 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;  put in li ul li instead */
	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;
}

#nav li ul li { /* solved the dropdown from piling up on each other.*/
	float: none;
	border-bottom: 1px solid #ccc;
	width: 18em;
}

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

Is it possible I get an error because I am using two .css files?
Thanks in advance for your help.

[NoteMe]

Fist of all you should have a doc type in the top of your (X)HTML file so the browser knows how it should read it. Then after that do a validiation of the (X)HTML file and CSS file here:

http://www.w3schools.com/site/site_validate.asp


then see if some of the problems is gone.



ØØ



[Edit] I realy like the design of your page. Realy nice.

[lleemon]

I added:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Translational//EN">
to the top of the page but made it look like crap.

How do you know when to use a certain one. I just want the simpliest one available? Any clue?

Thanks for your time.

[techgnome]

This bit bothers me: display: block; ......
Wondering if it should be inline instead of block....

Tg

[NoteMe]

This bit bothers me: display: block; ......
Wondering if it should be inline instead of block....

Tg

I have no idea (since I am no web programmer) what inline or block mean. But display:block is supposed to go in the CSS file (if that answered the Q)

[NoteMe]

I added:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Translational//EN">
to the top of the page but made it look like crap.

How do you know when to use a certain one. I just want the simpliest one available? Any clue?

Thanks for your time.

XHTML is the new one. On the link I gave you, you can read more about the diffrences. But it looks too me that this is the right Doc type for you language.

However, there is still about 20 odd errors in your HTML file that you should fix. You can see them if you use the validator for html.

Then we can start talking..

ØØ

[lleemon]

NoteMe,
I fixed all the errors but man, does the site look even worse. Why would a tool like Dreamweaver even allow you to add things like this if they violate html rules? Well, I have lots to learn with these new changes will have to figure ways out to get the page looking better.

Thanks to all that viewed and gave suggestions so far.

[techgnome]

I have no idea (since I am no web programmer) what inline or block mean. But display:block is supposed to go in the CSS file (if that answered the Q)

It has to do with how the list items are displayed.... there's normal, block and inline.
normal is like how we are used to seeing them:
* Item 1
* Item 2
* Item 3
etc...

Block allows you to break it up a bit, similar to the "bad" look at the site given.

Inline alows you to list them like this:
* Item 1 * Item 2 * Item 3 * Item 4....etc

Tg

[CornedBee]

Should be Transitional, not Translational