2 replies [Last post]
untangledweb
untangledweb's picture
Offline
newbie
Vancouver, Washington
Last seen: 13 years 28 weeks ago
Vancouver, Washington
Timezone: GMT-8
Joined: 2007-01-29
Posts: 8
Points: 0

Very rookie problem here, I'm sure (I'm coming around fairly late to CSS design). I'm attempting a rollover navigation bar. I want white text on blue buttons for the off state, blue text on white for rollover with a border around the button, and white space between the buttons in both states. I'm having two issues. 1) The shift in size and position on the rollover, and 2) creating the white space between the buttons. #1 is really the biggest problem, as I haven't wrestled with #2 quite as much. I'll provide the URL so you can see it in action and then the CSS. Also I've validated both the HTML and the CSS docs and have a proper DOCTYPE.
Thanks in advance for your help.

Bill K.

URL:
http://www.untangled-web.net/untangledweb_test02.html

CSS:

body {
text-align: center;
min-width: 750px;
font-family: geneva, 'Trebuchet MS', sans-serif;
font-size: 11px;
color: #000000;
background-color: #FFFFFF;
}
/*THIS IS THE CONTAINER WHERE WE'LL KEEP ALL THE CONTENT */
#container {
text-align: center;
width: 750px;
margin: 0px auto;
border: 1px solid #CCCCCC;
font-size: 11px;
line-height: 130%;
}
/* END O'CONTAINER */
#top {
text-align: center;
width: 750px;
}
#top h1
{
padding: 0;
margin: 0;
}
#leftnav {
text-align: left;
background-color: #FFFFFF;
font-size: 12px;
font-weight: bolder;
color: #000000;
float: left;
width: 150px;
display: block;
margin-left: 10px;
padding-left: 4px;
padding-top: 5px;
padding-bottom: 5px;
list-style-type: none;
}
#leftnav ul {
color: #FFFFFF;
background-color: #000066;
border: 1px solid #000066;
display: block;
margin-left: 10px;
padding-left: 4px;
padding-top: 5px;
padding-bottom: 5px;
list-style-type: none;
}
#leftnav li {
color: #FFFFFF;
background-color: #000066;
border: 1px solid #000066;
display: block;
padding-left: 4px;
padding-top: 5px;
padding-bottom: 5px;
list-style-type: none;
}
#lefnav a {
color: #000066;
background-color: #FFFFFF;
border: 1px solid #000066;
display: block;
padding-left: 4px;
padding-top: 5px;
padding-bottom: 5px;
list-style-type: none;
}
#leftnav a:hover {
color: #000066;
background-color: #FFFFFF;
border: 1px solid #000066;
display: block;
padding-left: 4px;
padding-top: 5px;
padding-bottom: 5px;
list-style-type: none;
}
#rightnav {
float: right;
width: 150px;
margin: 0;
padding: 1em;
}
#content
{
text-align:left;
margin-left: 175px;
border-left: 1px solid gray;
margin-right: 175px;
border-right: 1px solid gray;
padding: 1em;
}
#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}
#leftnav p, #rightnav p { margin: 0 0 1em 0; }
#content h1 {
margin: 0 0 .5em 0;
font-size: 14px;
}

* html body {
font-size: x-small; /* for IE5 Win */
f\ont-size: small; /* for other IE versions */
}
html>body {
font-size: x-small; /* be nice to opera */
}
p { font-size: 80%; padding: .4em 0; line-height: 1.8em; }
h1 { font-size: 175%; padding: 1em 0 .2em 0; }
h2 { font-size: 160%; padding: 1em 0 .2em 0; }
h3 { font-size: 140%; padding: 1em 0 .2em 0; }
ul, dl { font-size: 80%; padding: .5em 1em .5em 2em; }
ul li { line-height: 1.6em; }
img { border: 0; }

DanA
DanA's picture
Offline
Elder
Last seen: 11 years 5 days ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

#1 replace #lefnav a by

#1 replace #lefnav a by leftnav a

untangledweb
untangledweb's picture
Offline
newbie
Vancouver, Washington
Last seen: 13 years 28 weeks ago
Vancouver, Washington
Timezone: GMT-8
Joined: 2007-01-29
Posts: 8
Points: 0

Wow, for want of a "t"

Tiny but significant. Yes, that changes things. Good eye, DanA. Thank you!