Layers and rollover issues

Layers Issue

Site URL: http://www.further-flight.co.uk/20080820index.php

I am attempting to position the banner text over the top of the black space next to the racing image, but the z-index css is not having the right affect. Would someone be able to advise where I am going wrong with this, please?

CSS code so far:

/*------  BASIC LAYOUT  ------*/

#secondary{
	margin: 0px 0px 0px 0px;
	width: 100%;
	height: 15px;
	font: 0.7em arial, verdana, sans-serif;
	background-color: #494949;
	padding: 5px 0px 5px 0px;
	text-indent: 20px;
}

#logo{
	width: 100%;
	height: 80px;
	font-family: arial, verdana, sans-serif;
	font-size: 80%;
	background-color: #000000;
	z-index: 1;
}

#header{
	text-align: right;
	z-index: 2;
}

#footer{

	background: url(/images/footer.png) repeat-x;
	text-align: center;
	padding: 10px 0;
	font: bold 0.8em arial, verdana, sans-serif;
	text-align: center;
	color: #FFFFFF;
	border: 1px solid #000000;
}





/*------  ELEMENTS AND TAGS  ------*/

a:link {
	color: white;
	text-decoration:none;
}

a:visited {
	color: silver;
	text-decoration:none;
}

a:active {
	background-color: yellow;
	text-decoration:none;
}

a:hover {
	color:silver;
	text-decoration:bold;
}

body {
	background-image: url("/images/20080820_back1.png");
	background-repeat: repeat;
}

h1	{
	color: #FFFFFF;
		font: 2em arial, verdana, sans-serif;
}

h2	{
	color: #FFFFFF;
		font: 1.2em arial, verdana, sans-serif;
}

Rollover Issue

The code I have for the secondary menu (top, grey area) works fine in IE but not FF. The links should be white, turning silver to hover and visited. Firefox is showing the links as silver, but doesn't change upon roll over. The roll overs in my main navigation system work OK. Any advice?

CSS code:

/*------  ELEMENTS AND TAGS  ------*/

a:link {
	color: white;
	text-decoration:none;
}

a:visited {
	color: silver;
	text-decoration:none;
}

a:active {
	background-color: yellow;
	text-decoration:none;
}

a:hover {
	color:silver;
	text-decoration:bold;
}

body {
	background-image: url("/images/20080820_back1.png");
	background-repeat: repeat;
}

h1	{
	color: #FFFFFF;
		font: 2em arial, verdana, sans-serif;
}

h2	{
	color: #FFFFFF;
		font: 1.2em arial, verdana, sans-serif;
}

[mike_g]

Apparently when using z-index you are meant to specify an absolute position, but it also works with a relative position. Maybe try:

#logo{
        position: absolute;
	width: 100%;
	height: 80px;
	font-family: arial, verdana, sans-serif;
	font-size: 80%;
	background-color: #000000;
	z-index: 1;
}

#header{
        position: absolute;
	text-align: right;
	z-index: 2;
}

The display will probably be mangled, but your z-indexing should at least work. If you need to reposition your divs to make it look right specify offsets using top and left. If if absolute [positioning wont work have a go at using relative positioning.

Cheers.

Many thanks, a step closer, as you can see from my previous link. The issue remaining with the layers is that I have a positioning difference: the text is central in Firefox, but too high (overlapping the grey/black bands) in IE.

Is there an effective way of dealing with this?

[MidiMagic]

There are several problems with layers, and problems in your styles:

- With layers, the mouse position operations should work on just the top layer. Even though the top layer might be transparent, mouse detection and control devices located under the top layer can't get focus or see the mouse. What you want is the equivalent of clicking on one Windows window and expecting to work a button on a window under it.

Z-index is not well implemented yet.

There are problems with your styles. e.g.:

#secondary{
	margin: 0px 0px 0px 0px;
	width: 100%;
	height: 15px;
	font: 0.7em arial, verdana, sans-serif;
	background-color: #494949;
	padding: 5px 0px 5px 0px;
	text-indent: 20px;
}

You have 0px in your styles. 0 must NOT have a unit of measure. Firefox cancels the whole style if it encounters a 0 with a unit of measure, such as 0px, 0pt, 0em, 0%. Remove the units of measure on 0 values. Like this:

#secondary{
	margin: 0;
	width: 100%;
	height: 15px;
	font: 0.7em arial, verdana, sans-serif;
	background-color: #494949;
	padding: 5px 0 5px 0;
	text-indent: 20px;
}

You have size styles (height, width) and nonzero surrounding styles in the same style or tag. This causes the noncompliant IE to behave very differently from the other browsers that follow the standards.

It is better to use a relative size, such as points, ems, or percent, rather than the absolute pixels. Then the page doesn't change so much with a change in screen resolution.