IE isn't spacing my divs properly

[Curtis Rutland]

OK, I'm sure this is probably me just being a noob to CSS, but I'm running into a problem. I'm using images to give the appearances of rounded corners to a div, but for some reason, IE7 is still putting some space between the "mainContent" div and the "capBottom" div. Firefox and Opera render it the way I want.

Here's an image of what's wrong:

Here's what it looks like in Firefox:

Heres the HTML:

<div id="container">
    <div id="nav">
        <div id="navBanner">
            <asp:Image ID="longLogo" runat="server" ImageUrl="~/images/banner.png" />
        </div>
        Links will go here
    </div>
    <div id="content">
        <div id="right">
            <div id="capTop">
                <asp:Image ID="imgCapTop" runat="server" ImageUrl="~/images/roundCapTop.png" />
            </div>
            <div id="mainContent">
                Content will go here
            </div>
            <div id="capBottom">
                <asp:Image ID="Image1" runat="server" ImageUrl="~/images/roundCapBottom.png" />
            </div>
        </div>
    </div>
</div>
 

Here's the stylesheet:

body
{
    font-family: Calibri;
    background-color: #d4d5d5;
    background-image: url( '../images/backgrad.jpg' );
    background-repeat: repeat-x;
}
 
#right
{
    float: left;
    width: 770px;
    min-height: 600px;
    padding-left: 15px;
    padding-right: 15px;
    background-color: Transparent;
    display: inline;
}
#nav
{
    font-size: 13px;
    height: 100px;
    text-align: center;
    width: 788px;
    background-color: transparent;
    margin-bottom: 20px;
}
#navBanner
{
    text-align: right;
}
#container
{
    clear: both;
    margin-top: 15px;
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}
#content
{
    clear: both;
    margin-top: 15px;
    width: 800px;
}
#capTop
{
    width: 770px;
    height: 12px;
    background-color: Transparent;
    margin-bottom: 0px;
}
#capBottom
{
    margin-top: 0px;
    width: 770px;
    height: 12px;
    background-color: Transparent;
}
#mainContent
{
    margin-top: 0px;
    background-color: White;
    margin-bottom: 0px;
    width: 770px;
    min-height: 550px;
}
 

So what am I doing wrong? Is there some IE specific stuff I need, or am I just missing something?

[drhowarddrfine]

Yes, this is an IE-bug bug I need a minute to try and remember how to fix it.

[drhowarddrfine]

I was trying to find my rounded corner images to emulate your markup but can't get to them. There are 2 possibilities but I can't test them. All are IE bugs. (Man, I'm starting to forget some things while I'm off doing C-coding.)

1) Make sure there is no whitespace between the end of the <img> tag and the next tag.

2) See if making margins/padding of the image and/or its container have bottoms set to 0.

EDIT: Also, try setting the <img> to 'display:block'

[Curtis Rutland]

1) Make sure there is no whitespace between the end of the <img> tag and the next tag. '

OK, seriously. That is a ridiculous bug! Why should whitespace affect the markup!

But this was the solution. Thanks a whole lot.

[drhowarddrfine]

Because all versions of IE are the worst browsers on the planet with no relief in sight.

[Curtis Rutland]

Oh, I know. I just remember from the very first lesson in HTML that I got was that whitespace didn't matter...and then I find this ridiculous bug 8 years later ='(