Наведите курсор на миниатюры с абсолютной позицией в IE

Question

Я создал сетку миниатюрных изображений, при наведении на них изображение исчезает, а цвет блока отображается с заголовком изображения.но в Internet Explorer вместо изображений и текста, появляющихся в пределах установленного ими места для миниатюр, они все ограничены в левом углу.

Изображение и заголовок хранятся в блоке box / category-widescreen div, это динамическийкод для wordpress.

Есть идеи?

#page-wrap {width: 1060px; padding-bottom: 40px;}
.box { margin: 20px; float: left; }

.category-widescreen { width: 400px; height: 229px; background: #FF0000; }
.category-widescreen a{text-decoration: none;}
.category-widescreen h1{font-size: 30px; color: #FFF; line-height: 34px;}
.category-widescreen h2{font-size: 26px; color: #FFF;  line-height: 30px;}

.title{position:absolute; top:14px; left:14px; z-index: 0; padding-right: 14px;}

.category-widescreen img { max-width: 400px; max-height: 229px; float: right; padding: 0 0 2px 10px; z-index:1; position:relative;}

Спасибо за любую помощь!

Answer 1

Вам необходимо установить position:relative для ваших сообщений, чтобы абсолютно позиционированные элементы знали, куда следовать.

Попробуйте это:

.post {
position:relative;
}

Answer 2

Слишком расплывчато! Как предлагает другой парень, дать основную структуру HTML. Однако некоторые наблюдения:
Разве размеры шрифта не слишком велики (30 и 26 пикселей)?
Название {позицию: абсолютная; ...} .... убедитесь, что родительский стиль имеет позицию: относительный, иначе это станет беспорядком; как насчет плавания? Вы уверены, что все движется в правильном направлении?

Надежда помогла или, по крайней мере, открыла глаза широко открытыми! ха ха ха ...