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;
}