We are working to make a nice looking search form. I'm playing around with a textbox with rounded corners and submit button that has an image extending the border around the button. I'm having trouble aligning the button with the input box. Below is the HTML and CSS used for the page (which can be viewed at http://www.swimwebs.com/button/search.php).
<!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=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> form.searchForm input { height:25px; margin:0; } #searchInput { border:0; background-image:url("input2.png"); background-repeat:no-repeat; vertical-align:middle; *vertical-align:text-bottom; padding:0; margin:0; padding-left:5px; } #searchButton { background:transparent url("button2.png") no-repeat center top; overflow:hidden; height:25px; width:32px; border:0; vertical-align:middle; *vertical-align:text-bottom; } </style> </head> <body> <form method="post" action="" class="searchForm"> <input type="text" id="searchInput" size="20" /><input type="submit" value="Go" id="searchButton" /> </form> </body> </html> The vertical-align piece of the CSS worked to fix another alignmentment issue that caused the button to appear 3 or 4 pixels above the input button. Now the button appears great in most major browsers but IE6 and IE7 show the input button one pixel below the input box. IE8 renders the form correctly. Unfortunately, I have to make this work with IE7. I'm at a loss as to how to fix this. Does anyone have any suggestions? Thanks ______________________________________________________________________ css-discuss [[email protected]] 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/
