[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?

[dgreenhouse]

I don't know that module, but it sounds like a z-index issue.
FF3 has had z-index issues that show up in weird ways just like this.

Have you attempted using firebug to triangulate onto the problem?

I assume the "nounder" class selector is an "Always on top" idiom.
(Probably via z-index somewhere in a mass of css)

Joomla and others are notorious for really, really convoluted code.

Although I actually do like Joomla's architectural design, it drives me crazy!

Just looking at the code you posted drives me nuts.

It should be really simple - even though it's getting emitted using MVC.

div over div and no more - KISS...

plus the indenting is a nightmare! (although that's really a php emitting issue and tabs most of the time)

I know it's not your fault, I'm just venting over buggy & ugly code we all have to contend with!

[Andy-G]

Thanks for your reply!

After you mentioned z-index, I hunted around google and found some answers.

Putting "z-index: 999;" in the CSS file seems to have done the trick! I can now see the logo and search box sitting on top of the header image!

Code:

}

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

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

Thanks for your help.

[dgreenhouse]

Glad you got it going!

[joosen]

Normally i dont go trough the registry process just to post a reply.

But that 'z-index: 999;' made my day

Many thanks dgreenhouse!!!