Проблема с фоновой графикой разметки / CSS в IE6 и 7

Question

У меня проблема с пользовательским интерфейсом с некоторыми CSS, с которыми я надеялся получить помощь.

У меня есть div с фоновой графикой (изображение изогнутого верхнего края), которая вызывает у меня проблему. В этом div у меня есть много других div для заголовков и общего содержания.

Мой код работает в FireFox, но не в IE 6 и 7. У меня есть другой фоновый рисунок, который мне нужно поместить справа, поверх основного фонового изображения, но мне не удается заставить его работать в IE6 / 7! это работает в IE8

Вы можете увидеть мою проблему здесь, в IE ширина изогнутого красного края приводит к уменьшению ширины области содержимого. Пример Firefox (FF.jpg) верный, область содержимого на всю ширину.

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

Разметка ниже:

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

css ниже:

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

Есть предложения? Большое спасибо, как всегда, Джеймс

Answer 1

Причина, по которой это происходит, в том, что в IE есть то, что называется ошибка с двойным полем .Попробуйте вместо этого использовать абсолютное позиционирование, сначала убедитесь, что родительский элемент .RedCorner имеет:

position: relative;

Затем:

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