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 3 of 3
  1. #1
    New Coder
    Join Date
    Aug 2007
    Posts
    93
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Floated nav bar problem in IE

    Hi, i'm looking for a wee bit of guidance on my page layout. It looks fine in Firefox and Safari, but IE6 and IE7 are both giving me some problems. In IE6, my main menu is sitting too high, while my quick links (left hand side) are also a little bit too high. In IE7, my main menu is fine but my quick links are a bit too low! Before I end up hacking my CSS to pieces, I want to make sure there's not something simple i'm missing which could rectify these issues.

    I'm linking to two separate CSS files - one for my overall page layout, one specifically for the navigation layout. Not sure if there's a problem with me floating my #quicklinks div to the left in the styles.css stylesheet, then styling the elements inside that div in the nav.css stylesheet? Anyway, the url is
    http://www.antoninesportscentre.co.u...lomond_school/

    styles.css
    Code:
    /*********** Main structure *************************/
    * html, body, #container {margin:0;padding:0;height:100%;}
    
    body {
    	font-size:1em;
    	height:100%;
    	background-color:#000033;
    	text-align:center;
    }
    
    #container { 
    	background-image: url("../images/home.jpg");
    	background-repeat:no-repeat;
    	font-family: Trebuchet MS;
    	font-size: 0.7em;
    	color: #000000;
    	width:900px;
    	margin-top:2px;
    	margin-left: auto; 
    	margin-right: auto;
    	text-align:left;
    	height:800px;
    }
    
    #upper {
    	height:105px;
    	margin-left:10px;
    	width:250px;
    	padding-top:1px;
    	font-size:0.9em;
    	overflow:auto;
    	line-height:1.2em;
    	color:white;
    }
    
    #mainmenu {
    	margin-top:-5px;
    	margin-left:3px;
    	width:890px;
    	height:120px;
    }
    
    #quicklinks {
    	float:left; 
    	margin-left:15px;
    	margin-top:80px;
      	width:250px; 
      	height:470px; 
      	display:inline;
    }
    
    #content {
    	float:right;
    	margin-right:10px;
    	width:590px;
    	margin-top:90px;
    	margin-bottom:10px;
    	height:460px;
    	overflow:auto;
    }
    
    #flashmovie {
    	height:200px;
    }
    
    #footer {
    	clear:both;
    	margin-left:auto;
    	margin-right:auto;
    	margin-top:30px;
    	text-align:center;
      	width:900px; 
      	height:40px; 
    	font-size: 0.8em;
    }
    then, the relevant stuff from nav.css
    Code:
    /**************** main menu styles****************/
    ul#nav {position:absolute;margin-left:0px;}
    ul#nav li {float:left; list-style-type:none; }
    ul#nav li a {height:34px; display:block; position:absolute; text-indent:-9999px; outline:none}
    
    //Quick link menu styles
    ul#quicknav {list-style:none;}
    ul#quicknav li {list-style-type:none; }
    ul#quicknav li a {
    	height:103px;
    	display:block;
    	text-indent:-9999px;
    	outline:none;
    	margin-left:-31px;
    }
    Grateful for any help on this

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    IE7 and FF2 look exactly the same on this Vista machine.
    Have you validated lately? Your using an id more than once.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Aug 2007
    Posts
    93
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Solved the problem - my encoding declaration - <?xml version='1.0' encoding='UTF-8'?> - was throwing IE into quirks mode.


  •  

    Posting Permissions

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