...

View Full Version : CSS drop menu overflow



ToughNut
01-31-2012, 04:52 PM
Hello! When viewed in the latest versions of IE and Firefox, my CSS drop down menu (from a generator) is wider than necessary. The "grey bar" goes much farther than the text of the last main menu item. In Chrome, the menu looks normal.

See HTML and CSS below. Thank you very much for any help you can provide.



<!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 name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<title>Company</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!-- Keep the http-equiv meta tag for IE8 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" /><!-- Style Sheets go here -->

<style type="text/css">
/*<![CDATA[*/
img.noborder {border-style: none}
/*]]>*/
</style>
<link href="menu1.css" rel="stylesheet" type="text/css" />
</head>

<body>

<table width="100%" border="0" align="center" cellpadding="0">
<tr>

<td width="300"><a href="index.html"><img src="logo.jpg" alt="logo" width="283" height="71" align="right" class="noborder" /></a></td>

<td width="50"></td>

<td width="650">
<!-- BEGIN PULL DOWN MENU -->
<div class="mainmenu">
<ul>
<li class="li_hc"><a href="clients.html">Our<br />
Clients</a>
<ul class="ul_ch">
<li class="li_nc"><a href="client1.html">Client #1</a></li>
<li class="li_nc"><a href="client2.html">Client #2</a></li>
<li class="li_nc"><a href="client3.html">Client #3</a></li>
</ul>
</li>
<li class="li_hc"><a href="services.html">Our<br />
Services</a>
<ul class="ul_ch">
<li class="li_nc"><a href="service1.html">Service #1</a></li>
<li class="li_nc"><a href="service2.html">Service #2</a></li>
<li class="li_nc"><a href="service3.html">Service #3</a></li>
</ul>
</li>
<li class="li_hc"><a href="benefits.html">Benefits<br />
to You</a></li>
<li class="li_hc"><a href="contact.html">Contact<br />
Us</a></li>
<li class="li_hc"><a href="social.html">Social<br />
Media</a></li>
<li class="li_hc_selected"><a href="aboutus.html">About<br />
Us</a>
<ul class="ul_ch">
<li class="li_nc"><a href="team.html">The Team</a></li>
</ul>
</li>
<li class="li_hc"><a href="index.html">Home<br />
Page</a></li>
</ul>
</div>
<!-- END PULL DOWN MENU -->
</td>

</tr>
</table>

</body>
</html>





@charset "utf-8";
/* CSS Document */


body {
background-color: #ffffff;

/* for pull-down menu to work in IE6*/
behavior:url('csshover2.htc');

}

/* pull-down mainmenu css */
.mainmenu{
float: left;
width: 10px;
padding: 0;
}
.mainmenu ul {
float: left;
width: 625px;
list-style: none;
line-height: 1;
color:#000000;
background: #CCCCCC;
padding: 0;
border: solid #FFFBF0;
border-width: 1px 0;
margin: 0 0 1em 0;
}

.mainmenu a, .mainmenu a:visited {
display: block;
font-size: small;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-weight:normal;
font-style:normal;
text-decoration:none;
color: #000000;
text-decoration: none;
padding: 1em 1em;
line-height: normal;
}
.mainmenu ul ul a{
width:100%;
height:100%;
}
.mainmenu ul a{
width:1%;
}


.mainmenu li {
float: left;
margin:0;
padding:0;
}

.mainmenu ul li {float:left; position:relative; }
.mainmenu ul li a {white-space:nowrap;}

.mainmenu li ul {
position: absolute;
left: -999em;
height: auto;
width:15em;

background: #CCCCCC;
font-weight: normal;
border-width: 1px;
margin: 0;
}

.mainmenu li li {
width:15em ;
}

.mainmenu li li a{
width:13em ;
}

.mainmenu li ul {
margin: 0;
}
.mainmenu li ul ul {
margin: -2.8em 0 0 13.5em;
}
.ul_ch,
.mainmenu li:hover ul ul,
.mainmenu li li:hover ul ul,
.mainmenu li li li:hover ul ul,
.mainmenu li li li li:hover ul ul,
.mainmenu li li li li li:hover ul ul
{
left: -999em;
}
.mainmenu li:hover ul,
.mainmenu li li:hover ul,
.mainmenu li li li:hover ul,
.mainmenu li li li li:hover ul,
.mainmenu li li li li li:hover ul
{
left: auto;
}
.mainmenu li:hover>ul.ul_ch
{
left: auto;
}

.mainmenu li:hover{
background-color: #EC1D25;
}

.mainmenu li:hover a,.mainmenu li:hover a:visited,.mainmenu li:hover a:hover,.mainmenu li a:hover{
color:#000000;
}
.mainmenu li:hover li a, .mainmenu li li:hover li a,
.mainmenu li li li:hover li a, .mainmenu li li li li:hover li a,
.mainmenu li:hover li a:visited, .mainmenu li li:hover li a:visited,
.mainmenu li li li:hover li a:visited, .mainmenu li li li li:hover li a:visited
{
color:#000000;
}
.mainmenu li li:hover, .mainmenu li li li:hover,
.mainmenu li li li li:hover , .mainmenu li li li li li:hover , .mainmenu li li li li li li:hover
{
background: #EC1D25;
z-index:9999;
}
.mainmenu li li:hover a,.mainmenu li li li:hover a,
.mainmenu li li li li:hover a, .mainmenu li li li li li:hover a
{
color: #000000;
}

.mainmenu ul ul a, .mainmenu ul ul a:visited,
.mainmenu li li a, .mainmenu li li a:visited
{
color: #000000;
}
.mainmenu ul ul a:hover,
.mainmenu li:hover li:hover a,.mainmenu li:hover li:hover a:visited ,
.mainmenu li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover a:visited,
.mainmenu li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover a:visited ,
.mainmenu li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover a:visited,
.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a:visited{
color: #000000;
}
.mainmenu li:hover li:hover li a,.mainmenu li:hover li:hover li a:visited ,
.mainmenu li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li a:visited,
.mainmenu li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li a:visited,
.mainmenu li:hover li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li:hover li a:visited{
color: #000000;
}
.li_hc_selected{
background-color: #EC1D25;
}
/* end of mainmenu css */

Kevin_M_Schafer
01-31-2012, 07:45 PM
Hi ToughNut,

Can you just change your width in your css?


.mainmenu ul {
float: left;
width:493px;
list-style: none;
line-height: 1;
color:#000000;
background: #CCCCCC;
padding: 0;
border: solid #FFFBF0;
border-width: 1px 0;
margin: 0 0 1em 0;
}




--Kevin

.

ToughNut
01-31-2012, 08:57 PM
Hi Kevin,

Thanks for your reply. Yes, I've tried manipulating that part and have discovered that 630px is the minimum width.

Anything less, and then Chrome puts the Home button on to a 2nd line. At 630px, the menu looks the same in IE and Firefox.

Thanks.

Kevin_M_Schafer
01-31-2012, 09:13 PM
Well, I tried it here and it works for me. Here's a screen shot of a few open browsers.

If this is in development, why don't you use an HTML 5 doctype?


<!DOCTYPE html>

It's the new standard -- on the horizon. Then you'll be ready.

http://www.theeagleextra.com/testfiles/helpimages/menutest.png

--Kevin

.

ToughNut
02-01-2012, 12:06 PM
thanks for posting the screenshots Kevin. I'll consider the HTML5 doctype.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum