Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    CSS drop menu overflow

    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.

    Code:
    <!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>
    Code:
    @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 */

  • #2
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    Hi ToughNut,

    Can you just change your width in your css?

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

    .
    Last edited by Kevin_M_Schafer; 01-31-2012 at 08:46 PM. Reason: text clarity
    My keyboard is an IBM from 1993 and I like it that way. | Who is Dan Well? Everyone always says I know Dan Well.Building a web page is like building a birdhouse. Put it up there and watch 'em come. | Maintaining the aspect ratio of an image is more important than having a cold orange pop.

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    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?

    Code:
    <!DOCTYPE html>
    It's the new standard -- on the horizon. Then you'll be ready.



    --Kevin

    .
    My keyboard is an IBM from 1993 and I like it that way. | Who is Dan Well? Everyone always says I know Dan Well.Building a web page is like building a birdhouse. Put it up there and watch 'em come. | Maintaining the aspect ratio of an image is more important than having a cold orange pop.

  • Users who have thanked Kevin_M_Schafer for this post:

    ToughNut (02-01-2012)

  • #5
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    thanks for posting the screenshots Kevin. I'll consider the HTML5 doctype.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •