By slimproffy on

I used jpanze's modification of vivek's code snippet for header image, so as to different header images for different nodes. It worked out fine with I.E 6, but in I.E 7 and firefox I get the same result but also with a partial display of my web page and disappearance of my scroll bars, please what could be the problems.

Here is what I did

In my page.tpl.php file I found the particular DIV that referred to my Header Image, in my case it was

I pasted in Vivek's code and modified the output of the ifthen's to change the CSS selector - like this:

             if ($node->nid == 1) {
             print 'header-middle">';
             }elseif ($node->nid == 8){
             print 'header-middle2">';
             }elseif ($node->nid == 6){
             print 'header-middle3">';
             }elseif ($node->nid == 4){
             print 'header-middle4">';
             }else {
             print 'header-middle">';
             }

Then in my CSS file I found the particular .header-image tag which in my case was as follows:

.header-middle {width:900px; height:150px; background:rgb(230,230,230) url(../img/bg_head_middle.jpg); overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}

and copied it to create new ones pointing to each background image I wanted - as follows:

.header-middle {width:900px; height:150px; background:rgb(230,230,230) url(../img/bg_head_middle.jpg); overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}

.header-middle2 {width:900px; height:150px; background:rgb(230,230,230) url(../img/bg_head_middle2.jpg); overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}

.header-middle3 {width:900px; height:150px; background:rgb(230,230,230) url(../img/bg_head_middle3.jpg); overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}

.header-middle4 {width:900px; height:150px; background:rgb(230,230,230) url(../img/bg_head_middle4.jpg); overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}