Chrome Menu Drop Down Alignment Off

**fujofly** · 08-13-2007, 08:44 PM

I'm working on a site with the Chrome menu and I can't seem to get the drop down from the Chrome menu to line up with the top level of the links.

If you have the browser window shrunk down so it hugs the page then the links show up under the top level correctly. When you expand the window and the page centers the drop downs don't follow proportionately.

The link below is the page, I've also included the CSS and the HTML below that. Any suggestions would be helpful. Thanks!

http://www.sycoleman.com/V3/sycheader

CSS
/* CSS Document */

body {
margin-top: 0px;
background: #999999;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#container {
width: 800px;
padding: 0 0 0 0;
margin: 0 0 0 0;
height: auto;
position: relative;
text-align: left;
background: url(../images/site_images/container_shadow_bg.gif) repeat-y;
}

#header {
width: 800px;
height: 131px;
margin: 0 0 0 0;
padding: 0 0 0 0;
background: #FFFFFF;
}

#header img {
padding: 0 0 0 0;
margin: 0 0 0 0;
}

#header ul {
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 550px;
position: absolute;
left: 12px;
top: 78px;
}

#header li {
display: inherit;
font-size: 12px;
font-weight: bold;
margin: 0 0 0 0;
padding: 0 0 0 0;
list-style: none;
float: left;
}

#header li a {
color: #000000;
text-decoration: none;
}

#header li a:hover {
color: #0066FF;
text-decoration: none;
}

#header label {
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 250px;
position: absolute;
top: 74px !important; top: 71px;
right: -24px !important; right: -26px;
float: right;
}

input {
border: 3px double #CCCCCC;
border-top-color: #999999;
border-left-color: #999999;
font-size: 10px;
font-weight: bold;
}

#header p {
margin: 0 0 0 0;
padding: 0 0 0 0;
position: absolute;
top: 106px;
right: 12px;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}

#header p a {
color: #FFFFFF;
text-decoration: none;
}

#header p a:hover {
color: #999999;
text-decoration: none;
}

/*Drop Down for one online*/
.chromestyle{
width: 50%;
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
font-weight: bold;
}

.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.chromestyle ul{
border: 0px solid #BBB;
width: 100%;
background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: left; /*set value to "left", "center", or "right"*/
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #494949;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #DADADA;
}

.chromestyle ul li a:hover{
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}

/*.chromestyle ul li a[rel]:after{ /*HTML to indicate drop down link*/
/*content: " v";
/*content: " " url(downimage.gif); /*uncomment this line to use an image instead*/

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
filter: progid

XImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
}

.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}

* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #F0F0F0;
}

HTML
<!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=ISO-8859-1" />
<title>SYColeman | Everyday Excellence - People, Products, Services | Strategic Communication, Public Outreach, Strategic Planning</title>



<link rel="stylesheet" type="text/css" title="mike" href="mikestyle.css"/>


<script type="text/javascript" src="../chrome/chromejs/chrome.js"></script>

</head>

<body>
<center>
<div id="container">
<div id="header"><img src="img/title.jpg" />
<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://www.sycoleman.com/V3">HOME</a></li>
<li><a href="#" rel="dropmenu1">ABOUT US</a></li>
<li><a href="#" rel="dropmenu2">NEWS</a></li>
<li><a href="#" rel="dropmenu3">SERVICES</a></li>
<li><a href="#" rel="dropmenu4">PRODUCTS</a></li>
<li><a href="#" rel="dropmenu5">CLIENTS</a></li>
</ul>
</div>


<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.sycoleman.com/V3/about_us/mission_and_values.php">Mission & Values</a>
<a href="http://www.sycoleman.com/V3/about_us/leadership.php">Leadership</a>
<a href="http://www.sycoleman.com/V3/about_us/corporate_structure.php">Structure</a>
<a href="http://www.sycoleman.com/V3/about_us/sycoleman_international_locations.php">Locations</a>
<a href="http://www.sycoleman.com/V3/about_us/sycoleman_history.php">History</a></div>


<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="http://www.cnn.com/">Current News</a>
<a href="http://www.msnbc.com">L-3 News</a>
<a href="http://news.bbc.co.uk">Employee Spotlight</a></div>


<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
<a href="http://www.google.com/">Google</a>
<a href="http://www.yahoo.com">Yahoo</a>
<a href="http://www.msn.com">MSN</a></div>


<div id="dropmenu4" class="dropmenudiv" style="width: 150px;">
<a href="http://www.google.com/">Google</a>
<a href="http://www.yahoo.com">Yahoo</a>
<a href="http://www.msn.com">MSN</a></div>


<div id="dropmenu5" class="dropmenudiv" style="width: 150px;">
<a href="http://www.google.com/">Google</a>
<a href="http://www.yahoo.com">Yahoo</a>
<a href="http://www.msn.com">MSN</a></div>

<script type="text/javascript">

cssdropdown.startchrome("chromemenu")

</script></ul>


<label>
<input name="textfield" type="text" size="20" />
<input name="search" type="submit" id="search" value="search" />
</label>

<p><a href="#">CAREERS</a>  <a href="#">EMPLOYEES</a>  <a href="#">CONTACT US</a></p>
</div>
</div>
</center>
</body>

</html>

**Sliight** · 08-14-2007, 12:48 AM

This is literally a guess... but it seemed odd...

#header ul {
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 550px;
position: absolute;
left: 12px;
top: 78px;
}

#header li {
display: inherit;
font-size: 12px;
font-weight: bold;
margin: 0 0 0 0;
padding: 0 0 0 0;
list-style: none;
float: left;
}

The 550px width and the inherit... could be the cause.

One other thing that is VERY beneficial for this menu is something I picked up in this forum...

<div id="slidemenu" class="slidetabsmenu">
<ul>



</ul>
</div>

Essentially I place all of the <li> .... </li> items within a text file. This way the page grabs the code from that text file. Basically by doing this, you are able to change every menu, on every page of the website just by editing one text file, and won't need to mess with every single page.

**fujofly** · 08-14-2007, 02:31 PM

Thanks for the input. I tried changing the 550px value which was unnecessary and I tried changing the display inherit value and still is dropping down off from where the text needs to be. Its like the drop downs are picking up a value from something else and I can't figure it out.

Good idea, I have everything as a php include but included all the text in it as I try to troubleshoot it. I have a version of the site up which works great using another drop down but it just doesn't quite do it in Explorer 6 so Im back at square one trying to figure it out with the chrome menu now.

**ddadmin** · 08-14-2007, 05:45 PM

Try moving the drop down DIVs of the script outside any container tags other than <body> on your page, such as to the bottom of your page, right above the </body> tag. In your case, something like:

Code:

<!--1st drop down menu -->                                                   
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.sycoleman.com/V3/about_us/mission_and_values.php">Mission & Values</a>
<a href="http://www.sycoleman.com/V3/about_us/leadership.php">Leadership</a>
<a href="http://www.sycoleman.com/V3/about_us/corporate_structure.php">Structure</a>
<a href="http://www.sycoleman.com/V3/about_us/sycoleman_international_locations.php">Locations</a>
<a href="http://www.sycoleman.com/V3/about_us/sycoleman_history.php">History</a></div>

<!--2nd drop down menu -->                                                
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="http://www.cnn.com/">Current News</a>
<a href="http://www.msnbc.com">L-3 News</a>
<a href="http://news.bbc.co.uk">Employee Spotlight</a></div>

</body>

</html>

With the above I've moved two of them, but you should move the rest of your drop down DIVs as well.

Thread: Chrome Menu Drop Down Alignment Off

Thread Tools

Search Thread

Chrome Menu Drop Down Alignment Off

Bookmarks

Bookmarks

Posting Permissions