1. Home
  2. Forums Index
  3. Browser Side / CSS 1:59 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Styling forms

Using fieldset

         

megorilla

10:28 pm on Mar 27, 2011 (gmt 0)

10+ Year Member



I can't seem to get the desired effect. I've been at this for hours and I'm simply drouning in pixels and padding and margins...

This is my very first time on a design forum, so if I'm doing something wrong please accept my apologies beforehand. I'm really new to all this. REALLY new. I have a handle on some things, but my head is spinning is padding and pixels and I can't think straight any longer. :/

most of it's there, it's probably just a few simple things im missing that are staring at me and laughing.

the page is at:

www.example.com/cry.html (barfed version)
www.example.com/style.css (barfed css)
www.example.com/cryhelp.jpg (DESIRED effect)

HTML 

<!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>
<title>Pictures</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript"> 
<!-- 
function showMe (it, box) { 
 var vis = (box.checked) ? "block" : "none"; 
 document.getElementById(it).style.display = vis;
} 
//--> 
</script>

</head>

<body>

<div id="page-wrap">
<div id="contact-area">
<form method="post" action="contactengine.php">

  <label for="Name">Name:</label>
<input type="text" name="name" id="Name" />

<label for="Email">Email:</label>
<input type="text" name="email" id="Email" />

  <div id="methodtext">
 Preferred method of contact (check all that apply):
</div>

  <div id="prefemail" style="float:left;">
 <label for="prefemail">Email</label>
 <input name="prefemail" type="checkbox" />
</div>

<div id="prefphone" style="float:left;">
 <label for="prefphone">phone</label>
 <input name="prefphone" type="checkbox" value="value1" onclick="showMe('btime', this)" />
</div>


<div id="phone" style="float:right;">
 <label for="phone">Phone:</label>
 <input type="text" name="phone" id="phone" />
</div>

<div class="row" id="btime" style="display:none">
<label for="besttime">Best time to call:</label>
<input type="text" name="besttime" id="besttime" />
</div>

<label for="Message">Message:</label>
<textarea name="Message" rows="20" cols="20" id="Message"></textarea>

<input type="submit" name="submit" value="Submit" class="submit-button" />
</form>

<div style="clear: both;"></div>

<p>Stick whatever text here if needed</p>

</div>

</div>

</body>

</html>



CSS 

.hideRow {
display: none;
}

body {
font-size: 62.5%;
font-family: "Trebuchet MS";
background: url(images/stripe.png) repeat;
}

p {
font-size: 1.3em;
margin-bottom: 15px;
}

#page-wrap {
width: 660px;
background: white;
padding: 20px 50px 20px 50px;
margin: 20px auto;
min-height: 500px;
height: auto !important;
height: 500px;
}

#contact-area {
width: 600px;
margin-top: 25px;
}

#contact-area input, #contact-area textarea {
padding: 5px;
width: 471px;
font-family: "Trebuchet MS";
font-size: 1.4em;
margin: 0px 0px 10px 0px;
border: 2px solid #ccc;
}

#phone input, phone textarea {
padding: 5px;
width: 160px;
font-family: Helvetica, sans-serif;
font-size: 1.4em;
margin: 0px 0px 10px 0px;
border: 2px solid #ccc;
float: left;
display: block;
}
#btime input, btime textarea {
padding: 5px;
width:160px;
font-family: Helvetica, sans-serif;
font-size: 1.4em;
margin: 0px 0px 10px 0px;
border: 2px solid #ccc;
float: right;

}

#prefemail input, prefemail textarea {
padding: 5px;
width: 15px;
font-family: Helvetica, sans-serif;
font-size: 1.4em;
margin: 0px 0px 10px 100px;
border: 2px solid #ccc;
}

#prefphone input, prefphone textarea {
padding: 5px;
width:15px;
font-family: Helvetica, sans-serif;
font-size: 1.4em;
margin: 0px 0px 10px 0px;
border: 2px solid #ccc;


}
#prefemail label {

text-align: right;
margin-right: 15px;
margin-left: 0px;
width: 50px;
padding-top: 5px;
font-size: 1.4em;

}



#methodtext {
padding: 5px;
width: 325px;
font-family: "Trebuchet MS";
font-size: 1.4em;
margin: 0px 0px 10px 110px;
}

#btime label {

float:left;
text-align: right;
margin-right: 15px;
width: 120px;
padding-top: 5px;
font-size: 1.4m;
height: 16px;
}

#contact-area textarea {
height: 90px;
}

#contact-area textarea:focus, #contact-area input:focus {
border: 2px solid #900;
}

#contact-area input.submit-button {
width: 100px;
float: right;
margin-right: 0px;
}

label {
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
padding-top: 5px;
font-size: 1.4em;
}

[edited by: alt131 at 3:17 pm (utc) on Jul 23, 2011]
[edit reason] Thread Tidy - Examplifying [/edit]

alt131

12:49 pm on Mar 28, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi megorilla, and welcome to WebmasterWorld :)

If you are new to this, I think you've done quite well. Forms can be tricky to style, and there are the cross-browser rendering differences. You are right - there are just a few simple things, but they are all accumulating to make #methodtext, #prefemail, #prefphone, #phone, #btime and the label for Message collide with each other. That means adjustments have a "domino effect" and I can understand the feeling of drowning in pixels ;)

However, the underlying reason is all those divs, plus the combination of an inline style sheet, and inline styles. I know you've worked hard on this code, but it would be so much easier if the html was refined and all the css kept in the stylesheet. That would make it so much easier to style the form elements as you want, and would also make the form more accessible as well.

As an example, the code below takes the problem elements and makes them behave as I think you want. There is a small loss of the font styling, but that can be adjusted later. Note the use of a <fleldset> element to group related elements - which means there is a lot less divs.

Also note most of the styles added to show how this works are required to remove styles that are being inherited and causing the troubles. Hence my suggestion to re-think the html by using fieldsets to group the elements, then apply the styles you want: rather than using lots of divs that need lots of styling ... then adding even more css to "undo" the styles you don't want. whew! ;)

In the html remove #methodtext, #prefemail, #prefphone, #phone, #btime and replace with:
<fieldset id="methodtext">
<p>Preferred method of contact (check all that apply):</p>
<label for="prefemail">Email</label>
<input name="prefemail" type="checkbox" />
<label for="prefphone">phone</label>
<input name="prefphone" type="checkbox" value="value1" onclick="showMe('btime', this)" />
</fieldset>

<fieldset id="phone1">
<label for="phone">Phone:</label>
<input type="text" name="phone" id="phone" />
<p id="btime" style="display:none">
<label for="besttime">Best time to call:</label>
<input type="text" name="besttime" id="besttime" />
</p>
</fieldset>

In the css add:

fieldset#methodtext {
/* border just for the example. Fieldset has a border by default, so to remove set border:none*/
border:1px solid red;
width:100%;
/* adjusting unwanted inheritance */
font-size:1em;
line-height:1.6em;
vertical-align:middle;
}

#methodtext p {float:left; margin:0 10px; /*margin is removing unwanted inheritance, then making it look nice - adjust for desired layout */}
#methodtext label {float:none /*adjusting inherited float*/}
#methodtext input {width:20px; margin-right:20px; /*some styles to make it look nicer - will need adjustment for your design*/}

#phone1 {border:1px solid red; width:100%; font-size:0.8em; }
#phone1 p {border:1px solid red; line-height:1.6em; margin:0; /*adjusting for inheritance */ }
#phone1 p label {float:left;}
#phone1 p input {float:none /* adjusting for inheritance */}

Also. always a good idea tovalidate [validator.w3.org] when having troubles. (Only a couple of small things, and not causing any problems.)

swa66

1:05 pm on Mar 28, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Agree with alt123, forms are among the hardest things to get right as browser differences are big.

On minor thing:
I'm not sure *all* browsers implement a fieldset with a border, most do.

I've often found it easier to apply a rather hard reset on the styles of form elements in order to get control, but it's by far not easy.

Form elements are given a lot of liberty from the standards point of view with the excuse that the browser can integrate the look of the form with the platform the user is using ... not what most seeking to style a form had in mind ....

There are 2 paths: either grab control and make it do what you want (as bad as it goes), or let the browser have its way with the form and do it as light as possible (much easier in most cases).

alt131

2:03 pm on Mar 28, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



@swa66
I'm not sure *all* browsers implement a fieldset with a border, most do
Didnt see this as the major issue facing the OP at this stage, but interesting: The latest I recall is ie3, so it would be extremely helpful if you could provide a list of those that don't.

I've often found it easier to apply a rather hard reset on the styles of form elements in order to get control, but it's by far not easy.
And other coders prefer to work with the browsers for exactly that reason, plus start newer coders off with understanding the default behaviour to avoid the over-engineering and problems that creates - as evidenced by the OP. However, as the OP has identified they aren't that experienced, they may not be familiar with the concept of a "hard reset": How about providing a solution for the problem that demonstrates how it works?

megorilla

4:06 am on Mar 29, 2011 (gmt 0)

10+ Year Member



@alt131

Whew, thanks!

Yes, I think I'll probably go your route. It looks much cleaner. I walked away from this for a day and am now returning to it. I like this fieldset option much better as it seems way more efficient. I never knew it existed :/

Next step will to be sticking some kind of validation on top of all this. That should be fun!

I don't know how you guys do this on a daily basis. I'd jump off a cliff by weeks end unless someone paid me 300 an hour. And I'd still chew my own arm off!

Again, thanks for that insight. Will go to good use!

swa66

8:11 am on Mar 31, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



alt123:

@swa66
I'm not sure *all* browsers implement a fieldset with a border, most do


Didnt see this as the major issue facing the OP at this stage, but interesting: The latest I recall is ie3, so it would be extremely helpful if you could provide a list of those that don't.

As you've given one example yourself, the point that not all browsers draw a border for a fieldset is proven. Neither does the standard give guidance either way how browsers are supposed to render a fieldset to my knowledge -didn't reread it just now, so that's from memory-. Which do or do not draw borders on a fieldset by default isn't relevant, esp. not if you (try to) write code that's supposed to outlast current browser versions: if you use a fieldset and don't/do want the border: you'll have to reset/set it and not rely on the browser to do what you want on its own.
If you do not care about the border being there or not: then do nothing.

Regarding the reset and get it all back under control: If I ever start to write CSS tutorials again, I won't be posting them here anymore, those days are over, sorry.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 1:59 pm May 1, 2026