Tabbed Menu IE Problem

[stef686]

This one is bugging me a little bit. I've used the tabbed menu from DynamicDrive for the menu on a site I'm putting together. That bits all working fine but I've made a few alterations that aren't working in IE.

Well, it's not that its not working, just that I'm not quite getting the effect I'm after, so here's the link, code and info - if anyone has any ideas or suggestions please let me know!!

The current state of the template can be seen here:
http://216.70.108.61/

It is the menu portion in question really. The menu uses the following HTML:
<!-- Main Menu -->
<div id="main_menu">
<ul>
<li class="on"><a href="./" title="Home"><span>Home</span></a></li>
<li><a href="gallery/" title="Gallery"><span>Gallery</span></a></li>
<li><a href="articles/" title="Articles"><span>Articles</span></a></li>
<li><a href="blogs/" title="Blogs"><span>Blogs</span></a></li>
<li><a href="resources/" title="Resources"><span>Resources</span></a></li>
<li><a href="members/" title="Members"><span>Members</span></a></li>
<li><a href="forums/" title="Forums"><span>Forums</span></a></li>
</ul>
</div>
<!-- Main Menu -->

<div class="clear"></div>

<!-- Search Bar -->
<div id="search_bar">
<p id="search_bar_left">16th September 2006, 14:49pm</p>
<div id="search_bar_right">
<form action="" method="post">
<fieldset>
<legend>Search</legend>
<input type="hidden" name="search_submit" value="Submit" />
<input class="input" type="text" id="frm_search_keywords" name="frm_keywords" value="search..." />
<input type="image" name="frm_search" src="images/butt_search.gif" alt="Search" />
</fieldset>
</form>
<p><a href="advanced/">Advanced</a></p>
</div>
<div class="clear"></div>
</div>
<!-- Search Bar -->

And the CSS:
/* -------------------------------------------------------------
MAIN MENU
------------------------------------------------------------- */

#main_menu {
float: left;
width: 100%;
font-size: 1.1em;
line-height: normal;
}

/*IE fix*/
* html #main_menu {
margin-bottom: 1em;
}

#main_menu ul{
list-style: none;
margin: 0;
margin-left: 68px;
padding: 0;
}

#main_menu li{
display: inline;
margin: 0;
padding: 0;
}

#main_menu a {
float: left;
background: url(../images/menu_bg1.gif) no-repeat left top;
margin-right: 4px;
padding-left: 9px;
text-decoration: none;
}

#main_menu a span {
float: left;
display: block;
background: url(../images/menu_bg2.gif) no-repeat right top;
padding: 5px 19px 4px 10px;
color: #2D2D2D;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#main_menu a span {
float:none;
}
/* End IE5-Mac hack */

#main_menu a:hover span {
color: #1E517E;
}

#main_menu .on a {
background-position: 0 -180px;
}

#main_menu .on a span {
background-position: 100% -180px;
color: #FFF;
border-bottom: 2px solid #1E517E;
}

#main_menu a:hover {
background-position: 0 -360px;
}

#main_menu a:hover span {
background-position:100% -360px;
}

#main_menu .on a:hover {
background-position: 0 -180px;
}

#main_menu .on a:hover span {
background-position: 100% -180px;
color: #FFF;
border-bottom: 2px solid #1E517E;
}

/* -------------------------------------------------------------
SEARCH BAR
------------------------------------------------------------- */

#search_bar {
border-top: 1px solid #1E517E;
border-bottom: 1px solid #1E517E;
margin-top: -2px;
color: #FFF;
padding: 8px 8px 6px 8px;
background: #6D9EBB url(../images/search_bar_bg.gif) repeat-x;
}

#search_bar #search_bar_left {
float: left;
}

#search_bar #search_bar_right {
float: right;
}

#search_bar a {
color: #FFF;
}

Plus these styles for IE only in a separate CSS file:
/* -------------------------------------------------------------
MAIN MENU
------------------------------------------------------------- */

#main_menu .on a span {
z-index: 100;
}

/* -------------------------------------------------------------
SEARCH BAR
------------------------------------------------------------- */

#search_bar {
margin: -19px 4px 0 4px;
float: left;
z-index: 1;
padding: 8px 8px 0 8px;
}

The problem is with the "active" menu item. In Firefox you will see that the active tab blends straight into the bar underneath. In IE, the light blue line spans all the way accross. My best guess is that the menu is sitting behind the bar underneath - as you can see from the code this bar has a minus margin to move it up, which in firefox seems to place it behind the menu. The light blue line is currently part of a background image.

Now I'm not 100% that this is the best way to achieve what I'm after, if you know of another more efficient way please let me know - I'm only just starting this project (as you can see) and so I don't mind messing around with the code to get it right.

Thanks for reading (sorry for long post!)

[stef686]

No ideas? :(

[stef686]

Right, I just had a brain wave! Problem is I'm at work and can't do anything about it until I get home! argh!

Will post up what I try and whether I get it to work or not for reference

[stef686]

Brilliant I fixed it!

If anyone is interested, I made the double border that is at the top of the blue bar and background image that sits behind the menu at the bottom.

I feel so proud!