|
| |
|
|
FlowerPower
Posts: 67
Joined: 4/27/2004
Status: offline
 |
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!
|
|
|
|
Tailslide
Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: won't work in Firefox - 7/14/2005 3:42:52
You could do away with the #background div and put the background image on the body element - just fiddle with the positioning till you get it where you want:
body {
font-family: verdana, helvetica, arial, sans-serif;
background-color: #fff;
color: #666;
margin: 0px;
padding: 0;
background-image: url(images/background_feathered.gif);
background-repeat: no-repeat;
background-position: center center;
}
You can fiddle with the background-position using %s if you don't want it dead centre.
Edit: tried this and it does put the background image dead centre behind whatever you've got there.
< Message edited by Tailslide -- 7/14/2005 3:57:00 >
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Tailslide
Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: won't work in Firefox - 7/14/2005 4:20:47
Don't worry about it - everyone does it. You get a sudden thought "oh wouldn't it be nice if..." and then 3 hours later your site doesn't work and you can't remember how it ever did!
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
Looks so simple, now that you've shown me. I think I got on that track because I initially wanted that image centered vertically as well. I then later on changed my mind about that but didn't realize that I no longer needed to use the center as the starting point for positioning the image. 