...

View Full Version : Problem with Dropdown Menu in Chrome



aaronhockey_09
04-19-2011, 04:12 PM
Hey guys, iv got a small problem here. So i am making a website for my boss, and i have a dropdown menu for the navigation.

and for some reason, in google chrome only, the very first LI ( services ), is being pushed down and is messing up the rest of the website.

Here is the html for the top part ( header and nav )


<!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" />
<link href="style.css" rel="stylesheet" type="text/css" />

<title>Untitled Document</title>
</head>

<body>
<div id="header">
<div id="inside-header" class="container">
<div id="logo"><a href="#"><img src="logo.png" width="97" height="149" /></a></div>
<div id="search_form">
<form action="#" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="partner-pub-9043938774847501:sc0hit-r5zm" />
<input type="hidden" name="cof" value="FORID:10" />
<input type="hidden" name="ie" value="ISO-8859-1" />
<div class="field"> <input type="text" name="q" size="25" onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}"/> </div>
<input type="submit" name="sa2" value="" class="button" />
</div>
</form>


<div id="shopping"><img src="shopping_cart.png" width="21" height="18" />&nbsp;&nbsp;Shopping Cart (0)&nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;Member Login</div>

</div>


</div>
</div>



<div id="nav" class="container">
<ul class="dropdown">
<li><a href="./" class="dir">Services</a>
<ul>
<li><a href="./">Coaching / Mentoring</a></li>
<li><a href="./">Keynote Speaking & Workshops</a></li>
<li><a href="./">Marketing Services</a></li>
<li><a href="./">CKG Referral Network</a></li>
<li><a href="./">B2B Services</a></li>
</ul>
</li>
<li><a href="./">WorkShops</a></li>
<ul>
<li><a href="./">Teleconference Series</a></li>
<li><a href="./">Million Dollar College</a></li>
<li><a href="./">Seminars</a></li>
</ul>
<li><a href="./" class="dir">Videos</a>
<ul>
<li><a href="./">The Bottom Line</a></li>
<li><a href="./">Seminar Videos</a></li>
<li><a href="./">Live Streams</a></li>

</ul>
</li>
<li><a href="./" class="dir">Dicuss & Grow</a>
<ul>
<li><a href="./">Coach Kens Blog</a></li>
<li><a href="./">Forums</a></li>
</ul>
</li>
<li><a href="./" class="dir">Free Resources</a>
<ul>
<li><a href="./">Newsletter</a></li>
<li><a href="./">Coach Kens Blog</a></li>
<li><a href="./">Billionaire Mindset</a></li>
<li><a href="./">Hot Tips</a></li>
</ul>
</li>
<li><a href="./" class="dir">Testimonials</a>
<ul>
<li><a href="./">Writeen Ones</a></li>
<li><a href="./">Success Stories</a></li>
</ul>
</li>
<li><a href="./" class="dir">Store</a>
</li>
<li><a href="./">About Us</a>
<ul>
<li><a href="./">Company Profile</a></li>
<li><a href="./">Ken G</a></li>
<li><a href="./">Coaching Ken</a></li>
</ul>
</li>

<li><a href="./" class="dir">Contact Us</a>
</li>
</ul></div>

and here is the CSS


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

* { margin: 0; padding: 0; outline:none; } /* Reset stuff */


body {margin:0;
padding:0;
position:relative;
background:url(ckg_background.jpg) repeat;

}



html, body, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

ul{ list-style:none; }

a, a:hover{
outline:none;
text-decoration:none;
color:#50325F;
}

img{ border:none; }

.container { margin:0 auto; border:none; }

#header { background:url(bg.jpg) repeat-x; height:160px; }

#inside-header { background:url(top_bg.jpg) repeat-x; width:960px; height:160px; }

#logo { float:left; width:97px; height:149px; }

#search { float:right;}

#search_form { float: right; width: 230px; top:35px; right:0px; margin-top:20px; margin-right:20px; }
#search_form .field { float: left; display: inline; height: 30px; width: 184px; background: url(search_text.png) no-repeat 0 0; }
#search_form .field input { color: #353535; border: 0; background: transparent; font-size: 11px; margin: 10px 0 0 10px; }
#search_form .button { float: left; display: inline; height: 30px; width: 42px; cursor: pointer; border: 0; background: url(search_button.png) no-repeat 0 0; }
#search_form .button:hover { }

#shopping { float:right; width:230px; margin-top:10px; height:21px; overflow:hidden; color:#FFF; font-size:12px;}

#nav { background:url(nav_bg.jpg) repeat-x; height:39px; }

#nav-inside { height:39px; width:960px; font-size:11px; padding-left:45px; overflow:hidden; font-family:Arial, Helvetica, sans-serif; }

#inbetween { height:25px; width:1px; background-color:#666; float:left; }

#nav-inside a { color:#333; text-decoration:none; }

#nav-inside a:hover { color:#50325F; text-decoration:none; }

#home_front { height:271px; }

#slider_bg { height:271px; width:960px; background:url(slider_bg.jpg); z-index:2; }

#slider { width:631px; height:243px; float:left; margin-top:10px; margin-left:5px; z-index:2;}

#slider_right_button { float:right; width:308px; height:184px; margin-top:5px; margin-right:5px; }

#connect { float:right; width:308px; background:url(connect.jpg) center no-repeat; height:58px; margin-right:5px; margin-top:5px; }

#icons { float:right; width:210px; height:53px; padding-top:5px; }

#middle { background:none; }

#middle-inside { width:960px; background:#FFF; }

#middle-left { width:205px; height:auto; float:left; margin-bottom:10px; }

#middle-left h1 { font-size:18px; color:#939; text-decoration:none; text-align:left; margin-top:10px; margin-left:10px; }

#middle-left2 { width:195px; float:left; margin-bottom:10px; background:url(middle-left2-bg.png) repeat-y; padding-top:20px; }

#middle-left2-interior { width:185px; float:left; padding-left:10px; margin-bottom:10px; padding-top:5px; padding-bottom:5px; }

#middle-left2-interior:hover { background-color:#999;}

#underline { width:175px; height:2px; background-color:#999; margin-left:10px; }

#middle-middle { width:420px; float:left; margin-left:10px; margin-right:8px; margin-bottom:10px;}

#middle-middle-grey { background:url(middle-bg-grey.jpg) no-repeat; width:419px; height:135px; }

#middle-middle-white { background:#FFF; width:419px; height:135px; }

#middle-middle-pics { float:left; margin-left:10px; margin-top:10px; height:125px; }

#middle-middle-title { float:left; margin-left:10px; font-size:20px; color:#50325F; margin-top:10px; width:284px; }

#middle-middle-desc { float:left; margin-left:10px; color:#333; margin-top:10px; width:264px; font-size:12px; }

.purple { color:#90C; }

#middle-middle2 { width:545px; float:left; margin-left:10px; margin-bottom:10px; margin-right:10px; }

#middle-middle2-top { width:545px; float:left; font-size:16px; padding-left:10px; }

#middle-middle2-title { width:545px; float:left; font-size:24px; padding-left:10px; color:#999; margin-top:20px; }

#middle-middle2-inside { width:545px; float:left; padding-left:10px; color:#333; margin-top:10px; }

#middle-right { width:313px; float:right; margin-bottom:10px; }

#middle-right-video { float:left; width:313px; }

#middle-right-title { float:left; width:305px; text-align:left; padding-left:10px; margin-top:15px; color:#333; font-size:18px; }

#middle-right-desc { float:left; width:305px; text-align:left; padding-left:10px; margin-top:20px; color:#000; font-size:16px; }

#middle-right2 { float:left; width:200px; margin-bottom:10px;}

#middle-right2-inside{ width:200px; height:214px; float:left; background:url(middle-right-bg.png) no-repeat; }

#middle-right2-pic { float:left; margin-left:5px; margin-top:5px; width:85px; height:80px;}

#middle-right2-desc { float:left; margin-left:10px; font-size:18px; color:#999; margin-top:5px; width:100px; }

#middle-right2-click { float:left; margin-left:10px; font-size:12px; color:#999; margin-top:10px; width:100px;}

#footer { background:url(footer_bg.jpg) repeat-x; height:279px; clear:both; background-color:#EFEBE3; }

#footer-inside { width:960px; height:209px; padding-left:40px; }

#footer-inside-col { width:155px; float:left; }

#footer-inside-col-title { margin-top:30px; font-size:12px; color:#50325F; text-align:left; width:145px; padding-left:10px; }

#footer-inside-col-desc { margin-top:10px; font-size:12px; color:#000; text-align:left; width:145px; padding-left:10px; }

#footer-spacer { height:175px; width:1px; background-color:#999; float:left; margin-top:30px; }

#footer-bottom { width:960px; text-align:center; margin-top:25px; float:left;}

#footer-bottom h1 { color:#50325F; font-size:12px; font-style:normal; font-family:Arial, Helvetica, sans-serif; width:960px; float:left;}

#footer-bottom h2 { color:#000; font-size:12px; font-style:normal; width:400px; float:left; margin-left:275px; }

#bottom-social { float:right; width:150px; margin-right:50px; }

<!--
@charset "UTF-8";

/**
* Horizontal CSS Drop-Down Menu Module
*
* @file dropdown.css
* @package Dropdown
* @version 0.7.1
* @type Transitional
* @stacks 597-599
* @browsers Windows: IE6+, Opera7+, Firefox1+
* Mac OS: Safari2+, Firefox2+
*
* @link http://www.lwis.net/
* @copyright 2006-2008 Live Web Institute. All Rights Reserved.
*
*/

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}

ul.dropdown {
position: relative;
z-index: 597;
width:960px;
margin:0 auto;
padding-left:100px;
}

ul.dropdown li {
float: left;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
position: relative;
z-index: 1;
cursor: default;
}

ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 175px;;
}

ul.dropdown ul li {
float: none;
}

ul.dropdown ul ul {
top: 1px;
left: 99%;
}

ul.dropdown li:hover > ul {
visibility: visible;
}

@charset "UTF-8";

/**
* NVIDIA Advanced CSS Drop-Down Menu Theme
*
* @file default.advanced.css
* @name NVIDIA
* @version 0.1
* @type transitional
* @browsers Windows: IE5+, Opera7+, Firefox1+
* Mac OS: Safari2+, Firefox2+
*
* @link http://www.lwis.net/
* @copyright 2008 Live Web Institute. All Rights Reserved.
*
*/

@import "default.css";


ul.dropdown li a {
display: block;
padding: 7px 14px;
}


/* ------------- Override default */

ul.dropdown li {
padding: 0;
}


/* ------------- Reinitiate default: post-override activities */

ul.dropdown li.dir {
padding: 7px 20px 7px 14px;
}

ul.dropdown ul li.dir {
padding-right: 15px;
}


/* ------------- Custom */

ul.dropdown li { background-color:#c3b59b;

}

ul.dropdown ul a {
padding: 4px 5px 4px 14px;
width: 151px; /* Especially for IE */
}

ul.dropdown ul a:hover {
background-color: #000;
color:#CCC;
width:155px;
}

ul.dropdown a.open {
background-color: #c3b59b;
color: #fff;
}

ul.dropdown ul a.open {
background-color: #c3b59b;
color: #fff;
}


/* CSS 2.1 */

ul.dropdown li:hover > a.dir {
background-color: #c3b59b;
color: #fff;
}

ul.dropdown ul li:hover > a.dir {
background-color: #c3b59b;
color: #fff;
}
-->

and here is the picture to show the problem
http:///ckgpreview.com/Preview/CKGInternational/Untitled-1.jpg

Wojjie
04-19-2011, 04:58 PM
Need to close the anchor on "Member Login"

aaronhockey_09
04-19-2011, 05:30 PM
Hey,sorry, what do you mean by close the anchor.

oesxyl
04-19-2011, 05:32 PM
Hey,sorry, what do you mean by close the anchor.
this -> </a> , :)

best regards

aaronhockey_09
04-19-2011, 05:32 PM
NVM , haha i had a brain fart
thanks so much. Can't believe i missed that.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum