Navigation not Displaying correctly

Permalink September 14, 2011 at 11:12 PM

Hi, my unordered list/navigation doesn't appear correctly on the regular site but when I'm editing it shows correctly. When I'm editing all the links are evenly spread apart horizontally & it is centered both horizontally & vertically. But when I'm out of the editing mode it shows like this:http://www.josiebabyonline.com/test/index.php?cID=1.... I can not seem to get it centered vertically when outside of the editing screen.

Ive tried adding margin-top & padding-top & nothing works. just remains the same. here is my css for my navigation:

#nav {
background-color:#000;
background-repeat: x-repeat;
width: 100%;
height: 50px;   
margin-top:50px;   
}
 #nav ul {   
   margin: 0px;
   padding: 15px;
 display: inline;  
width:400px;
height:50px;
}  
 #nav li {

Viewing 15 lines of 34 lines. View entire code block.

#nav {
background-color:#000;
background-repeat: x-repeat;
width: 100%;
height: 50px;   
margin-top:50px;   
}
 
 #nav ul {   
   margin: 0px;
   padding: 15px;
 display: inline;  
width:400px;
height:50px;
 
 
}  
 
 
 #nav li {
display: inline;
margin-left:10px;
list-style-type: none;
padding:15px;
 
 
}
 
#nav a:link {
font-size:10px;
   text-decoration: none;
   color: #666;
   padding-top:15px;
}
 
#nav a.nav-selected, {
   background:#900;
   color: #000;
   height:50px;}
 
#nav a:hover {
   background:#900;
   color: #000;
   padding:15px;}

KJLJon replied on Sep 15, 2011 at 1:09 am Permalink Best Answer Reply

Backup your old CSS code and try this (I think this is what your maybe looking for?). I just don't want it to be wrong after you put it in and leave you without your old code :)

Try this:

#nav {
   height: 50px;
   background-color:#000;
}
#nav ul {
   height:50px;
   margin:0;
   padding:0;
   text-align: center;
   list-style: none;
}  
#nav li {
   display: inline;
   height:50px;
   margin:0;

Viewing 15 lines of 30 lines. View entire code block.

#nav {
   height: 50px;
   background-color:#000;
}
#nav ul {
   height:50px;
   margin:0;
   padding:0;
   text-align: center;
   list-style: none;
}  
#nav li {
   display: inline;
   height:50px;
   margin:0;
   padding:0;
   list-style: none;
}
#nav a:link {
   padding:15px;
   height:50px;
   font-size:10px;
   line-height:50px;
   color: #666;
   text-decoration: none;
} 
#nav a.nav-selected,#nav a:hover{
   background:#900;
   color: #000;
}