Hi,
I'm using a list displayed inline for my navigation on a site. Ive put a search box in the last li and set the height of each li to 30 with the text field and buttons heights set to 20. The is a horizontal line at the bottom of the list.
My problem is that with the form fields in the alignment of the other links is out by 1 pixel. The li with the text field and button are aligned on the base line but the other links are 1 pixel above the line. Ive surrounded the whole ul in the form tags to make sure its not the form playing up.
The CSS im using is:
#navlist
{
padding: 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
}
#navlist li
{
list-style: none;
margin: 0;
display: inline;
}
#navlist li a
{
padding: 2px;
margin: 0 0 0 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
height: 30px;
}
#navlist li a:link, a:visited { color: #448; }
#navlist li a:hover
{
color: #DDE;
background: #000066;
border-color: #227;
}
#navlist li a#current
{
background: white;
border-bottom: 1px solid white;
}
#searchbox
{
padding: 2px;
margin: 0 0 0 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
height: 30px;
}
I'm using a list displayed inline for my navigation on a site. Ive put a search box in the last li and set the height of each li to 30 with the text field and buttons heights set to 20. The is a horizontal line at the bottom of the list.
My problem is that with the form fields in the alignment of the other links is out by 1 pixel. The li with the text field and button are aligned on the base line but the other links are 1 pixel above the line. Ive surrounded the whole ul in the form tags to make sure its not the form playing up.
The CSS im using is:
#navlist
{
padding: 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
}
#navlist li
{
list-style: none;
margin: 0;
display: inline;
}
#navlist li a
{
padding: 2px;
margin: 0 0 0 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
height: 30px;
}
#navlist li a:link, a:visited { color: #448; }
#navlist li a:hover
{
color: #DDE;
background: #000066;
border-color: #227;
}
#navlist li a#current
{
background: white;
border-bottom: 1px solid white;
}
#searchbox
{
padding: 2px;
margin: 0 0 0 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
height: 30px;
}