Workaround rendering bug in IE quirks mode

Question

I'm trying to get a simple HTML/CSS page to work as an eBay template, however it fails to render properly in IE. Thanks to eBay's HTML choices, the listing will always render in quirks mode (no doctype reference in the listing's iframe). The problem only arises when a browser window is narrower than the listing asks for (~1000px). I've tried using various CSS hacks for this (IE's box model, double margin, etc), but I can't figure out where the problem is, except that it seems that IE tries to render the contents of the page to the width of the window, overriding the widths defined (judging by the way background images are cut short even though their div tags have defined min-width's. Anyhow, the HTML is (I've added dots to break the img and a tags so that this could post):

    <style type="text/css">
        img {border:none;}
        .head {min-width:1000px; width:auto !important; width:1000px; min-height:100px; text-align:center; padding:0; margin:0px auto; padding-top: 172px; background: #d4e1ea url(xxxx) no-repeat center top;}
        .left {margin-top:20px; padding:0; float:left;}
        .right {width:200px; margin:0px; margin-top:10px; padding:0; float:right;}
        .main {margin-left:189px; margin-top:20px; margin-right:10px; min-width:800px; width:auto !important; width:800px;}
        .frame (width:100%}
        .foot {width:564px; margin-top:20px;}
        .title {height:68px; width:563px; background-image:url(xxxx); padding:0; text-align:center; font-size:22px; text-transform:uppercase; font-weight:bold; font-family:Helvetica,Tahoma,Arial,sans-serif;}
        .mid {min-height:210px; width:563px; background:repeat-x; padding:0; margin-top:15px; margin-bottom:10px; overflow:hidden;}
        .mid-top {height:34px; background:no-repeat; margin:0; margin-bottom:10px;}
        .mid-main {margin-left:15px; overflow:hidden;}
        .mid-main, .mid-main table {font-size:14px;}
        .foot .mid-main {height:450px; margin:0; margin-left:1px; padding-left:15px; padding-top:5px; clear:both; background:url(xxxx) repeat-x;}
        .menu, .img {list-style:none; margin:0; padding:0;}
        .menu li {margin:0 0 10px 0; padding:0;}
        .menu li a {position:relative; display:block;}
        .menu li a img {position:absolute; left:0px;}
        .menu li a:hover img {left:0px;}
        .img li div {width:200px; height:200px; margin-bottom: 20px;}
        .search {min-height:56px; padding-top:41px; padding-left:12px; margin-bottom:20px; background:url(xxxx) no-repeat;}
    </style>
    <div class="head">
        <!-- FLASH OBJECT -->
    </div>
    <div class="left">
        <div class="search"><form action="xxxx" method="get" name="search">
            <input type="name" name="_nkw" id="eb-srch" length="10" value="Search..." />
            <input type="submit" value="Search" name="submit" />
        </form></div>
        <ul class="menu" id="ldca-menu">
            <li><.a href="xxx"><.img src="xxxx" /></a></li>
            <li><.a href="xxx"><.img src="xxxx" /></a></li>
            <li><.a href="xxx"><.img src="xxxx" /></a></li>
        </ul>
    </div>
    <div class="main">
        <div class="right"><ul class="img">
            <li><.a href="xxxx"><.img src="xxxx" width="200" height="178" alt="image" /></a></li>
            <li><.a href="xxxx"><.img src="xxxx" width="200" height="178" alt="image" /></a></li>
            <li><.a href="xxxx"><.img src="xxxx" width="200" height="178" alt="image" /></a></li>
        </ul></div>
        <div class="frame">
            <div class="title">Thing to Sell</div>
            <div class="desc mid">
                <div class="mid-top"><!-- CSS BG image --> </div>
                <div class="mid-main">Description....blah..</div>
            </div>
            <div class="specs mid">
                <div class="mid-top"><!-- CSS BG image --> </div>
                <div class="mid-main"><!-- more description --></div>
            </div>
        </div>
        <div class="foot">
            <ul id="ldft-menu" class="menu">
                <li><div onclick="x" class="x"><.img alt="x" src="xxxx" /></div></li><!-- JS is to change img sprite to hightlight tab -->
                <li><div onclick="x" class="x"><.img alt="x" src="xxxx" /></div></li><!-- JS is to change img sprite to hightlight tab -->
                <li><div onclick="x" class="x"><.img alt="x" src="xxxx" /></div></li><!-- JS is to change img sprite to hightlight tab -->
            </ul>
            <div class="mid-main">
                <div id="ldft-1">
                    <h3>Tab Title</h3>
                    <p>Content</p>
                </div>
                <div id="ldft-2">
                    <h3>Tab Title</h3>
                    <p>Content</p>
                </div>
                <div id="ldft-3">
                    <h3>Tab Title</h3>
                    <p>Content</p>
                </div>
            </div>
        </div>
    </div>

Answer 1

Try adding

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

In your header. This will force IE standard-compliant rendering.