Question : Navigation mouse over problem

It is one of those days...

How do I get the mouseover effect to fully fit within the border constraints. Right now it does not display on the right side. When I modify the padding, it jigs the navigation like crazy when you try and mouseover. Any yes, I know I have padding listing on a number of rows, it helps me to do it that way to try and get it to work. I then put it together on one line when looking good.

http://nsitedesigns.com/nsitedesigns/salentino/test.html

         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:

           
           
          #nav {width:846px;
background-color: #362650 ;
background-image:url(img/back_navigation.jpg);
background-repeat:repeat-y;
padding:5px 0px; /*height of nav bar*/

}

#nav ul {
	list-style: none ;
	display: inline ;
	font-size:1.1em;
	
	
}
#nav ul li {
	display: inline ;
	text-align: left ;
	list-style: none ;
	

}
#nav li a {
	color: #f7f1db ;
	text-decoration: none ;
	display: inline ;
margin-left:35px;
padding-left:0px;
	padding-top:6px;
	padding-bottom:5px;
	padding-right:35px;
	border-right:1px solid #f7f1db;
}
#nav li a:hover {
	color: #362650 ;
	background-color: #99b069 ;
	padding-left:0px;
	padding-top:6px;
	padding-bottom:5px;
	padding-right:35px;
	margin-left:35px;
	 }

           
         

Attachments:

button.jpg (92 KB) (File Type Details)

goofy button

Answer : Navigation mouse over problem

Hi nsitedesigns,
There are several things that needs to be changed / adjusted.
You won't be able to get rid of the left space because the list items are display:inline, they would have to be floated to get them fully adjacent, but floating would ruin the middle alignment, so then we need to manually adjust the left padding for the UL.

Also the left border is not the same height because the elements are not the same height.

I've also noticed that there's an extra pixel in the header's height as well.

Try replacing your matching CSS classes with the ones below and check how it goes.

Cheers

                       
         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:

           
           
             #nav {
background-color:#362650;
background-image:url("img/back_navigation.jpg");
background-repeat:repeat-y;
display:inline-block;
overflow:hidden;
padding-left:55px;
width:791px;
}

.twoColFixRtHdr #header {
background-image:url("img/header.jpg");
background-repeat:no-repeat;
height:227px;
}

#nav ul li {
float:left;
list-style:none outside none;
text-align:left;
}

#nav li a {
border-right:1px solid #F7F1DB;
color:#F7F1DB;
display:block;
padding:6px 35px 5px;
text-decoration:none;
}

           
         