Hi All

Hoping someone will be able to help me out. I'm not too experienced with CSS and especially the differences between IE and FF etc.

I have the following site under dev: PlayLocal.co.uk , trouble is the header bg image will not show properly in IE. It only shows part of the image. Works fine in FF.

Here's my CSS for the header:

img { border: 0; }
ol, ul, dl { position: relative; }

#header {
position: relative;
padding: 1em 0 0 0;
margin: 0px;
background: url('header.gif') top right no-repeat;
}

#header img {
margin: 0 0.75em 0 1em;
float: left;

The PHP template calls the header here:

<div id="header">
<?php print $search_box ?>
<?php if ($logo) : ?>
<a href="<?php print url() ?>" title="Index Page"><img src="<?php print($logo) ?>" alt="Logo" /></a>
<?php endif; ?>
<?php if ($site_name) : ?>
<h1 id="site-name"><a href="<?php print url() ?>" title="Index Page"><?php print($site_name) ?></a></h1>
<?php endif;?>
<?php if ($site_slogan) : ?>
<span id="site-slogan"><?php print($site_slogan) ?></span>
<?php endif;?>
<br class="clear" />
<?php print $header ?>
</div>


Any help is appreciated.

Scott
P.S Have been searching and visiting the site for a while but have not been able to find the answer.

Are you setting a height and width in the HTML on the images in the header ?

On your #header, give it a height equal to the height of the graphic you're using for the background:

#header{
height: 38px;
}

LadynRed,

Thanks so much, that's worked. I appreciate your help

All the best
Scott