Forums

seansean11

Hi Everyone,

I am in the process of going from static to wordpress on an old site (www.mamlesip.com). I thought I had my search form styled well until i viewed it in Chrome and the input field showed up as a tiny rounder courner search field. I want to know if there is a reset for search forms so that I don't have to deal with making browser specific css changes. If there isn't, are there any articles out there (I can't find any) about styling search forms for cross-browser compatibility. I noticed the other day that on a friends IPhone my search button on another site dropped down below the search field (www.adechonduras.org). I am somewhat new to web design, so I guess I don't know what the accepted way of setting up your css in search forms is. Any help is greatly appreciated!

Thanks,

Sean

seansean11

Changing the CSS (border-radius, height, width, etc..) values in Firebug Chrome doesn't seem to change the input field. Any suggestions?

knittingfrenzy18

Could you provide the line of markup for the field and the CSS you are applying to it in other browsers, and what you're trying to apply?

seansean11

<li id="search-2" class="widget-container widget_search">
<form id="searchform" method="get" action="http://www.mamlesip.com/?lang=en"&gt;
<div>
<label class="screen-reader-text" for="s">Search for:</label>
<input id="s" type="search" value="" name="s">
<input id="searchsubmit" type="submit" value="">
</div>
</form>
</li>

and...

#searchform input#s {
border: medium none;
box-shadow: 0 0 3px #000000 inset;
font-size: 14px;
height: 30px;
left: 0;
padding: 0;
position: absolute;
width: 190px;
}

i just copied and pasted from firebug, so things like -moz-box-shadow, etc... arent added. Thanks for taking a look at my post.

seansean11

www.mamlesip.com

seansean11

I also just checked out the site in IE 8 and it showed up a little off. The button and the search field are different sizes and they have a small space between them. There must be an article or something out there about making your search form cross-browser compatible. I bet there is a somewhat standard way to go about setting up the mark-up and styling...

treehouse : what would you like to learn today?

Forums

Search Forms And Default Browser CSS