[Andy-G]

Hi, I'm having a problem with the header on my website in firefox 3 and chrome.

I'm using the header image module for Joomla

extensions.joomla.org/extensions/156/details

This randomly generates images from a folder on the server using javascript. My logo is sitting on top of the 'changing' header image on the left, using CSS to positition it and the search box has been allocated a module position and sits on the right hand side, again over the 'changing' header image.

This is working perfectly in ie6, ie7 and firefox 2 but for some reason in firefox 3 and chrome, the 'changing' header image appears to be sitting on top of my logo an search box, when the page firsts loads I can see the logo for a second and then it dissapears behind the image!

This is the code out of the index file for the template

Code:

<div id="masthead">
									  <?php mosLoadModules ( 'header', -2 ); ?>
									  <div id="logoposition"><a href="<?php echo $mosConfig_live_site;?>" class="nounder"></a>
									    <table width="222" border="0">
                                          <tr>
                                            <td><a href="<?php echo $mosConfig_live_site;?>" class="nounder"><img src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/images/blank.gif" style="border:0;" alt="" id="logo" /></a>                                              <?php mosLoadModules('banner', -1); ?></td>
                                          </tr>
                                        </table>
									  </div>
										<div id="mod-top">
											<div class="top-padding">
												<?php mosLoadModules('top', -1); ?>
											</div>
										</div>
								  </div>

This is from the CSS file

Code:

}

#masthead {
	height: 111px;
	position: relative;
	
}


#logo {
	width: 222px;
	height: 61px;
	margin-top: 22px;
	margin-left: 18px;

}


div#logoposition {
	top: 2px;
	right: 440px;
	position: absolute;
	width: 468px;
	height: 60px;
	
}

div#mod-top {
	top: 10px;
	right: 10px;
	width: 160px;
	height: 90px;
	overflow: hidden;
	position: absolute;
}

Server info:

Operating system: Linux
PHP Version: 5.2.4
Web Server: Apache
Joomla! Version: Joomla! 1.0.15 Stable


I would really appreciate it if someone could tell me what I've done wrong or point me in the right direction?