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
    Regular Coder
    Join Date
    Jul 2004
    Location
    Tampa
    Posts
    223
    Thanks
    23
    Thanked 0 Times in 0 Posts

    IE Pushing my navigation to a second row

    I have a header built that works fine in safari and ff, but IE pushed my navigation to a second row. If I take out the hyperlinks it works in IE, but as soon as I put my links back 2 of my buttons go to a second row.

    Any help would be appreciated. The first set of code is my css and the second is my html.

    Thank you!

    Code:
    #topmenu {
    margin-left: auto;
    margin-right: auto;
    border-color: #999;
    border-style: solid;
    border-right-width: 1px;
    border-left-width: 1px;
    border-top-width: 0;
    border-bottom-width: 0;
    width: 800px;
    height: 23px;
    }
    #topmenu1 {
    background-image: url(../images/menu1.jpg);
    width: 186px;
    height: 23px;
    float: left;
    }
    #topmenu2 {
    background-image: url(../images/menu2.jpg);
    width: 122px;
    height: 23px;
    float: left;
    }
    #topmenu2:hover {
    background-image: url(../images/menu2h.jpg);
    }
    #topmenu3 {
    background-image: url(../images/menu3.jpg);
    width: 121px;
    height: 23px;
    float: left;
    }
    #topmenu3:hover {
    background-image: url(../images/menu3h.jpg);
    }
    #topmenu4 {
    background-image: url(../images/menu4.jpg);
    width: 121px;
    height: 23px;
    float: left;
    }
    #topmenu4:hover {
    background-image: url(../images/menu4h.jpg);
    }
    #topmenu5 {
    background-image: url(../images/menu5.jpg);
    width: 121px;
    height: 23px;
    float: left;
    }
    #topmenu5:hover {
    background-image: url(../images/menu5h.jpg);
    }
    #topmenu6 {
    background-image: url(../images/menu6.jpg);
    width: 127px;
    height: 23px;
    float: left;
    }
    #topmenu6:hover {
    background-image: url(../images/menu6h.jpg);
    }
    HTML Below:

    Code:
    <body>
    <div id="header">
    <div id="topline">
    	<ol>
    		<li class="separator">Shop Online Now</li>
    		<li class="separator">Order Status</li>
    		<li>Sign-In</li>
    	</ol>
    </div>
    <div id="dottedline">
    </div>
    <div id="toplogo">
    </div>
    <div id="topmenu">
    	<div id="topmenu1">
    	</div>
    	<a href="test.php"><div id="topmenu2">
    	</div></a>
    	<a href="test.php"><div id="topmenu3">
    	</div></a>
    	<a href="test.php"><div id="topmenu4">
    	</div></a>
    	<a href="test.php"><div id="topmenu5">
    	</div></a>
    	<a href="test.php"><div id="topmenu6">
    	</div></a>
    </div>
    </div>
    </body>
    </html>

  • #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
    Hello dprichard,
    a couple things - I don't see a doctype for one.
    You can't wrap a div in a tags. Should be the other way around, like this:
    <div id="topmenu2"><a href="test.php"></a></div>

    Validator finds all that. See the suggestion and links about validating in my sig below.

    Have a look at a 2-state rollover menu example I have. View source to see how it's done.
    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

  • Users who have thanked Excavator for this post:

    dprichard (01-07-2008)

  • #3
    Regular Coder
    Join Date
    Jul 2004
    Location
    Tampa
    Posts
    223
    Thanks
    23
    Thanked 0 Times in 0 Posts
    Thank you. Your example helped a lot.


  •  

    Posting Permissions

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