How do you make a <div> less than 13 pixels in IE6?

Question

How to make DIV very short in IE6? Regardless of whether I use 0.3em or 3px, IE6 forces a minimum of 13px.

IE6

Firefox 3.6.13 (looks pretty 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 displays a progress bar of the file at appropriate times and updates the file fill when playing a movie. But this error is not a JS problem, so I will not post JS code.

Answer 1

Turns out I was a bit confused about this:

Just do:

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

---

IE6, #fileProgressBar, font-size: 3px. . , - , , CSS hack (, , ), IE6 :

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

, .