Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

CSS firefox problem

Posted on 2007-10-08
5
Medium Priority
?
375 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;

}
0
Comment
Question by:alsheron
  • 4
5 Comments
 
LVL 4

Expert Comment

by:DeeEmm
ID: 20033482
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;
0
 
LVL 4

Expert Comment

by:DeeEmm
ID: 20033564
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 ;)
0
 

Author Comment

by:alsheron
ID: 20034002
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...
0
 
LVL 4

Expert Comment

by:DeeEmm
ID: 20046227
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
0
 
LVL 4

Accepted Solution

by:
DeeEmm earned 2000 total points
ID: 20046678
To get the background of all the menus to be green simply add the background-color to the #menu dl element instead of the #menu dl#aboutus element.

To right align the text in all browsers replace the text-align:right property in the #aboutus dd a, #aboutus dd a:visited  attribute  with float:right

The only other thing that I can see is that the bottom coloured border of the cash & carry drop down is slightly smaller than the rest of the menu.

I generally make all menu items a fixed width - it might be worth doing this as I think it will solve your problems.

DM
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses

581 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question