asked on

CSS firefox problem

I'm having a problem setting up the following menu:

http://www.etechrepair.co.uk/menu/tmp.html

Its the "Cash & carry" menu item and the rightmost menu item thats causing the problems.

I modified the menu so that the rightmost menu header "about us" didn't pop out underneath to the right and instead went left, but i'm having two problems now.

In IE7 everything looks fine (apart from the menu "about us" isn't level with the other menu items)

In firefox, I'm getting a very strange effect where the background isn't filled with colour (as can be seen) and bizarrely, it seems to be linked somehow to the "&" ampersand symbol because when I don't use it in the "Cash & Carry" menu header, the problem seems to go from that menu. I always use & but have tried both ways and it still comes up with the problem.

Any ideas on this one? It's very strange. No googling has helped so far.

Here's my XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/topmenu.css" rel="stylesheet" type="text/css" />
</head>

<body>

<ul id="menu">
<li><span class="title">EXPORT</span>

<dl>
      <dt><a href="#">EXPORT</a></dt>
      <span class="padright">
      <dd><a href="#" title="Chicken">CHICKEN</a></dd>
      <dd><a href="#" title="Turkey">TURKEY</a></dd>
      <dd><a href="#" title="Duck">DUCK</a></dd>
      <dd><a href="#" title="Hen">HEN</a></dd>
      <dd><a href="#" title="Other">OTHER</a></dd>
      </span>
</dl>

</li>
<li><span class="title">FOOD SERVICE</span>

<dl>
      <dt><a href="#">FOOD SERVICE</a></dt>
      <dd><a href="#" title="COOKED">COOKED</a></dd>
      <dd><a href="#" title="VALUE ADDED">VALUE ADDED</a></dd>
      <dd><a href="#" title="RAW">RAW</a></dd>
</dl>

</li>
<li><span class="title">MANUFACTURING</span>

<dl>
      <dt><a href="#">MANUFACTURING</a></dt>
      <dd><a href="#" title="COOKED">COOKED</a></dd>
      <dd><a href="#" title="VALUE ADDED">VALUE ADDED</a></dd>
      <dd><a href="#" title="RAW">RAW</a></dd>
</dl>

</li>
<li><span class="title">CASH & CARRY</span>

<dl>
      <dt><a href="#">CASH & CARRY</a></dt>
      <dd><a href="#" title="CHICKEN">CHICKEN</a></dd>
      <dd><a href="#" title="DUCK">DUCK</a></dd>
      <dd><a href="#" title="TURKEY">TURKEY</a></dd>
      <dd><a href="#" title="OTHER">OTHER</a></dd>
</dl>

</li>
<li><span class="title">WHOLESALE</span>

<dl>
      <dt><a href="#">WHOLESALE</a></dt>
      <dd><a href="#" title="CHICKEN">CHICKEN</a></dd>
      <dd><a href="#" title="DUCK">DUCK</a></dd>
      <dd><a href="#" title="TURKEY">TURKEY</a></dd>
      <dd><a href="#" title="OTHER">OTHER</a></dd>
</dl>

</li>
<li><span class="title">RETAIL</span>

<dl>
      <dt><a href="#">RETAIL</a></dt>
      <dd><a href="#" title="CHICKEN">CHICKEN</a></dd>
      <dd><a href="#" title="DUCK">DUCK</a></dd>
      <dd><a href="#" title="TURKEY">TURKEY</a></dd>
</dl>

</li>
<li><span class="title">ABOUT US</span>

<dl id="aboutus">
      <dt><a href="#">ABOUT US</a></dt>
      <dd><a href="#" title="HISTORY" class="floatleft">HISTORY</a></dd>
      <dd><a href="#" title="ABOUT US" class="floatleft">ABOUT US</a></dd>
      <dd><a href="#" title="TERMS & CONDITIONS" class="floatleft">TERMS & CONDITIONS</a></dd>
</dl>

</li>

</ul>

</body>
</html>

And here's the css:

#menu {
      list-style-type:none;
      font-size:9px;
      font-family:Arial, Helvetica, sans-serif;
      display: inline;
      padding:0;
      margin:0;
}

#menu li {
      display:block;
      float:left;
      position:relative;
      z-index:100;
      margin-right:1px;
}
#menu li span.title {
      display:block;
      z-index:100;
      font-size:1.1em;
      padding-top: 5px;
      padding-right: 6px;
      padding-bottom: 3px;
      padding-left: 6px;
      background-color: #275B26;
}

/*#menu li a, #menu li a:visited {
      display:block;
      padding:0;
}
*/
#menu dl {
      position:absolute;
      top:0;
      left: 0;
      margin: 0;
      padding: 0;
}

#menu dl#aboutus {
      position:absolute;
      top:20px;
      left:-91px;
      margin: 0;
      padding: 0;
}

dl#aboutus dt a{
      position:absolute;
      left:92px;
      top:-20px;

}

#menu dt {
      margin:0;
      font-size: 1.1em;
      float:left;
      background-color: #275B26;
      font-weight:bold;
}

#menu dd {
      display:none;
      background: transparent;
      clear:left;
      margin:0;
      color: #275B26;
      font-size: 1em;
      text-align:left;
}

#menu dt a, #menu dt a:visited {
      display:block;
      color:#FFFFFF;
      text-decoration:none;
      padding-top: 5px;
      padding-right: 6px;
      padding-bottom: 3px;
      padding-left: 6px;
}

#menu dd a, #menu dd a:visited {
      background:#275B26;
      color:#FFFFFF;
      text-decoration:none;
      display:block;
      padding-top: 5px;
      padding-bottom: 3px;
      padding-left: 6px;
      font-weight: bold;
      padding-right: 30px;

}

#menu li a:hover {
      border:0;
}

#menu li:hover dd, #menu li a:hover dd {
      display:block;
      font-size:12px;
}
#menu li:hover dl, #menu li a:hover dl {
      border-bottom-width: 9px;
      border-bottom-style: solid;
      border-bottom-color: #EBBC92;
}
#menu li:hover dt a, #menu li a:hover dt a, #menu dd a:hover {
      color: #FFEBCC;

}

#aboutus dd a, #aboutus dd a:visited{
      display: block;
      text-align:right;
      padding-right:10px;
      padding-left: 20px;

}

DeeEmm

It's the width of the third item in the drop down for the 'about us' menu - it's forcing the other items to the left.

Try changing the background colour from transparent to a solid colour

change

#menu dd {
display:none;
background: transparent;

to

#menu dd {
display:none;
background-color: #275B26;

DeeEmm

Sorry my bad - you need to add the background colour to the following style element

#menu dl#aboutus {
position:absolute;
top:20px;
left:-91px;
margin: 0;
padding: 0;
}

so it becomes

#menu dl#aboutus {
position:absolute;
top:20px;
left:-91px;
margin: 0;
padding: 0;
background-color: #275B26;
}

Please disregard my earlier post ;)

alsheron

ASKER

Thanks for the replies DeeEmm, but it doesn't solve the problem.

I thought your first post was closer to a solution because I think something might be going wrong with the widths of one or more of the elements. Your second post did make the background of the "about us" menu green but it didn't apply to "cash & carry" or make the text for "about us" right align as is specified in the css.

Still scratching my head with this one...

DeeEmm

Sorry I didn't read the question properly - I missed the part about the cash and carry menu - probably mostly as it displays OK on my version of FF.

I will have another look later when I get home.

DM

ASKER CERTIFIED SOLUTION

DeeEmm

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial