CODEWITHSUNDEEP
cssinternet-explorerbackground-image
grandcameo
grandcameo

Reputation: 185

Internet Explorer Hell With Background Images

I'd consider myself an advanced web developer but I'm pretty stumped as to what I'm doing to cause Internet Explorer to show my background image on a header tag in one place but not in another place with the exact same code.

I think my eyes have been looking at this site and code for too long to have anything pop out at me, so as a last resort, I'm reaching out here.

The staged site can be found here: http://honestagency.com/websites/hal10/

The problem is that in the box under the "Procedures" box on the home page, there should be a green banner showing across from the "Meet The Doctors" banner. The "Meet The Doctors" banner uses near identical CSS code.

.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;}

The HTML respectively is:

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

I its probably a really easy solution but I'm super stumped. Thanks for the help!

Upvotes: 2

Views: 249

Answers (1)

scrappedcola
scrappedcola

Reputation: 10572

Try adding a z-index on the .living_healthy_fold class.

.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;
}

Might not solve though as changing the dom in the developer tools seems to fix the issue so it's hard to find the right solution.

Upvotes: 2

Related Questions