Problem with IE Quirks Mode - Div with fixed height expanding

Question

I'm having a weird problem with IE8. Page DOCTYPE is QuirksMode and I CANNOT change it (I wish I could, but there's no way at this time). Widths are hacked to fix the difference of box modem interpretation between IE and other browsers. It's a simple horizontal navigation bar. It has a border all along, and the selected item should be a little bigger in order to "cover" the outer border. Works like a charm at FF, but in IE, the #container ignores it's height property and expands to fit it's childs, gets up to 34px and the border is not covered.

The simplified HTML is this:

<style>
    #container {
        padding:0px;
        margin:0px;
        height:30px;
        border-bottom:#000 2px solid;
        background-color:#ccc;width:780px
    }
    #list {
        padding:0px;
        margin:0px;
        height:100%;
        float:left;
        background-color:#CCFFFF
        list-style-type:none;
    }
    #list li {
        float:left;
    }
    .selected_item {
        height:30px;
        *height:32px;
        border-bottom:#FFF 2px solid;
        background-color:#FFCCFF
    }
    .nonselected_item {
        height:28px;
    }
</style>
    <div id="container">

            <ul id="list">
                <li class="selected_item">First item</li>
                <li class="nonselected_item">Second item</li>
            </ul>

    </div>

Any ideas? Thanks in advance. Andrea.

Answer 1

With a Quirks DOCTYPE, you are asking IE to pretend it is IE6 (more-or-less). If it is truly an immutable DOCTYPE, then you either have to code to IE6 quirks and proper markup as a decade of webslingers have had to or find some way to tell IE8 to never respect Quirks.

Engineering is about tradeoffs; yeah, I understand that you may not be able to change that one word in that mission critical page and that it will cost you immense effort to code to browser standards from 2001, but if those are the constraints, so it goes.

Answer 2

Try adding position:absolute to #list

Answer 3

first line, no type defined, try <style type='text/css'>

on the 7th line you missed a semicolon after width background-color:#ccc;width:780px

try adding max-height:32px; to #list li

Answer 4

Thank you for your answer Alohci, that did the trick!

MSW, thank you for your answer too, but this application is used by about 5 thousand users a day, along 40 productive websites that run on the same code, and we should upload and test about 2 thousand pages in order to change doctype. AND... we don't have this kind of CSS problems often because structure doesn't change ofte. We may have one or two of this ones a year, so the effort to change doctype is not justified right now. We'll change it the day that we need to implement a change that affects all 40 websites and cannot be achieved otherwise.