IE6 positioning issue

Question

It works as intended in Safari, Firefox etc. But it is not reading the positioning or z-index in IE6. How can I make it layout as it should in IE6?

Here is the CSS:

.AuthorName_Pic {
    width: 186px;
    position: absolute;
    right: 0;
    bottom: -120px;
    padding: 20px 10px 20px 15px;
    margin: 20px 0 0 0;
    background: url(images/ThumbDark.jpg) no-repeat;
    z-index:100;
}

Answer 1

You'll need to address the box model bug . I would use Tantek's solution .

Answer 2

1. Ensure you are using Standards Mode not Quirks, otherwise the meaning of 'width' and 'height' is different in IE to other browsers. This is the box model bug as mentioned by Josh, but you don't want to be using a Box Model Hack in this day and age (especially not Tantek's original-and-still-the-worst ugly one). BMHs were needed for IE5 but today are dead and buried, as Standards Mode fixes that issue and a lot more.

2. You say the z-index is wrong in some way. There isn't enough information to say for sure since you have only posted a small part of your code, but a common source of this problem is that IE sets a default 'z-index' stacking context on any element you give a 'position' (relative/absolute) even when you don't include the z-index attribute. Ensure all the elements you have positioned are also z-indexed to ensure consistent layout cross-browser.