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 2 of 2
  1. #1
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts

    Exclamation IE6 help with menu, it's all out of place

    on my site: http://vila.slicedcreative.co.uk my nav menu is all out of place inIE6, can someone please help?!

    html
    Code:
    <div id="navbar">
                        <img src="/images/left_side_nav.png" alt="left side nav" class="nav_end" />
                            <ul id="menu">
                                <li><a href="#" title="Vila Fulmar">Villa Fulmar</a></li>
                                <li><span></span><a href="#" title="The Area">The Area</a></li>
                                <li><span></span><a href="#" title="The Property">The Property</a></li>
                                <li><span></span><a href="#" title="Gallery">Gallery</a></li>
                                <li><span></span><a href="#" title="Contact Us">Contact Us</a></li>
                                <li><span></span><a href="#" title="Availability & Prices">Availability & Prices</a></li>
                            </ul>
                        <img src="/images/right_side_nav.png" alt="right side nav" class="nav_end" />
                 </div>
    CSS
    Code:
    .navbar {
    	width:690px;
    	height:71px;
    	position: absolute; 
    	top:50px;
    	right:18px;
    }
    
    /** Menu **/
    #navbar {
    	width:746px;
    	height:71px;
    	float: right;
    	position: absolute; 
    	top:58px;
    	right:0px;
    }
    .nav_end {
    	width: 30px;
    	height: 71px;
    	float: left;
    }
    ul#menu {
    	height: 71px;
    	float: left;
    	margin: -3px 0 0 0;
    	list-style-type: none;
    }
    #menu li {
    	height: 71px;
    	float: left;
    	background-image: url(/images/1px_nav.png);
    	background-repeat: repeat-x;
    	display:inline;
    
    }
    #menu a:link,
    #menu a:visited,
    #menu a:active {
    	height: 71px;
    	padding: 2px 18px 0;
    	display: block;
    	background: url(/images/1px_nav.png) repeat-x;
    	line-height: 67px;
    	font-weight: bold;
    	font-size: 13px;
    	color: #264a81;
    	text-decoration: none;
    }
    #menu a:hover {
    	margin: 15px 0 0;
    	line-height: 37px;
    	background: url(/images/1px_nav_on.jpg) repeat-x;
    } 
    #menu span{
    	background-image: url(/images/nav_divider.jpg);
    	height: 37px;
    	width:2px;
    	float:left;
    	margin-top: 17px;
    }

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Try adding:

    Code:
    #menu a{float:left}


  •  

    Posting Permissions

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