Hi all,
I have put together a simple finished web page below to help show my problem and what I am trying to achieve. The page shows a pink background box which needs to be 62 pixels high. Inside that pink background I need the input text box together with its submit button to sit smack bang in the center, both vertically and horizontally. Here is my main problem - I need it to look identical in all of the following main browsers, including having the text vertically align in the center of the input fields i.e. line heights etc: - Internet Explorer versions 7 and 8 - Chrome - Firefox - Opera - Safari I have really tried but just can't get it looking anything near identical across the different browsers. Please help. Thanks very much in advance. John. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style> #searchBarHolder { position:relative; width:956px; height:62px; margin:0; padding:0; background:#FF95CA; } #searchBar { position:absolute; } #searchBar p { margin:0; padding:0; } #searchBar input.inputbox { float:left; width:180px; height:21px; margin:0 5px 0 0; padding:0 0 0 3px; border:2px solid #8C0147; background-color:#fff; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px; color:#8C0046; } #searchBar input.button { height:25px; padding:0 5px; border:2px solid #8C0147; background-color:#FB007D; font-size:13px; color:#FFF; font-weight:bold; text-align:center; display:block; } </style> </head> <body> <div id="searchBarHolder"> <div id="searchBar"> <form> <p> <input name="keyword" type="text" title="Search" class="inputbox" id="keyword" onfocus="if(this.value=='Search entire shop here') this.value='';" onblur="if(this.value=='') this.value='Search entire shop here';" value="Search entire shop here" /> <input name="Search" type="submit" class="button" value="Search" /> </p> </form> </div> </div> </body> </html> _________________________________________________________________ http://clk.atdmt.com/UKM/go/197222280/direct/01/ We want to hear all your funny, exciting and crazy Hotmail stories. Tell us now ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
