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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Sep 2008
    Posts
    280
    Thanks
    25
    Thanked 9 Times in 9 Posts

    Nav out of place in IE 6 (not 5.5. or any other)

    Hi could any one see why this isn't quite working?

    stylesheet1.css:
    Code:
    /* CSS Document */
    
    body { 
    min-width: 800px;
    margin:0;
    padding: 10px 0;
    text-align: center;
    font-family: Verdana;
    background: #404040 url(../images/for_web/backtop.jpg) repeat-x;
    }
    
    * {
    margin:0 auto;
    padding:0;
    }
    #corner_wrapper {
    position:relative;
    width: 810px;
    border: 2px solid #404040;
    }
    
    #wrapper {
    width:800px;
    background-color:#FFFFFF;
    border: 5px solid #fff;
    }
    
    #wrapper #navigation {
    position: relative;
    border-bottom: 2px solid #404040;
    margin-bottom: 5px;
    text-align: left;
    padding-bottom: 3px;
    height: 120px;
    }
    #wrapper #navigation img {
    position:absolute;
    }
    #wrapper #main_right {
    display:inline;
    width: 240px;
    float:left;
    text-align:left;
    }
    #wrapper #main_right h2 {
    padding-top:8px;
    margin:0;
    color: #eb4c07;
    font-size: 18px;
    padding-left: 10px;
    }
    #wrapper #main_right p {
    margin: 10px auto 10px auto;
    font-size: 14px;
    padding-right:10px;
    padding-left: 10px;
    }
    
    
    #wrapper #main {
    display: inline;
    width: 550px;
    position:relative;
    text-align:left;
    border-top: 2px solid #404040;
    padding: 5px 0;
    margin-top:2px;
    z-index:0;
    float: left;
    }
    #wrapper #main h2 {
    padding-top:8px;
    margin:0;
    color: #eb4c07;
    font-size: 18px;
    padding-left: 10px;
    }
    #wrapper #main #under {
    position: relative;
    top: -5px;
    left: -3px;
    color: #eb4c07;
    font-size: 22px;
    background:url(../images/for_web/bg_under_header.jpg) no-repeat;
    padding: 0 140px 5px 10px;
    font-weight: 500;
    }
    #wrapper #main p {
    margin: 10px auto 10px auto;
    font-size: 14px;
    padding-right:10px;
    padding-left: 10px;
    }
    #wrapper #main .bg_backing {
    width: 170px;
    height: 170px;
    background:url(../images/for_web/170170_bg.jpg);
    float: left;
    margin: 10px;
    }
    #wrapper #main .bg_backing2 {
    width: 170px;
    height: 170px;
    background:url(../images/for_web/170170_bg.jpg);
    float: right;
    margin: 10px;
    }
    #wrapper #main .bg_backing img {
    margin: 10px;
    }
    #wrapper #main .bg_backing2 img {
    margin: 10px;
    }
    
    #wrapper #footer p {
    padding: 10px 0;
    font-size: 10px;
    }
    
    .clear {
    clear:both;
    }
    navigation.css:
    Code:
    /* CSS Document */
    
    #menu { 
     position: absolute;
     top:80px;
     _top: 77px;
     right:-160px;
     margin: 0; 
     padding: 0; 
     list-style-type: none;
     z-index: 30;
     width: 600px; 
    }
    
    #menu li { 
     margin: 6px 0px; 
     float:left;
    }
    
    #menu #left {
     display: block; 
     padding:0; 
     width: 20px; 
     height: 40px; 
     background-image: url(../images/for_web/navigation/left.jpg); 
     background-repeat: no-repeat; 
     text-decoration: none; 
     text-align: center; 
     font-size: 14px; 
     color: #fff; 
     margin-left: 0;
    }
    #menu #right {
     display: block; 
     padding:0; 
     width: 20px; 
     height: 40px; 
     background-image: url(../images/for_web/navigation/right.jpg); 
     background-repeat: no-repeat; 
     text-decoration: none; 
     text-align: center; 
     font-size: 14px; 
     color: #fff; 
     margin-left: 0;
    }
    
    #menu #home { 
    margin:0;
     display: block; 
     padding: 0; 
     width: 100px; 
     height: 40px; 
     background-image: url(../images/for_web/navigation/home_1.jpg); 
     background-repeat: no-repeat; 
     text-decoration: none; 
     text-align: center; 
     font-size: 14px; 
     color: #fff; 
     margin-left: 0;
    }
    
    #menu #home:visited {
    }
    
    #menu #home:hover { 
     background-image: url(../images/for_web/navigation/home_2.jpg); 
     background-repeat: no-repeat; 
    }
    
    #menu #stock { 
     display: block; 
     padding: 4px 0; 
     width: 100px; 
     height: 40px; 
     background-image: url(../images/for_web/navigation/stock_1.jpg);
     background-repeat: no-repeat; 
     text-decoration: none; 
     text-align: center; 
     font-size: 14px; 
     color: #fff; 
    }
    
    #menu #stock:visited {
    }
    
    #menu #stock:hover { 
     background-image: url(../images/for_web/navigation/stock_2.jpg);
     background-repeat: no-repeat; 
    }
    
    
    #menu #available { 
     display: block; 
     padding: 4px 0; 
     width: 100px; 
     height: 40px; 
     background-image: url(../images/for_web/navigation/available_1.jpg);
     background-repeat: no-repeat; 
     text-decoration: none; 
     text-align: center; 
     font-size: 14px; 
     color: #fff; 
    }
    
    #menu #available:visited {
    }
    
    #menu #available:hover { 
     background-image: url(../images/for_web/navigation/available_2.jpg);
     background-repeat: no-repeat; 
    }
    
    #menu #terms { 
     display: block; 
     padding: 4px 0; 
     width: 100px; 
     height: 40px; 
     background-image: url(../images/for_web/navigation/terms_1.jpg); 
     background-repeat: no-repeat; 
     text-decoration: none; 
     text-align: center; 
     font-size: 14px; 
     color: #fff; 
    }
    
    #menu #terms:visited {
    }
    
    #menu #terms:hover { 
     background-image: url(../images/for_web/navigation/terms_2.jpg); 
     background-repeat: no-repeat; 
    }
    index.php:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Kvan</title>
    <link href="stylesheets/stylesheet1.css" rel="stylesheet" type="text/css" />
    <link href="stylesheets/navigation.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/preload.js"></script>
    </head>
    
    <body>
    
    <div id="corner_wrapper">
    
    	<div id="wrapper">
    	
    		<div id="navigation">
    		
    			<h1><img src="images/for_web/header2.jpg" width="450" height="120" alt="Kvan's Corn Snakes" /></h1>
    		
    			<ul id="menu"> 
    				
    				<li id="left"></li> 
    				<li><a href="index.php?pg=1" id="home" tabindex="4">&nbsp;</a></li> 
    				<li><a href="index.php?pg=2" id="stock" tabindex="5">&nbsp;</a></li> 
    				<li><a href="index.php?pg=3" id="available" tabindex="6">&nbsp;</a></li> 
    				<li><a href="index.php?pg=4" id="terms" tabindex="7">&nbsp;</a></li>
    				<li id="right"></li> 
    						 
    			</ul>
    		
    		</div>
    	
    		<img src="images/for_web/header.jpg" width="800" height="278" alt="" />
    		
    		<div id="main">
    		
    			<h2 id="under">Welcome to Kvan's Cornsnakes.</h2>
    			
    			<div class="bg_backing">
    			
    				<img src="images/for_web/index/lexy.jpg" width="150" height="112" alt="Lexis" />
    			
    			</div>
    			
    			<h2>Phasellus et orci</h2>
    			
    			<p>Pellentesque nulla. Phasellus et orci. Suspendisse tempor, urna vitae fermentum pellentesque, nibh est viverra orci, vitae elementum diam leo nec nibh. Nulla tortor elit, blandit in, dictum quis, tincidunt a, est. Praesent nec dui. Vestibulum erat neque, fermentum et, tempus vel, dapibus at, nisl. Sed accumsan. Curabitur sapien. Aliquam sed eros sit amet lacus ultrices egestas. Donec risus. Sed lobortis elementum urna. Phasellus mattis diam id ante. In sem.</p>
    			
    			<div class="clear"></div>
    			
    			<div class="bg_backing2">
    			
    				<img src="images/for_web/index/Ian.jpg" width="150" height="112" alt="Lexis" />
    			
    			</div>
    			
    			<h2>Ut pharetra neque a mauris</h2>
    			
    			<p>Mauris venenatis nisi eu purus. Nunc fringilla lectus non lorem. Fusce scelerisque felis sit amet pede. Vivamus gravida ipsum pharetra nisl. Etiam vitae pede vel dolor facilisis ornare. Pellentesque lacus. Morbi urna augue, iaculis et, rhoncus nec, faucibus ac, ipsum. Integer est dolor, posuere vitae, viverra at, commodo sit amet, leo. Phasellus lectus elit, varius nec, accumsan eu, blandit ut, nisl. Ut pharetra neque a mauris. Etiam in velit. Sed imperdiet tempor augue. Proin a urna. Phasellus consequat, mi in commodo molestie, sem mi aliquam sem, in convallis ante metus non sapien. Morbi vel massa nec magna tristique posuere. Cras ultrices urna sit amet urna. Quisque ut lectus eu est congue mollis.</p>
    			
    			<h2>Turpis eros blandit leo, in mollis metus nisi ut odio.</h2>
    			
    			<p>Donec laoreet blandit dui. Vestibulum in elit. Curabitur nulla neque, vestibulum quis, hendrerit ac, varius in, nunc. Vivamus et pede. Mauris rutrum tincidunt justo. Maecenas aliquet metus faucibus nunc. Vestibulum justo. Aenean condimentum nunc blandit eros. Donec ultricies rhoncus mi. Aliquam volutpat, turpis auctor porta accumsan, turpis eros blandit leo, in mollis metus nisi ut odio. Aenean aliquet elit commodo est. Sed convallis blandit turpis. Donec auctor quam ac mauris. Aenean ornare. Sed sagittis.</p>
    		
    		</div>
    		
    		<div id="main_right">
    		
    		<h2>Turpis eros blandit.</h2>
    		
    		<p>Donec laoreet blandit dui. Vestibulum in elit. Curabitur nulla neque, vestibulum quis, hendrerit ac, varius in, nunc. Vivamus et pede. Mauris rutrum tincidunt justo. Maecenas aliquet metus faucibus nunc. Vestibulum justo. Aenean condimentum nunc blandit eros. Donec ultricies rhoncus mi. Aliquam volutpat, turpis auctor porta accumsan, turpis eros blandit leo, in mollis metus nisi ut odio. Aenean aliquet elit commodo est. Sed convallis blandit turpis. Donec auctor quam ac mauris. Aenean ornare. Sed sagittis.</p>
    		
    		<h2>Turpis eros blandit.</h2>
    		
    		<p>Donec laoreet blandit dui. Vestibulum in elit. Curabitur nulla neque, vestibulum quis, hendrerit ac, varius in, nunc. Vivamus et pede. Mauris rutrum tincidunt justo. Maecenas aliquet metus faucibus nunc. Vestibulum justo. Aenean condimentum nunc blandit eros. Donec ultricies rhoncus mi. Aliquam volutpat, turpis auctor porta accumsan, turpis eros blandit leo, in mollis metus nisi ut odio. Aenean aliquet elit commodo est. Sed convallis blandit turpis. Donec auctor quam ac mauris. Aenean ornare. Sed sagittis.</p>
    		
    		</div>
    		
    		<div class="clear"></div>
    	
    		<div id="footer">
    	
    			<p>Created by <a href="http://www.snowyswebsolutions.co.uk">snowy'swebsolutions &copy; 2009</a></p>
    	
    		</div>
    	
    	</div>
    	
    </div>
    
    </body>
    </html>
    www.snowyswebsolutions.co.uk/sites/kvan/

    many thanks
    Last edited by snowysweb; 03-05-2009 at 07:23 AM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,858
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    CSS is cascading style sheet and has immense power to inherit several properties.
    Just have a try by replacing your current navigation.css (after taking a backup), with
    Code:
    /* CSS Document */
    
    #menu { 
     position: absolute;
     /*top:80px;
     _top: 77px;
     right:-160px;*/
     bottom:0;
     right:0;
     list-style-type: none;
     z-index: 30;
    /*width: 600px; */
     border:1px solid red;
    }
    
    #menu li { 
     /*margin: 6px 0px; */
     float:left;
    
    }
    #menu li a{
     float: left; 
     width: 100px; 
     height: 40px; 
     background-repeat: no-repeat; 
     text-decoration: none; 
     text-align: center; 
     font-size: 14px; 
     color: #fff; 
    
    }
    #menu #left, #menu #right{
    width: 20px; 
    height:40px;
    }
    #menu #left {
    background-image: url(left.jpg); 
    }
    #menu #right {
    background-image: url(right.jpg); 
    }
    
    #menu #home { 
    background-image: url(home_1.jpg); 
    }
    
    #menu #home:visited {
    }
    
    #menu #home:hover { 
     background-image: url(home_2.jpg); 
     background-repeat: no-repeat; 
    }
    
    #menu #stock { 
      background-image: url(stock_1.jpg);
     }
    
    #menu #stock:visited {
    }
    
    #menu #stock:hover { 
     background-image: url(stock_2.jpg);
    
    }
    
    
    #menu #available { 
     
     background-image: url(available_1.jpg);
     
    }
    
    #menu #available:visited {
    }
    
    #menu #available:hover { 
     background-image: url(available_2.jpg);
    
    }
    
    #menu #terms { 
     
     background-image: url(terms_1.jpg); 
     
    }
    
    #menu #terms:visited {
    }
    
    #menu #terms:hover { 
     background-image: url(terms_2.jpg); 
     
    }
    (You'd need to adjust the image paths)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    snowysweb (03-05-2009)

  • #3
    Regular Coder
    Join Date
    Sep 2008
    Posts
    280
    Thanks
    25
    Thanked 9 Times in 9 Posts
    My problem now (after a few adjustments, probly why it isn't looking right, sorry) is that in 5.5 there is no border running along underneath the nav bar and that it seems to have a gap to the right of it. any ideas?

    http://www.snowyswebsolutions.co.uk/sites/kvan/

  • #4
    Regular Coder
    Join Date
    Sep 2008
    Posts
    280
    Thanks
    25
    Thanked 9 Times in 9 Posts
    Ok sorted that, just the bottem-border not going all the way across.


  •  

    Posting Permissions

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