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
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts

    Unhappy Problem with Dropdown Menu in Chrome

    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 )

    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 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

    Code:
    @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
    Last edited by aaronhockey_09; 04-19-2011 at 05:17 PM.

  • #2
    Regular Coder
    Join Date
    Apr 2011
    Posts
    286
    Thanks
    2
    Thanked 39 Times in 39 Posts
    Need to close the anchor on "Member Login"

  • Users who have thanked Wojjie for this post:

    aaronhockey_09 (04-19-2011)

  • #3
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    Hey,sorry, what do you mean by close the anchor.

  • #4
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by aaronhockey_09 View Post
    Hey,sorry, what do you mean by close the anchor.
    this -> </a> ,

    best regards

  • Users who have thanked oesxyl for this post:

    aaronhockey_09 (04-19-2011)

  • #5
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    NVM , haha i had a brain fart
    thanks so much. Can't believe i missed that.


  •  

    Tags for this Thread

    Posting Permissions

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