I’m working on a template using WordPress and so far it has been basic HTML, CSS and some PHP but I’m currently running into one problem with the CSS for the header.
It currently looks like this. The search bar has moved up to the right location and the background fills the correct color but the height won’t change. I want it to have some red padding above itself to match up the the diagonal box to the left. I’ve tried changing the height but that just causes it to extend down towards the bottom of the page and a border to the top or just all around does nothing. What am I doing wrong with the css for this search box?
Here is the css code for the search box.
/* Top search */
#nav-search {
background-color:#990000;
width: 250px;
display: block;
height: 30px;
line-height: 16px;
position: absolute;
right: 0px;
top: -22px;
}
#nav-search label {
display: none;
}
#s,
#searchsubmit {
border-radius: 3px 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;
}
#s {
border: 1px solid #000099;
font-size: 11px;
height: 15px;
padding: 4px 5px 2px;
width: 130px;
}
#nav-search #s {
border-color: #000099; border-bottom-color: #0000BE; border-right-color: #000099;
}
#searchsubmit {
background: #669900 url(img/button-style-input.png) center left repeat-x;
border: 1px solid #666;
color: #fff;
font-size: 11px;
height: 23px;
letter-spacing: 1px;
line-height: 20px;
padding: 0 5px;
-moz-box-shadow: 0px 0px 1px #fff;
-webkit-box-shadow: 0px 0px 1px #fff;
}
/* Fixes Firefox 2 and 3 */
#searchsubmit, x:-moz-any-link {
padding: 0 5px 3px; *padding: 0 5px;
}
If this is the same sample for http://new-wav.com/, edit #nav-search to the following:
Hope this makes sense