Internet Explorer problem - help needed with CSS.

[mdminternet]

Hi guys,

I've got a little bit of an internet explorer problem.

If you visit the website at http://www.removals-edinburgh.com you will see that I have customised a version of the menu which is available at http://www.impressivewebs.com/mega-menus-ajax-jquery/ to suit the style of the site.

The menu appears just fine in both Firefox and Chrome but it doesn't display correctly in Internet Explorer. For some reason it displays the top level links with what seems to be extra padding? as the links go along so you end up with a staircase sort of pattern, not to mention this is hidden from the visitor so they can't get to any of the top level links.

If you visit the site using both IE and Firefox you will see what I mean - I have spent all night playing around with the code (mainly the CSS) trying to get this to work but I just can't fix it.

Any suggestions?

Thanks for your time.

Here is my CSS code:

/*Navigation styles*/
ul { width: 886px; height: 30px; font-size: 0.9em; overflow: hidden; background: url(../images/layout/nav-bg.gif) repeat-x; border: solid 1px #cccccc; margin: 0 auto; display: block; list-style: none; padding: 0; }
ul li a { display: block; height: 30px; padding: 0 20px; float: left; line-height: 30px; text-decoration: none; }
ul li a:link { display: block; height: 30px; padding: 0 20px; float: left; line-height: 30px; text-decoration: none; }
ul li a:visited  { display: block; height: 30px; padding: 0 20px; float: left; line-height: 30px; text-decoration: none; }
ul li a:hover { color: ffffff; }
ul li a.active { background: #0054a6; color: #ffffff; }	
ul li a.active:link { background: #0054a6; color: #ffffff; }
ul li a.active:visited { background: #0054a6; color: #000000; }
ul li a span { color: #ffffff; font-size: 0.9em; _font-size: 10px; /* for IE6 */ }
ul li a.active span { color: #ffffff; font-size: 0.9em; _font-size: 10px; /* for IE6 */ }
.arrow { color: #ffffff; font-size: 1em; _font-size: 10px; /* for IE6 */ }
.menu { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; display: block; }
#dropdown { width: 886px; height: 199px; background-color: #5f9dd4; font-size: 0.9em; padding: 0px; margin: 0 auto; border: solid 1px #ccc; border-top: none; display: none; position: relative; overflow: hidden; }
#ajax { padding-top: 0px; padding-bottom: 0px; padding-right: 0px; padding-left: 0px; }
.loading { background: transparent url(../images/layout/loading.gif) no-repeat center center; }
.close { position: absolute; top: 0px; right: 0px; color: #0054a6; font-size: 0.6em;  }
#inajax-container { width: 886px; height: auto; min-height: 200px; border-spacing: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px; padding-left: 0px; margin-top: 0px; margin-bottom: 0px; margin-right: auto; margin-left: auto; text-align: left; }
#inajax-links { width: 380px; height: auto; min-height: 189px; border-spacing: 0px; padding-top: 10px; padding-bottom: 0px; padding-right: 0px; padding-left: 18px; margin-top: 0px; margin-bottom: 0px; margin-right: auto; margin-left: auto; text-align: left; float: left; }
#inajax-image-about { width: 488px; height: auto; min-height: 199px; background: transparent url(../images/layout/nav-bg-about.gif) no-repeat top right; border-spacing: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px; padding-left: 0px; margin-top: 0px; margin-bottom: 0px; margin-right: auto; margin-left: auto; text-align: right; float: right; }
#inajax-image-removals { width: 488px; height: auto; min-height: 199px; background: transparent url(../images/layout/nav-bg-removals.gif) no-repeat top right; border-spacing: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px; padding-left: 0px; margin-top: 0px; margin-bottom: 0px; margin-right: auto; margin-left: auto; text-align: right; float: right; }
#inajax-image-packing { width: 488px; height: auto; min-height: 199px; background: transparent url(../images/layout/nav-bg-packing.gif) no-repeat top right; border-spacing: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px; padding-left: 0px; margin-top: 0px; margin-bottom: 0px; margin-right: auto; margin-left: auto; text-align: right; float: right; }
#inajax-image-storage { width: 488px; height: auto; min-height: 199px; background: transparent url(../images/layout/nav-bg-storage.gif) no-repeat top right; border-spacing: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px; padding-left: 0px; margin-top: 0px; margin-bottom: 0px; margin-right: auto; margin-left: auto; text-align: right; float: right; }

And here is the HTML code:

<!--begin navigation section-->
<ul>
<li><a href="index.php" class="nav-bar">Home</a></li>
<li class="menu"><a href="about.php" class="nav-bar">About</a></li>
<li class="menu"><a href="removals.php" class="nav-bar">Removals</a></li>
<li class="menu"><a href="packing.php" class="nav-bar">Packing</a></li>
<li class="menu"><a href="storage.php" class="nav-bar">Storage</a></li>
</ul>
<div id="dropdown" class="loading"></div><!-- #dropdown -->
<!--end navigation section-->

[turt2live]

IE (Internet Explorer) commonly hates CSS attributes compared to other browsers.

It is VERY common for one browser to work, another to not, and then the third to just throw it all over the screen.

I don't quite know how to make it so it checks your browser.

The reasoning behind the weird browser support is that there is no real "standard". Google can call the border attribute something like "wall" while IE could call it border. Both are correct, and would end up in the same format, just make it difficult for developers to make a website. (No, Google doesn't actually use wall by the way, just came to mind when thinking of borders).

[floatingDivs]

This MAY or MAY NOT work, but have you considered using one of those standardized "reset" CSS stylesheets?

http://meyerweb.com/eric/tools/css/reset/

You'd simply place that CSS above everything else (thus it would get overriden by stylesheets underneath it when it needs to). What it does is get the browsers as close as possible to each other in terms of margin/padding/etc before you code CSS.

Basically, if that's too hard to understand (it is even for me!), read up on "reset CSS".