I have a text input with a search buton absolute positioned over it… to make space for the button I used some padding to keep the text from going under the button, which is fine, it works in firefox, but not IE.
In fact… It doesn’t seem like padding on text inputs works at all in IE.
They have the following code
<style type="text/css">
#mainPageSearch input {
width: 162px;
padding: 2px 20px 2px 2px;
margin: 0;
font-size: 12px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background:#F3F3F3 url(form-shadow.png) repeat-x scroll left top;
border-color:#C6C6C6 #C6C6C6 #E3E3E3;
border-style:solid;
border-width:1px;
color:#666666;
}
#mainPageSearch {
margin-bottom: 10px;
position: relative; /* Lets me absolute position the button */
}
#mainPageSearchButton {
display: block;
position: absolute;
top:0px;
right: -2px;
text-indent: -2000em;
height: 22px;
width: 22px;
background: transparent url('images/searchBtn.png') top center no-repeat;
}
</style>
<form id="mainPageSearch" action="">
<input type="text"/>
<a id="mainPageSearchButton" href="#">Search</a>
</form>
Is what I’m trying to do possible or should I just suck it up and deal with the text going under the search button?
I know I could make a search box with a transparent background/border and draw the styling using a containing div… but that isn’t really an option because of how many places I’ve have to change it on the site.
Maybe I’ll make a new class for this text input that makes it transparent and assign the normal text input style to the containing div? What do you think?
edit: sorry I should have included the doctype… here it is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
also, The problems I’m having are in IE 7
try using line-height