IE8: min-height, background, margin, padding BUG

Take a look at the following page:

http://www.pudgywebguy.com/pwgcomputersbeta/index.php/customize/1

If you view the page in FF3.6.3, Opera 9.64, or Safari 4.0.2, you will see a normal right-floated div with a yellow background. In IE8, you see that yellow div double the height it should be, repeating the background image.

The settings for this div are:


#rightbar {
width:300px;
min-height: 480px;
float:right;
color: #444;
padding: 10px;
margin: 19px 1px 1px 20px;
background-color: #555;
background-image: url("../img/price_box_bg.png");
background-repeat: no-repeat;
background-position: center top;
}


Developer tools shows me the height of the div is 1020px, double what it should be.

If I remove the min-height setting, the height of the div shrinks up, but it still too long and shows the margins (bottom then top) and then about 15 pixels of the background image again. The same thing happens when I remove the background image settings; it shows 15 pixels of the background color.

I am finally able to get a normal div (no bugs) only by removing the min-height and the margin settings.

I have no idea what's going on with this and an Google search didn't give me the answer... any ideas?

Its not a bug. You never closed your rightbar div. Also a meta element should go in the head tags. I see what you are trying to do but <noscript> shouldn't go in the head tags either.

Gah thanks, I'm embarrassed to miss the obvious. There was actually a </div> for the rightbar (I checked that a thousand times because the goofiness just looked like an unclosed div) but the real problem was my <form> and </form> tags were overlapping wrong (<form> was inside leftbar and </form> was inside its sibling rightbar) and that was absolutely the problem. I kept thinking I need to run the validator on the page but never at the right moment I guess.

Anyways thanks for pointing in the right direction!