Question

How do you make DIVs very short in IE6? No matter if I use 0.3em or 3px, IE6 forces a minimum of 13px.

IE6

Firefox 3.6.13 (looks quite similar in all other modern browsers)

HTML

<div id="fileProgressBar" style="display:none">
    <div id="fileProgressFill"></div>
</div>

CSS

#fileProgressBar {
    height: 0.3em;
    background: #444;
    background: -moz-linear-gradient(
        top,
        #333,
        #666
    );
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, #333),
        color-stop(1, #666)
    );
    border-top: 1px solid #000;
}

    #fileProgressFill {
        height: 100%;
        width: 0;
        background: #0088cc;
        background: -moz-linear-gradient(
            top,
            #0099e5,
            #006699
        );
        background: -webkit-gradient(
            linear,
            left top,
            left bottom,
            color-stop(0, #0099e5),
            color-stop(1, #006699)
        );
    }

Javascript

Javascript reveals the file progress bar at appropriate times and updates the file progress fill as the movie is playing. But this bug is not a JS issue, so I won’t post the JS code.

Answer 1

Turns out I was overcomplicating this a bit:

Just do:

#fileProgressBar {
    height: 3px;
    font-size: 0;
    ..
}

---

To fix it in IE6, to #fileProgressBar, add font-size: 3px. However, this makes it look wrong in normal browsers. So, the easiest way is fix it is to either apply that style in a conditional comment, or to add it like this, using a CSS hack (which fortunately does validate) so only IE6 can see it:

* html #fileProgressBar {
    font-size: 3px
}

I’m going to see if there’s a neater way to fix this.