Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

IE6 and odd menu

Status
Not open for further replies.

maxelcat

Technical User
Oct 19, 2006
79
Dear All

Would value any pointers on this

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
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 -

Code:
/* 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
 
I got your <dt> to show up with a little IE6 bug workaround.

This is what I did:
Code:
<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:


[monkey][snake] <.
 
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
 
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>.

[monkey][snake] <.
 
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
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top