Internet Explorer Hell с фоновыми изображениями

Question

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

Я думаю, что мои глаза смотрели на этот сайт и долгое время на козырек, чтобы что-нибудь выскочить на меня, так что, в крайнем случае, я тянусь сюда.

Поэтапный сайт можно найти здесь: http://honestagency.com/websites/hal10/

Проблема заключается в том, что в поле под «Процедуры» поле на домашней странице, должно быть зеленое знамя, показывая через дорогу от «Meet The Doctors» баннер. Баннер «Meet the Doctors» использует почти идентичный код CSS.

.home_content div.left div.living_healthy h1.living_healthy_fold{background-image:url('../images/folds/living_healthy.png');position:absolute;left:-16px;top:20px;width:448px;height:76px;text-indent:-5000px;}  
.home_content div.right div.meet_doctors h1.meet_doctors_fold{background-image:url('../images/folds/meet_doctors.png');position:absolute;right:-16px;top:20px;width:394px;height:76px;text-indent:-5000px;} 

HTML, соответственно является:

<h1 class="living_healthy_fold">Living Healthy</h1> 
<h1 class="meet_doctors_fold">Meet The Doctors</h1> 

я его, вероятно, очень простое решение, но я супер тупик. Спасибо за помощь!

Answer 1

Попробуйте добавить z-индекс в класс .living_healthy_fold.

.home_content div.left div.living_healthy h1.living_healthy_fold{ 
    background-image:url('../images/folds/living_healthy.png'); 
    position:absolute; 
    left:-16px; 
    top:20px; 
    width:448px; 
    height:76px; 
    text-indent:-5000px; 
    z-index:10; 
} 

Может не решить, хотя, как изменение РВА инструментов разработчика, кажется, исправить эту проблему, так что трудно найти правильное решение.