IE6 and odd menu

[maxelcat]

Dear All

Would value any pointers on this

http://www.maxelcat.co.uk/ipc/index.html

The left hand menu has a few links with white writing on a dark blue background. I want this only for the top home.

Here's the code

<div id="menu_block">
<!-- InstanceBeginEditable name="menus" -->
<dl id="menu">
 <dt><a href="index.html" class="home">Home</a></dt>
 <dt><a href="index.html" class="home">Home</a></dt>
  <dt onmouseover="montre('smenu1');" onmouseout="javascript:montre();"><a href="#">Facilities</a></dt>
  <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
    <ul>
      <li><a href="about.html">About us</a></li
		><li><a href="team.html">Meet the Team</a></li
		><li><a href="contractors.html">Contractors</a></li
		></ul>
  </dd>
  <dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();"><a href="#">Cars &amp; Transportation</a></dt>
  <dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
    <ul>
      <li><a href="onsite_park.html">Parking</a></li
		><li><a href="pool_cars.html">Pool cars</a></li
		><li><a href="congestion.html">Congestion Charge</a></li
		><li><a href="bicycles.html">Bicycles</a></li
		><li><a href="passenger_cars.html">Passenger Cars</a></li
		><li><a href="courtesy_buses.html">Courtesy Buses</a></li
		></ul>
  </dd>
  

etc

etc
</dl>
<!-- InstanceEndEditable -->
<!--end menu block-->

YOu will notice that I have an identical top line with the home link twice. Obviously I only want one.

In IE6 the first home link wont dislay the background colour. An identical line of code below it gives me the background colour.

This strikes me as weird. It works fine in firefox, IE7, Opera, NS so I suspect something weird in IE6 but my experimenting has yielded nothing to get me round this.

If anybody has any ideas I would be really grateful!

thanks in advance

Edward

Here's the css -

/* CSS Document */


dl, dt, dd, ul, li	{
	margin: 0px;
	padding: 0px;
	list-style-type:none;
}

#menu	{
	position: relative;
	top: 0em;
	left: 0em;
	width: 15em;
}


#menu dt	{
	cursor: pointer;
	background: #ffffff;
	line-height: 1.75em;
	margin: 0px;
	border-bottom: 1px solid #6aade4;
}





/*position of submenus*/
#menu dd	{
	position:absolute;
	z-index: 100;
	left:15em;
	line-height:1.5em;
	margin-top: -1.9em; /*carefully line up to top of main menus*/
	width: 12em;
	background: #c9ddf9;
	color: #ffffff;
}

#menu dt a	{
	color:#000000;
	text-decoration: none;
	display:block;
	background-color:#ffffff;
	padding-left:2em;
}


/*formatting for submenus*/
#menu li a	{
	color:#000000;
	text-decoration: none;
	display:block;
	background-color:#ffffff;
	padding-left:1em;
	border-top: 1px solid #c2c2c1;
}

#menu li a:hover, #menu dt a:hover	{
	color:#0039a6;
	background-color:#f2f7fc;
}


/*formatiing for the menu that is currently selected*/
#menu a.current, #menu a.current:hover{
color:#0039a6; 
background-color:#f2f7fc;
}

/*formatting for the home menu*/
#menu a.home:link {
background-color:#0039a6;
color:#ffffff;

}

#menu a.home:visited {
background-color:#0039a6;
color:#ffffff;
}

#menu a.home:hover {
background-color:#0039a6;
color:#FFffff;
}


#menu a.home:active {
background-color:#0039a6;
color:#ffffff;
}

"I love deadlines - I love the noise they make as they go wishing past" (not mine of course, but very ture...0

 

[monksnake]

I got your <dt> to show up with a little IE6 bug workaround.

This is what I did:

<div id="menu_block">
<!-- InstanceBeginEditable name="menus" -->
<dl id="menu">
 <dt [!]style="position:relative"[/!]><a href="index.html" class="home">Home</a></dt>
 <dt onmouseover="montre('smenu1');" onmouseout="javascript:montre();"><a href="#">Facilities</a></dt>
  <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
    <ul>
      <li><a href="about.html">About us</a></li
        ><li><a href="team.html">Meet the Team</a></li
        ><li><a href="contractors.html">Contractors</a></li
        ></ul>
  </dd>
  <dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();"><a href="#">Cars &amp; Transportation</a></dt>
  <dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
    <ul>
      <li><a href="onsite_park.html">Parking</a></li
        ><li><a href="pool_cars.html">Pool cars</a></li
        ><li><a href="congestion.html">Congestion Charge</a></li
        ><li><a href="bicycles.html">Bicycles</a></li
        ><li><a href="passenger_cars.html">Passenger Cars</a></li
        ><li><a href="courtesy_buses.html">Courtesy Buses</a></li
        ></ul>
  </dd>

Don't ask me why it works, it's IE.
Here is the site I got this info from:

http://www.positioniseverything.net/explorer/ie-listbug.html

<.

 

[maxelcat]

thanks for that - at least I nkow its not me

I tried the suggestion, and it worked - but it gave me a little white border along the top of the link.

HOw owuld I get rid of that? (tried playing with margins, padding and so on..._

thanks again

"I love deadlines - I love the noise they make as they go wishing past" (not mine of course, but very ture...0

 

[monksnake]

About the white border, I'm not 100% sure. I'm pretty sure that doesn't have to do with the <dl> though. I took the snippet of code you posted and used only that.

I made the background-color of the body black, and I saw no white line. That tells me that the white line is not created by the <dl>, rather items around the <dl>.

<.

 

[maxelcat]

I went to thte web page that you suggested - it said putting in a comment just before the problem would sometimes solve it - and do you know it did!

Weird - but thanks for the pointer

Edward

"I love deadlines - I love the noise they make as they go wishing past" (not mine of course, but very ture...0