markup/ css background graphic problem with IE6 and 7

Question

I have a UI problem with some CSS that I was hoping to get some help with.

I have a div that has a background graphic (curved top edge image) that is causing me a problem. Within this div I have lots of other divs for headings and general content.

My code works in FireFox but not in IE 6 and 7. I have another background graphic that I need placing to the right, over the main background graphic but Im failing to get this working in IE6/7! it works in IE8

you can see my problem here, with IE the width of the curved red edge causes the content area width to be smaller. Firefox example (FF.jpg) is correct, the content area is full width.

• http://www.jamesradford.net/images/IE6.jpg
• http://www.jamesradford.net/images/FF.jpg

markup below:

<div class="RedCorner"></div>
<div class="header"></div>
<div class="tab-content">

css below:

.RedCorner {
    float: right;
    background-image: url(/red_rounded.gif);
    background-repeat: no-repeat;
    margin-right: -25px;
    margin-top: 1px;
    width: 140px;
    height: 40px;
}

Any suggestions? Many thanks as always, James

Answer 1

The reason this is happening is because IE has something called the double margin bug . Try using absolute positioning instead, firstly ensure the parent of .RedCorner has:

position: relative;

Then:

.RedCorner {
    position: absolute;
    top: 0;
    right: 0;
    width: 140px;
    height: 40px;
    background-image: url(/red_rounded.gif);
    background-repeat: no-repeat;
}