Question

I’m designing a clean style to use in some web apps. And I’ve come across a IE bug (always the same).

Well its pretty simple. I have a gradient background, and on top of it a rectangle with no border and its filled with nothing and with a shadow around it, giving the illusion that its on top of the background, as you can see in the snapshot.

Its displayed well in all browsers except IE. IE displays like this.

---

IE increases about 4 px to the top div with the class “content-top-shadow”. And it shouldn’t. I have used margin and padding 0 to fix it and no luck.

PS: The png’s have transparency.

Any idea how can i fix this bug, or whats wrong in the CSS?

Thanks.

Here is the code:

HTML

    <div class="content-holder">
        <div class="content-center">
            <div class="content-top-shadow"></div>
            <div class="content-center-holder"></div>
            <div class="content-bottom-shadow"></div>
        </div>
    </div>

CSS

.content-holder {
    width: 100%;
    height: 570px; /*once complete change to auto*/
    background-image: url(images/content-holder-bg.png);
    background-repeat: repeat-x;
    padding-top: 20px;
    text-align: center; /*IE Bug Fix to Center the other divs inside this one*/
}
.content-center {
    width: 918px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}
.content-top-shadow {
    width: 918px;
    height: 9px;
    background-image: url(images/content-top-shadow-bg.png);
    background-repeat: no-repeat;
}
.content-center-holder {
    width: 918px;
    height: 200px; /*once complete change to auto*/
    background-image: url(images/content-center-holder-bg.png);
    background-repeat: repeat-y;
}
.content-bottom-shadow {
    width: 918px;
    height: 9px;
    background-image: url(images/content-bottom-shadow-bg.png);
    background-repeat: no-repeat;
}

Answer 1

IE thinks your div should be bigger than 9px, because of text size, even if there is no text in it (!), so you need to set

font-size:1px;

or something like that, on the top and bottom divs.