IE displays floats wrong

Question

My website is currently breaking on several pages in ie7, ie8, and ie9, and of course its breaking in different ways in each browser. I've been trying to figure this out for hours and have nothing.

The problem in ie7-8 is that my various elements are not floating correctly I believe, but I'm not entirely sure.

Here are some screencaps

Here is a link to the test page: testsite

And here is the code:

<?php include("includes/header.html");?>

    <div id="content">      
        <div id="toolbar" class="dropshadow" style="background-color: #181818">
            <h1 class="header1">Looking to <font color="ed1c2e">Buy</font>?</h1>
            <h2 class="header2">Buyers Tools:<h2>
            <hr noshade color = "#373737"/>

            <ul>
                <li>
                    <a href="inventory.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Showroom','','images/toolbar/carhover.png',1)">
                        <img src="images/toolbar/car.png" alt="Showroom" name="Showroom" width="89" height="55" border="0" id="Showroom" style="margin-left: 7px;"/>
                                <h3>Our Vehicles</h3>
                        </a>
                    </li>
                <li>
                    <a href="shipping.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Shipping','','images/toolbar/shippinghover.png',1)">
                        <img src="images/toolbar/shipping.png" alt="Shipping" name="Shipping" width="97" height="55" border="0" id="Shipping" />
                            <h3>Shipping</h3>
                        </a>
                    </li>
                <li>
                    <a href="financing.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Financing','','images/toolbar/financinghover.png',1)">
                        <img src="images/toolbar/financing.png" alt="Financing" name="Financing" width="89" height="55" border="0" id="Financing" />
                                <h3>Financing</h3>
                            </a>
                    </li>
                <li>
                    <a href="insurance.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Insurance','','images/toolbar/insurancehover.png',1)">
                        <img src="images/toolbar/insurance.png" alt="Insurance" name="Insurance" width="64" height="55" border="0" id="Insurance" />
                                    <h3>Insurance</h3>
                                </a>
                    </li>    
                <li>
                    <a href="auto-locator.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('AutoLocator','','images/toolbar/autolocatorhover.png',1)">
                        <img src="images/toolbar/autolocator.png" alt="AutoLocator" name="AutoLocator" width="104" height="55" border="0" id="AutoLocator" />
                            <h3>Auto Locator</h3>
                        </a>
                    </li>
                </ul>
            </div>

        <div id="searchbox" class="dropshadow">


            </div>

        <div id="advsearch" class="dropshadow">

                </div>




        <div id="links" class="dropshadow" style="background-color: #181818">

            </div>


        </div>
    </div>                   
        <div id="bannerads" class="dropshadow">
            </div>   

Here is the CSS sheet specific to this page. If you need the main page for the site I can get it for you, but that style sheet works fine on other pages so I believe the problem is here.

@charset "utf-8";
/* CSS Document */

#bannerads{
    margin: 9px 0px 5px 6px;
    float: left;
    width: 728px;
    height: 90px;
    padding: 6px 128px;

    background-color: #e9e7e4;
}
#toolbar{
    float: left;
    width: 984px;    
    height: 150px;
    position: relative;
    z-index: 1;
    margin: 0px 6px 0px 6px;
    background-color: #181818;
    background-image: url(../images/toolbar.png);
    background-position:right top;
    background-repeat:no-repeat;
}
#toolbar hr{
    float: left;
    width: 600px;
    margin: 4px 300px 0px 30px
}
#toolbar ul{
    list-style:none;
    padding:0;
}
#toolbar li{
    float: left;
    margin: 10px 0px 0px 31px;
}
#toolbar a{
    color: #e9e7e4;

}
#toolbar a:hover{
    color:#e9e7e4;
    text-decoration:underline;  
}
#searchbox{
    float: left;
    clear: both;
    width: 446px;
    height: 402px;
    background-color: #e9e7e4;
    margin: 9px 6px 0px 6px;
    padding: 10px 20px 10px 20px;
}
#toolbar li h3{
    color: #e9e7e4;
    font-size: 13px;
    margin-top: 4px;
    margin-bottom: 10px;
    text-align:center;
}
#advsearch{
    float: left;
    width: 446px;
    height: 242px;
    background-color: #e9e7e4;
    margin: 9px 6px 0px 6px;
    padding: 10px 20px 10px 20px;
}

#links{
    float: left;
    width: 446px;
    height: 132px;
    background-color: #181818;
    margin: 8px 6px 0px 6px;
    padding: 10px 20px 10px 20px;
}
#arrow{
    margin-left:-93px;
    width: 68px;
    height: 135px;
    float: left;
    position: relative;
}
.header1{
    color: #e9e7e4;
    font-size: 28px;
    margin: 8px 0px 0px 30px;
    float: left;

}
.header2{
    color: #e9e7e4;
    font-size: 16px;
    float:left;
    margin: 22px 0px 0px 220px;
}

#showinvheader{
    color: #e9e7e4;
    font-size: 14px;
    margin-bottom: -2px;
    text-align:center;
}

Lastly, here is the css sheet I'm using for compatibility with ie:

/* CSS Document */

.Navigation{
    border: solid #181818 1px;
    margin: -15px 5px 0px 5px;
}
.bigbox{
    border: solid #181818 1px;
    margin: 7px 5px 0px 5px;
}
.smallbox{
    border: solid #aaa 1px;
    margin: 7px 5px 0px 5px;
}
#banner{
    border: solid #181818 1px;
    margin: -1px 5px 0px 5px;
}
#headerimg{
    border: solid #181818 1px;
    margin: -1px 5px 0px 5px;
}
#contentbox{
    border: solid #aaa 1px;
    margin: 7px 5px 0px 5px;
    }
#bannerads{
    border: solid #aaa 1px;
    margin: 7px 5px 0px 5px;
    }
#bannerads2{
    border: solid #aaa 1px;
    margin: 7px 5px 0px 5px;
    }
#toolbar{
    border: solid #181818 1px;
    margin: -1px 5px 0px 5px;
}
#featured{
    border: solid #aaa 1px;
    margin: 7px 5px 0px 5px;
    }
#searchbox{
    border: solid #aaa 1px;
    margin: 7px 5px 0px 5px;
    }
#advsearch{
    border: solid #aaa 1px;
    margin: 7px 5px 0px 5px;
    }
#links{
    border: solid #181818 1px;
    margin: 7px 5px 0px 5px;
    }

Answer 1

Ok, sorry it took so long for me to write this...

The reason the code was malfunctioning was that a header tag didn't get closed.

 <h1 class="header1">Looking to <font color="ed1c2e">Buy</font>?</h1>
            <h2 class="header2">Buyers Tools:<h2> 

So, if you're experiencing a similar problem make sure your tags are all closed.

Answer 2

Well, for starters, your X-UA-Compatible header is messed up. You have a weird quot; value in there. This is likely preventing newer versions from rendering as IE7. However, you should probably just always render in standards mode, and make subtle changes for each browser using conditional comments.

If you must use the x-ua-compatible, then you should do it as an http header, rather than as a meta tag. PHP allows you to addheaders before it starts writing data to the client. Add the header there.

Upon further examination, your code is.. Crap. It's got 180+ validation errors, including things like putting block level elements in header elements. I would suggest making your HTML validate before anything else, as invalid code is the #1 reason for things to render differently on different browsers.

http://validator.w3.org/check?verbose=1&uri=http%3a%2f%2fspecialtysales.nfshost.com%2flookingtobuy2.php