beckybramwell Posted March 4, 2013 Share Posted March 4, 2013 I'm making a site with a search bar on. It works fine in Firefox, but won't dislpay correctly in IE8 & Chrome. I've attached a file of how it looks in each browser and also the HTML and CSS. Hope someone can help! Thanks in advance <div id="search-wrapper"> <h1>search</h1> <form class="search-wrapper" method="get" action="http://www.google.com/search"> <input type="text" name="q" size="29.5" maxlength="255" placeholder="Enter search here..." /> <button type="submit">GO</button> </form> </div><!--end search-wrapper--> /* Search Box */ #search-wrapper {width: 223px;height: 60px;float: right;margin: 47px 0 0 30px; } #search-wrapper h1 {font-size: 13px;font-family: Verdana, Geneva, sans-serif;font-weight: 200;margin-top: 1px;letter-spacing: 1px;}.search-wrapper input { font-family: Verdana, Geneva, sans-serif;color: #FFF;font-size: 11px;background: #231f20;margin-top: -5px;-moz-border-radius: 1px; -webkit-border-radius: 1px;-ms-border-radius: 1px; border-radius: 1px;border: none;width: 150px; } .search-wrapper input::-webkit-input-placeholder { color: #fff; font-weight: normal; padding: 5px; -webkit-border-radius: 1px; border-radius: 1px; } .search-wrapper input:-moz-placeholder { color: #fff; font-weight: normal; padding: 5px;-moz-border-radius: 2px; border-radius: 2px;border: none;margin-top: -1px; } .search-wrapper input:-ms-input-placeholder { color: #fff; font-weight: normal; padding: 5px;-ms-border-radius: 1px; border-radius: 1px;border: none; } .search-wrapper button { font-family: Verdana, Geneva, sans-serif;color: #FFF;font-size: 11px;background: #231f20;margin: -2px 0 0 0px;-moz-border-radius: 1px; -webkit-border-radius: 1px;-ms-border-radius: 1px; border-radius: 1px;border: none;height: 24px; width: 28px;/*float: right;*/padding: 0;cursor: pointer;} Link to comment Share on other sites More sharing options...
Ingolme Posted March 5, 2013 Share Posted March 5, 2013 It seems like you need to set a height to the input element. Link to comment Share on other sites More sharing options...
beckybramwell Posted March 9, 2013 Author Share Posted March 9, 2013 Thanks for your help! I've added a height to the input now, but it still doesn't look quite right... Any suggestions? Link to comment Share on other sites More sharing options...
scout1idf Posted March 9, 2013 Share Posted March 9, 2013 After experimenting with your code, this is what I came up with..... <!DOCTYPE html><html><head><style type='text/css'> /*<![CDATA[*/ /* Search Box */ #search-wrapper { width: 223px; height: 60px; float: right; margin: 47px 0 0 30px;}#search-wrapper h1 { font-size: 13px; font-family: Verdana, Geneva, sans-serif; font-weight: 200; margin-top: 1px; letter-spacing: 1px;}.search-wrapper input{ font-family: Verdana, Geneva, sans-serif; color: #FFF; font-size: 11px; background: #231f20; margin-top: -5px; padding-left:2px; /*ADDED*/ border-radius: 4px; /*CHANGED*/ border: none; width: 148px; /*CHANGED*/ height: 22px; /*ADDED*/}.search-wrapper button { font-family: Verdana, Geneva, sans-serif; color: #FFF; font-size: 11px; background: #231f20; margin: -2px 0px 0px 0px; border-radius: 4px; /*CHANGED*/ border: none; height: 24px; width: 28px; /*float: right;*/ padding: 0; cursor: pointer;} /*]]>*/</style></head><body> <div id="search-wrapper"> <h1>search</h1> <form class="search-wrapper" method="get" action="http://www.google.com/search"> <input type="text" name="q" maxlength="255" placeholder="Enter search here..." /> <button type="submit">GO</button> </form> </div><!--end search-wrapper--></body></html> I removed some of the elements that wasn't necessary (as far as I could see). (tested in FireFox 19.0, IE 9, Google Chrome 25 and Opera 12.02) Hope this helps... Link to comment Share on other sites More sharing options...
beckybramwell Posted March 10, 2013 Author Share Posted March 10, 2013 That's great, thanks! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now