We help IT Professionals succeed at work.

CSS firefox problem

387 Views
Last Modified: 2013-11-19
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>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<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>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><span class="title">FOOD&nbsp;SERVICE</span>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
      <dt><a href="#">FOOD&nbsp;SERVICE</a></dt>
      <dd><a href="#" title="COOKED">COOKED</a></dd>
      <dd><a href="#" title="VALUE&nbsp;ADDED">VALUE&nbsp;ADDED</a></dd>
      <dd><a href="#" title="RAW">RAW</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><span class="title">MANUFACTURING</span>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
      <dt><a href="#">MANUFACTURING</a></dt>
      <dd><a href="#" title="COOKED">COOKED</a></dd>
      <dd><a href="#" title="VALUE&nbsp;ADDED">VALUE&nbsp;ADDED</a></dd>
      <dd><a href="#" title="RAW">RAW</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><span class="title">CASH&nbsp;&amp;&nbsp;CARRY</span>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
      <dt><a href="#">CASH&nbsp;&amp;&nbsp;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>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><span class="title">WHOLESALE</span>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<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>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><span class="title">RETAIL</span>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<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>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><span class="title">ABOUT&nbsp;US</span>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl id="aboutus">
      <dt><a href="#">ABOUT&nbsp;US</a></dt>
      <dd><a href="#" title="HISTORY" class="floatleft">HISTORY</a></dd>
      <dd><a href="#" title="ABOUT&nbsp;US" class="floatleft">ABOUT&nbsp;US</a></dd>
      <dd><a href="#" title="TERMS&nbsp;&amp;&nbsp;CONDITIONS" class="floatleft">TERMS&nbsp;&amp;&nbsp;CONDITIONS</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</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;

}
Comment
Watch Question

Commented:
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;

Commented:
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 ;)

Author

Commented:
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...

Commented:
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
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.