HTML and CSS Reference
In-Depth Information
■
Note
Unfortunately,
vertical-align
does not work for block-level elements, something that bothers
a great many web developers, this author included!
In the original design mockup provided, the text input has a black border, but by default,
form inputs on most browsers have a slightly beveled border on them. You can override this in
CSS, though, and you can also affect the height so that it matches exactly the height of the
search button and the width so that it fits nicely underneath the links:
#txtSearch {
height:17px;
width:115px;
border:1px solid black;
}
The complete CSS for the search box looks like this:
#headersearch form {
padding:0;
margin:0;
}
#headersearch {
position:absolute;
top:2em;
right:5px;
}
#headersearch form input {
padding:0;
margin:0;
vertical-align:middle;
}
#txtSearch {
height:17px;
width:115px;
border:1px solid black;
}
The final result of all these CSS touches can be seen in Figure 8-10.
Figure 8-10.
The finished CSS-styled header
