Menu
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
538
you can solve this, taking the input tag inside a div , then put the padding property on div tag. This work's for me...
You need to apply padding-left: 20px; to the ul. Add this to your css: . listing { padding-left: 20px; } .
try using line-height
187
I had this issue also i solved it by adding the following line
input { overflow:visible; padding:5px; } hope this helps? Let me know.
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
