I normally don't have layout issues with FireFox, but I have one now. I have attached images of what it looks like in FireFox, and what it looks like in all of the other browsers. Basically I would like to have my input text box and my input submit box to have the exact same height, and be perfectly lined up vertically. It seems like this would be easy to do, and it was, except for the fact that FireFox doesn't like it. Here is my code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Input CSS Test Firefox</title> <style type="text/css"> * { margin:0; padding:0; } input { border:none; background:#cccccc; height:20px; } input[type="submit"] { background:#cccccc; } input[type="text"] { background:#aaaaaa; } </style> </head><body> <form action="#" method="post"> <div> <input type="text" /><input type="submit" /> </div> </form> </body></html> HTML: As you can see, there is nothing too fancy going on here. This is very basic, but I was wondering if I'm missing something simple, or if there is a better way to ensure cross-browser compatibility.
input { vertical-align: bottom; } Code (markup): That should do it. Input widgets are inline replaced elements, similar to img. Inline alignment will give you tired-head. See http://meyerweb.com/eric/css/inline-format.html and http://dbaron.org/css/2000/01/dibm-20000113 See also a simple (minded) demo, Gap Under Images. cheers, gary
Thanks for the tip. Assigning vertical-align:bottom did the trick, except that the elements were then not lined up in IE6 and IE7. However, by assigning a vertical-align:middle, it worked in all of the browsers. Also, thanks for the articles, they were really informative.