Form test

Back to the article

Table of contents

1. A basic form (no style)
2. A form with dimensions
3. Styling the form elements 1
4. Styling the form elements 2
5. Using hacks
6. Conclusion: the form and the shape

1. A basic form (no style)

HTML code

<form method="get" action="http://www.google.com/search">
 <div>
  <label for="q">Search with Google:</label>
   <input type="text" id="q" name="q" maxlength="255">
   <input type="hidden" name="hl" id="hl" value="en">
   <input type="submit" name="btnG" id="btnG" value="Go">
 </div>
</form>

Comments

Here's how it looks in Internet Explorer 5:

This layout is similar to Internet Explorer's 6 rendering. Compliant browsers, such as Firefox 1.5 and Opera 9, display the form with less differences than Internet Explorer (e.g. in the alignment). That is due to the well known undefined rendering of forms according to the specs. Now we try to apply dimensions to the form.

2. A form with dimensions

CSS code

form {margin: 0; padding: 0;}

form div {margin: 0; padding: 0;}

input.size {width: 150px; height: 20px;}

input.submit1 {width: 30px; height: 30px;}

Comments

Here's how it looks in Internet Explorer 5:

Here there are differences also between Internet Explorer 5 and 6 (the height of the submit button). According to Internet Explorer's CSS model, an <input> element has layout (see MSDN reference). So we have to try various solutions to gain a decent layout also for Internet Explorer (both versions 5 and 6).

3. Styling the form elements 1

CSS code

label.prime {
display: inline-block;
height: 30px;
line-height: 30px;
margin-left: 10px;
}

input.size1 {
display: inline-block;
height: 30px;
width: 150px;
line-height: 30px;
}
input.submit2 {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
}

Comments

Here's how it looks in Internet Explorer 5:

Notice how Internet Explorer 5 (against Internet Explorer 6) has applied the declaration 'display: inline-block' respecting (partially) the vertical alignment given through the declarations 'height: 30px' and 'line-height: 30px'. This is a behaviour similar to Opera 9. Firefox 1.5 and Internet Explorer 6 do not gain this layout. We've specified the inline-block value because we want to give elements layout. Now we have to try another way.

4. Styling the form elements 2

CSS code

label.prime2 {
display: inline;
height: 20px;
line-height: 20px;
margin-left: 10px;
}

input.size2 {
display: inline;
height: 20px;
line-height: 20px;
width: 150px;
}
input.submit3 {
padding: 5px;
}

Comments

Here's how it looks in Internet Explorer 5:

Even if their layout differs slightly, we have to say that Firefox 1.5 and Opera 9 have close similarities in their rendering. Internet Explorer 5 tries to gain a vertical alignment for the elements, but it fails. Notice how Internet Explorer 5 and 6 differ from each other and how their rendering of the submit button differs from Firefox 1.5 and Opera 9's one. It's time to give browsers different experiences for the same form.

5. Using hacks

CSS code

* html body form div label.prime3 {
display /*\*/: inline; 
margin-bottom /*\*/: -6px; 
height /*\*/: 0;
}
label.prime3 {
margin-left: 10px;
}
div > label.prime3 {margin-top: 2px; display: inline-block;}

/*\*/ * html body form div input.size3 {
display /*\*/: inline; 
position /*\*/: relative;
} 
/**/

* html body form div input.size3 {display: inline;}

input.size3 {
vertical-align: middle;
}

div > input.size3 {display: inline-block;}

* html body form div input.submit4 {padding: 1px 6px;}
input.submit4 {
width: auto;
vertical-align: middle;
}

div > input.submit4 {padding: 1px 8px;}

@media all and (min-width: 0px;) {
input.submit4 { width: 30px; display: inline-block;}
}

Comments

Here's how it looks in Internet Explorer 5 and Firefox:

Internet Explorer 5

Firefox

Buttons are slightly different, but the alignment is ok. We've used three kind of hacks: for Internet Explorer 5 (marked in red), for Internet Explorer 6 (marked in blue) and for Opera (marked in maroon). The child selector (in black bold) is the fudge for Firefox and Opera. Alignment is different only in Internet Explorer 6.

6. Conclusion: the form and the shape

Forms may be frustrating, because there are no explicit suggestions about their layout. So everything is related to browser's implementation that, sometimes, may be very different from browser to browser. However, hacks cannot be a definitive solution. We're waiting for a better definition from the specs.