css navigation - hover question

[sarah barrick]

Hi,

I have a question about css navigation. I have put a website together (see link below):

http://www.sitesbysarah.com/bailey/index.htm

I am trying to extend the hover link on the navigation in the far left and far right columns to cover the whole box when a person rolls over the link. right now all it highlights is the text in the box.

I have tried a couple different things, but just seem to mess up what I've already got.

I also am trying to get the dark blue header box in each nav column to stretch across the whole column, but so far all I've been able to accomplish is to make the whole column resize which messes everything else up.

Any suggestions?

Thanks,
Sarahb

[buildakicker]

Is this what you mean?

Here is your CSS code(backup your original):

/* CSS Document */

* {margin; 0; padding: 0; }

body {
margin: 0;
padding 0;
background: #006699;
}

#wrapper {
text-align: left;
width: 800px;
margin-right: auto;
margin-left: auto;
padding: 0 0 0 0 0;
}

a:link {
color: #ffffff;
text-decoration: none;
}

a:visited{color: #ffffff;}
a:hover{color: #D4E4FA;
text-decoration: underline;}



p {
font-family: Arial, sans-serif;
font-size: .9em;
padding: 0 20px;
color: #006699;
}




h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: #006699;
font-weight: bold;
padding: 0 0 0 15px;
}


#header {
background-image: url(images/NEW_HEADER_800px.jpg);
background-repeat: no-repeat;
background-position: top center;
height: 200px;
margin-top: 30px;
border-bottom: 20px solid #006699;

}

#content {
width: 386px;
margin: 10px 0 10px 201px;
padding: 20px 10px 0 0;
background-color: #D4E4FA;
background-image:url(images/content_bkgd_tile.gif);
background-repeat: repeat-y;
height: 880px;
font-family: Arial, sans-serif;
font-size: .9em;
line-height: 1.5;
}

 




 /*Navigation on left side in table */

#leftnav {
position: absolute;
margin-top: 10px;
margin-left: 102px;
width: 200px;
height: 900px;
background-image:url(images/navigation_bkgd_tile.gif);
background-repeat: repeat-y;
font-family: Arial, Helvetica, sans-serif;
font-size: .8em;
background-color: #6ba7eb;
}

#leftnav ul {
list-style: none;
margin-bottom: 10px;

}

#leftnav li {
margin-bottom: 10px;
border-bottom: 1px solid #fff;
}

#leftnav li a:link {
display: block;
padding-left 5px;
background-color: #6ba7eb;
color: #fff;
text-decoration: none;
}

#leftnav li a:hover {
background-color: #D4E4FA;
color: #006699;
font-weight: bold;

}

#leftnav_header
{
background:  #015A9E;
font-family: Arial, Helvetica, sans-serif;
font-size: .9em;
padding: 5px 5px;
margin-top: 10px;
margin-bottom: 5px;
color: #fff;
font-weight: bold;

}

 /*Navigation on right side straight css */

#rightnavcontainer {
position: absolute;
top: 260px;
left: 698px;
width: 200px;
height: 900px;
font-family: Arial, Helvetica, sans-serif;
font-size: .9em;
background-color: #6699ff;
   }


#rightnav {

padding: 0px;
margin: 0px;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: .9em;
}

#rightnav ul {
list-style: none;
margin: 0px;
padding: 0px;

}

#rightnav li {
margin-bottom:10px;
border-bottom: 1px solid #fff;
}

#rightnav li a {
display: block;
padding-left 5px;
background-color: #6699FF;
color: #fff;
text-decoration: none;
}

#rightnav li a:hover {
background-color: #D4E4FA;
color: #006699;
}

#rightnav_header
{

background:  #015A9E;
padding: 5px 10px;
margin-top: 10px;
margin-bottom: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: .9em;
color: #fff;
font-weight: bold;
}


 /*Navigation on download page */
 
 #downloadnav {
position: absolute;
top: 275px;
left: 320px;
width: 370px;
height: 700px;
font-family: Arial, Helvetica, sans-serif;
font-size: .8em;
background-color:  #D4E4FA;
}

#downloadnav ul {
list-style: none;
margin: 9px;


}

#downloadnav li {
margin: 0;
padding: 5px;
border-bottom: 1px solid #fff;


}

#downloadnav li a {
display: block;
padding-left: 10px;
background-color: #6699FF;
color: #fff;
text-decoration: none;
}

#downloadnav li a:hover {
background-color: #D4E4FA;
color: #006699;
font-weight: bold;

}

#register {
position: absolute;
width: 200px;
font-family: Arial, sans-serif;
font-size: .8em;
color: #fff;
top: 880px;
left: 720px;
}



#form {
position: absolute;
top: 990px;
left: 710px;
font-family: Arial, Helvetica, sans-serif;
font-size: .8em;
color: #fff;
font-weight: bold;

}

#corner_logo {
position: absolute;
top: 50px;
left: 644px;
}

#address {
position: absolute;
top: 237px;
left: 120px;
color: #fff;
font-family: Arial, sans-serif;
font-size: .7em;
font-weight: 700;

}

[buildakicker]

Oh, you can also use TEXT-INDENT: ; to get the text to move in some...

[sarah barrick]

Thanks for the help with the code!

I changed the code and it works perfectly in Firefox. But in IE, the left navigation column pushes over too far. My client uses IE so I need to figure out how to make it look right in both browsers.

Here is the link:

http://www.sitesbysarah.com/bailey/index2.htm

Any advice??

Thanks,
sarb

[Dan_A]

You should use valid html (http://validator.w3.org/check?verbos...y%2Findex2.htm ) and valid css.
You should control margins and paddings of lists.
Try
#leftnav ul , #leftnav ul li{margin:0;}
#leftnav ul li a {display:block;padding:5px 0;}

[akritic]

Sarah, if you're interested here's a site I found which looks over many different list-type navigation menus. It's worth looking over, I found it especially useful when trying to get a decent nav bar sorted for my project.

http://css.maxdesign.com.au/listamatic/

Andy