Floating the input elements fixed the issue. Thanks
On Tue, Sep 8, 2009 at 2:36 PM, jeffrey morin <[email protected]> wrote: > > > On Tue, Sep 8, 2009 at 5:20 PM, Robbert van Andel <[email protected]>wrote: > >> 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 >> >> i'm not seeing anything with and id of searchInput or searchButton. they > exist as classes but the searchButton doesn't have an image as a background. > Have you tried setting heights on the elements and floating them? I always > have luck lining up form elements when I use the float property. I find it > is more consistent than relying on the inline display of html elements > across all browsers. > > Regards, > Jeff > ______________________________________________________________________ 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/
