Float positioning issues in IE

HTML & CSS
1

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_walker/bookschristian_com/header.html

Thanks in advance,
Alex

2

Hi,

Where’s your doctype? :slight_smile:

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

Something like this:


<!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.