homepage Welcome to WebmasterWorld Guest from 23.20.91.134
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS form button not horizontally aligned
messed up in FF
haryanto




msg:4032934
 9:11 pm on Nov 27, 2009 (gmt 0)

OK here is what I found out, when I assign height to all my form elements, they will not be aligned horizontally, when **they actually should**.
Chrome rendered this OK, FF pushed the form button too far up.
Is there an elegant solution to this?

<form>

<input class="input_text" type="text" style="height:40px" value="some text">

<select style="height:40px">
<option value="0">0</option>
<option value="1">1</option>
</select>

<input type="submit" value="Search" style="height:40px">


</form>

 

D_Blackwell




msg:4032959
 10:02 pm on Nov 27, 2009 (gmt 0)

This is one option, You'll likely get others; maybe <surprisingly banned word>ing vertical-align:

1) I wrapped the contents of the form in a <div> and give it relative positioning.

2) This set up the absolute positioning of the input[submit]. The margin-left: is just an extra flourish with which to have a little extra control.

3) Note that the <select> presentation is going to vary in FF, Opera, and IE, so you'll want to be sure that you are okay with the variances; some of which you will just have to live with. Browsers love to assign their own formatting to form elements and that can be a real hassle. They should stay out of it.

4) Your declared heights in form elements may not be followed quite as you would think. Something to watch for and adjust for. Form element rendering can be screwball.

<!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" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
</style>
</head>
<body>
<form action="">
<div style="position: relative;">
<input class="input_text" type="text" style="height:40px" value="some text" />
<select style="height: 40px;">
<option value="0">0</option>
<option value="1">1</option>
</select>
<input type="submit" value="Search" style="height: 40px; position: absolute; bottom: 0; margin-left: 10px;" />
</div>
</form>
<!--##########
OK here is what I found out, when I assign height to all my form elements, they will not be aligned horizontally, when **they actually should**.
Chrome rendered this OK, FF pushed the form button too far up. Is there an elegant solution to this?
-->
</body>
</html>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved