CSS Question
- Started
- Last post
- 6 Responses
- kbags
I stink. I'm hacking through a CSS wordpress page and have run into trouble with the NAV and FOOTER.
Nav needs a background image positioned flush with the bottom of the nav bar, and footer needs to have a white background. Got them to work in Firefox yesterday but had IE compatability issues. Can someone kindly help me? Thanks in advance!
LINK: http://bravealliance.org/beta/
/*******************************...
* Navbar
********************************...
#nav {
font:12px helvetica, arial, sans-serif;
font-style:light;
font-weight:light;
color: #FFFFFF;
text-align: left;
margin: -185px 0px 175px -10px;
height: 45px;
width: 980px;
}#nav ul {
margin: 0px 0px 0px 0px;
padding: 0px;
}#nav li {
display: inline;
font-weight:light;
margin:10px 5px 10px 10px;
}#nav a:link, #nav a:visited { color:#FFFFFF; text-decoration:none; }
#nav a:hover, #nav a:active {
background: url("images/menu_over.png") no-repeat center;
background-position: 5px 0px 7px 0px;
height: 45px;
display: inline;
color:#FFFFFF;
text-decoration:none;
}/*******************************...
* Footer
********************************...#footer {
background-color: #FFFFFF;
width: 100%;
height: 40px;
margin: 100px 0 0 0;
padding: 0 0 10px 0;
float: left;
text-align: left;
line-height: 14px;
font:11px/18px helvetica, arial, sans-serif;
}#footer p {
background: url("images/bravecopyright.gif") no-repeat;
color: #cd007a;
background-color: #FFFFFF;
margin:10px 0px 10px 0px;
padding: 13px 0 20px 0;
width: 100%
height: 40px;
}#footer a:link, #footer a:visited { color:#ED037C; }
#footer a:hover, #footer a:active { color:#ED037C; }
- trooperbill0
background-position: 0 100%
???
- brandelec0
i think you can remove the float:left on your #footer
- jasonistaken0
You need to either add a clearing block inside #wrap, or add overflow: auto to it.
- kbags0
thanks everyone. still not having much luck, thinking the issues are related to:
Nav - background image placement positioning...I'm doing some funky hack stuff with the nav, and something's not jiving with background-position.
footer - looks right in firefox, where footer stretches 100% across and snaps to bottom of browser. But in IE it displays as a white rectangle?
- voiceof0
how about background-position: left bottom; and put it in #footer not #footer p
- Juddly0
Try
NAV
background: url("images/menu_over.png") no-repeat 5px 0px 7px 0px; (without background-position)FOOTER
background: url("images/bravecopyright.gif") no-repeat #fff;
(without the background-color)You can't have 'background' - which contains background-image, background-repeat, background-attachment, background-colour, etc. WITH one of those selectors, one will cancel out the other.