Navoff
|
I'm working on a website (not yet available publicly) where one page doesn't have the banner image displaying and only for IE9. I created the site for a Drupal installation and noticed that when IE renders pages from the website, it embeds the css for the header region in the page itself rather than pull it from the css file (even when I created an IE9 specific stylesheet). On the one page that doesn't display the header, that css is missing from t he xml tag.
The header is defined in the page.tpl.php as:
<header class="tekno-header"><?php if (!empty($art_header)) { echo render($art_header); } ?>
In Firefox, Chrome, Safari, and Opera, the page is rendered using the class and the css like this:
<header class="tekno-header">
And in the style.css file it's defined like this:
.tekno-header
{
margin:0 auto;
height: 350px;
background-image: url('images/object687997201.png'), url('images/header.png');
background-position: 391px -2px, 0 0;
background-repeat: no-repeat;
position: relative;
z-index: auto !important;
}
However, IE embeds the css in the webpage like this:
<header class="tekno-header" style="background-image: url("http://b2286-pc/drupal/sites/all/themes/teknotelecom/images/header.png"); background-position-x: 0px; background-position-y: 0px;" sizset="false" sizcache08585364685304422="255.0.0">
Except on one page where I don't get the background image at all. Instead, the code looks like this:
<header class="tekno-header" sizset="false" sizcache016483223334662061="201.0.0">
I can't for the life of me figure out why this one won't load the css for the background image. It's just a basic page with a webform. It's the only page that doesn't render. All I can figure is that for some reason, it isn't liking the code in the page.tpl.php.
Here are screen shots of two pages rendered in IE9 (the first is the way the header is suppose to look and the second the way it looks on the one page in IE9):
I'd appreciate any suggestions or ideas on how to fix this.
|