|
FlowerPower -> won't work in Firefox (7/13/2005 23:34:51)
|
Hi, I've been working on a page where I want a vertically centered navigation bar, an image behind it (z-index: -1), a heading up in the right-hand corner and a footer at the bottom of a page. I had some stuff half working last night, but decided to redo it this morning with a simpler approach. I used the code at http://www.wpdfd.com/editorial/thebox/deadcentre4.html as a starting point, but unlike that page, mine only works in IE, not Firefox (I haven't tested in Netscape or Opera yet). The part that isn't working is the background image (it doesn't display).
Can anyone spot at a glance where I'm on the wrong track?
Here is the style sheet code (apologies for the length):
body {
font-family: verdana, helvetica, arial, sans-serif;
background-color: #fff;
color: #666;
margin: 0px;
padding: 0;
}
a {
color: #fff;
text-decoration: none;
}
a:hover {
color: #ff3;
text-decoration: none;
}
/* ##### HEADER ##### */
#header {
font-size: 20px;
font-weight: bold;
position: absolute;
right: 8%;
top: 8%;
visibility: visible;
}
/* ##### HORIZON: STARTING POINT FOR VERTICAL CENTERING ##### */
#horizon {
background-color: #fff;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: visible;
display: block;
}
/* ##### BACKGROUND IMAGE ##### */
#background {
background-image: url('images/background_feathered.gif');
background-repeat: no-repeat;
z-index: -1;
position: absolute;
visibility: visible;
width: 400px;
height: 332px;
top: -150px;
left: 5%;
}
/* ##### NAVIGATION BAR ##### */
#navbar {
position: absolute;
top: -20px;
width: 100%;
height: 40px;
background-image: url('images/frontbar2_bg.gif');
background-repeat: repeat-y;
text-align: center;
color: #fff;
visibility: visible;
display: block;
font-size: 14px;
font-weight: bold;
text-decoration: none;
margin: 0;
padding: 1ex 20px;
border-style: solid;
border-top-width: 2px;
border-bottom-width: 2px;
border-left-width: 0px;
border-right-width: 0px;
border-color: #000;
}
/* ##### FOOTER ##### */
#footer
{
font-size: 80%;
font-family: Verdana, Geneva, Arial, sans-serif;
text-align: center;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 20px;
visibility: visible;
display: block
}
and here the html
<body>
<div id="header">heading</div>
<div id="horizon">
<div id="background"></div>
<div id="navbar">
<a href="http://www.google.com">item 1</a> |
<a href="http://www.google.com">item 2</a> |
<a href="http://www.google.com">item 3</a> |
<a href="http://www.google.com">item 4</a>
<!-- end of navbar section--></div>
<!-- end of horizon section--></div>
<div id="footer">Footer</div>
</body>
Thanks for any input!
|
|
|
|
