I am currently in the process of developing a Wordpress template incorporating basic HTML, CSS, and some PHP. However, I have encountered an issue with the header's CSS.
This is how it currently looks. Despite positioning the search bar correctly and setting the background color as intended, I am struggling to adjust the height. I want to add some red padding above the search bar to align it with the diagonal box on the left. Adjusting the height only causes it to extend downward or adds a border without achieving the desired effect. What could be incorrect in my CSS implementation for the search box?
Below 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;
}