SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Float positioning issues in IE...

    Hello boys,

    So, I'm coding the header for a website, and I've got a div floated right which contains the search, some links, buttons and a welcome message.

    Problem is, the floated div is perfectly positioned above the navigation in the top right corner of this fluid layout in FireFox - but in IE and Opera it is pushed down on top of my navigational elements.

    If anyone could take a look at this and help me to determine what I've overlooked, it would be highly appreciated.

    Link: http://alexstanford.com/clients/emma...om/header.html

    Thanks in advance,
    Alex
    Alex Stanford @alexstanford tumblog about.me in fb G+ K
    TechTalkin The Premier Community for Technology Enthusiasts and Professionals
    Full Ambit Media Zero Sacrifice Web Design & Development; Made in the USA @fullambit in fb G+ K

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,286
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Where's your doctype?

    Put that right and then float the logo and the inputs to cure all the odd gaps.

    Something like this:

    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>
    <title>bookschristian.com</title>
    <style>
    /* @Start Global Styles */
    html, body {
        margin: 0;
        font-family: arial, verdana, tahoma, helvetica, sans-serif;
    }
    /* @End Global Styles */
    
    /* @Start Header Styles */
    #logo {
        margin: 37px 0 0 10px;
        float:left;
        display:inline;
    }
    #searchform {
        width: 502px;
        padding: 0 0 0 5px;
        background: url(http://alexstanford.com/clients/emma_walker/bookschristian_com/img/searchbg.gif) 0 13px no-repeat;
        float: right;
        margin: 0 10px 0 0;
        display:inline;
    }
    #searchform ul {
        height: 28px;
        margin: 8px 0 8px 0;
        padding:0;
        overflow:hidden;
    }
    #searchform ul li {
        display: inline;
        margin: 0;
        float: right;
        font-size: 9pt;
        color: #0b2200;
        padding: 6px 7px;
    }
    #searchform ul li.button {
        padding: 0;
    }
    #searchform select {
        width: 119px;
        height: 31px;
        padding:5px 0 0;
        border: 0;
        font-size: 12pt;
        float:left;
    }
    #searchform .searchtext {
        width: 298px;
        border: 0;
        font-size: 12pt;
        padding: 5px 5px;
        margin:0;
        float:left;
        background:transparent;
    }
    #searchform .searchgo {
        float:right;
        margin:1px 5px 0 0 ;
        display:inline;
    }
    #searchform p {
        font-size: 9pt;
        text-align: right;
        margin:10px 0 0;
        clear:both;
        float:left;
        width:495px;
    }
    /* @End Header Styles */
    
    /* @Start Nav Styles */
    #navwrap {
        width: 100&#37;;
        background: url(http://alexstanford.com/clients/emma_walker/bookschristian_com/img/navbg.gif) repeat-x;
        height: 75px;
        margin:0 0;
        clear:both;
    }
    /* @End Nav Styles*/
    </style>
    </head>
    <body>
    <div id="wrapper"><img src="http://alexstanford.com/clients/emma_walker/bookschristian_com/img/logo.gif" alt="bookschristian.com" id="logo" />
        <form id="searchform">
            <ul id="topmenu">
                <li class="button"><img src="http://alexstanford.com/clients/emma_walker/bookschristian_com/img/checkout.gif" /></li>
                <li class="button"><img src="http://alexstanford.com/clients/emma_walker/bookschristian_com/img/mycart.gif" /></li>
                <li><a href="#">Help</a> &nbsp;</li>
                <li><a href="#">Wishlist</a> &nbsp; &nbsp; |</li>
                <li><a href="#">My Account</a> &nbsp; &nbsp; |</li>
            </ul>
            <select name="search">
                <option>All Products</option>
                <option>Music</option>
                <option>Books</option>
            </select>
            <input type="text" class="searchtext" />
            <input type="image" src="http://alexstanford.com/clients/emma_walker/bookschristian_com/img/go.gif" class="searchgo" />
            <p>Welcome to BooksChristian.com! <a href="#">Sign In</a> or <a href="#">Create An Account</a></p>
        </form>
        <div id="navwrap"></div>
    </div>
    </body>
    </html>
    You had the logo not floated which means that the floated form starts on the next line down in IE7 and under. Only good browsers start floats on the same line as inline content. As a rule of thumb remember that floats need to come first if you want them to start horizontal and for following text to wrap on the same line.


Bookmarks

Posting Permissions

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