the better twin Posted August 12, 2010 Share Posted August 12, 2010 Hi was wondering if anyone could help me with the problem im having with my search form on ie here is whats wrong this is my search: how it looks in firefox: finally how it looks in ie 8: heres my css: #searchsidebar{ width:215px; height:40px; position:fixed; left:753px; top:2px; display:inline; float:left; } form#searchform{ border: none; width:215px; height:40px; display:inline; float:left; } #search input.box { color: #fff; font-family:"Segoe UI", Tahoma, Geneva, Verdana; font-size: 0.8em; width:170px; height:23px; font-weight:bold; padding:2px 20px 2px 15px; background: url(images/search.png) no-repeat; display:inline; float:left; } #search input.box:focus { background: url(images/search.png) no-repeat; background-position: 0 -41px; } #search input#searchsubmit { width: 26px; height: 26px; margin:0 0 0 -30px; cursor: pointer; position:relative; text-indent: -9999px; background: url(images/searchbtn.png) no-repeat; background-position:-132px; display:inline; float:left; } and finally the html for the form: <div id="searchsidebar"> <div id="search"> <form method="get" id="searchform" action="<?php bloginfo('home'); ?>/"> <input type="text" value="<?php echo wp_specialchars($s, 1); ?>" class="box" name="s" id="s" size="15" /> <input type="submit" id="searchsubmit" value="Search" /> </form> </div> </div> any help would be appreciated. Link to comment Share on other sites More sharing options...
0 Cupcakes Posted August 12, 2010 Share Posted August 12, 2010 Just a guess but couldn't you add padding: 0 0 0 18px; to solve the text from overlapping your search icon? Link to comment Share on other sites More sharing options...
0 the better twin Posted August 12, 2010 Author Share Posted August 12, 2010 Just a guess but couldn't you add padding: 0 0 0 18px; to solve the text from overlapping your search icon? yeah thats what i thought i put padding:2px 20px 2px 15px; on the #search input.box, works in firefox, but in ie the text just keeps going and seems to ignore the padding Link to comment Share on other sites More sharing options...
0 Gocom Posted August 12, 2010 Share Posted August 12, 2010 yeah thats what i thought i put padding:2px 20px 2px 15px; on the #search input.box, works in firefox, but in ie the text just keeps going and seems to ignore the padding Yep, browsers in general render styles in form controls very differently. It's not uncommon that the padding in text-direction isn't followed. Even if you don't support IE6, it's still better to apply the styles (also the padding, borders) to a div (or in this case to the form) that contains the text input field, and then making the input field borderless, outlineless and backgroundless. Link to comment Share on other sites More sharing options...
0 the better twin Posted August 12, 2010 Author Share Posted August 12, 2010 Yep, browsers in general render styles in form controls very differently. It's not uncommon that the padding in text-direction isn't followed. Even if you don't support IE6, it's still better to apply the styles (also the padding, borders) to a div (or in this case to the form) that contains the text input field, and then making the input field borderless, outlineless and backgroundless. the :focus pseudo-class only works with input tho doesnt it? I was hoping to have the border brighten when focused upon (ie clicked). guess the best solution would probably be to leave it alone? Link to comment Share on other sites More sharing options...
0 Gocom Posted August 14, 2010 Share Posted August 14, 2010 the :focus pseudo-class only works with input tho doesnt it? I was hoping to have the border brighten when focused upon (ie clicked). guess the best solution would probably be to leave it alone? Yeah, focus only works with links, form controls and other editables. But you could use JavaScript and onfocus event. Small example using jQuery: $("input#s").focus(function(){ $("#searchform").css('background-position','0 -41px'); }); Ofcourse yet one solution is moving the search button outside the field. Link to comment Share on other sites More sharing options...
Question
the better twin
Hi was wondering if anyone could help me with the problem im having with my search form on ie
here is whats wrong
this is my search:
how it looks in firefox:
finally how it looks in ie 8:
heres my css:
#searchsidebar{ width:215px; height:40px; position:fixed; left:753px; top:2px; display:inline; float:left; } form#searchform{ border: none; width:215px; height:40px; display:inline; float:left; } #search input.box { color: #fff; font-family:"Segoe UI", Tahoma, Geneva, Verdana; font-size: 0.8em; width:170px; height:23px; font-weight:bold; padding:2px 20px 2px 15px; background: url(images/search.png) no-repeat; display:inline; float:left; } #search input.box:focus { background: url(images/search.png) no-repeat; background-position: 0 -41px; } #search input#searchsubmit { width: 26px; height: 26px; margin:0 0 0 -30px; cursor: pointer; position:relative; text-indent: -9999px; background: url(images/searchbtn.png) no-repeat; background-position:-132px; display:inline; float:left; }and finally the html for the form:
<div id="searchsidebar"> <div id="search"> <form method="get" id="searchform" action="<?php bloginfo('home'); ?>/"> <input type="text" value="<?php echo wp_specialchars($s, 1); ?>" class="box" name="s" id="s" size="15" /> <input type="submit" id="searchsubmit" value="Search" /> </form> </div> </div>any help would be appreciated.
Link to comment
Share on other sites
5 answers to this question
Recommended Posts