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/
