this code produces this…
input.submit {
width: 10em;
text-align: center;
}
martin, you have to wait for a mentor (or advisor? Not sure) to approve the upload before it’s shown. Just have patience my friend! 
Ooops! sorry… no prob 
strangely enough, there’s not attachment awaiting validation in the queue…seems like your attachment got lost somewhere along the line, martin
should be attached now?
I knew label was buggy somewhere:
Fixed in Mozilla 1.0.2, before then, you will lose the labels for the form. Which basically means the code doesn’t work in Netscape 6. Fix: replace or warp the labels in spans and change CSS accordingly.
OTOH, it works in NN7 and recent releases of Moz, so ins’t a massive problem.
As for the Mac bugs… hay, if they have bad mouse controll the button is a bigger target for them
Douglas
PS: why do you not get “goto page number” links when there is only one post on the new page??
vBulletin bug. We are running beta software on the forums right now ya know. Anyway, this post should take care of that.
Now that one really ticked me off!!! To misalign my precious labels is one thing, but not even showing them… Aaaaaaargh!!!
So I started checking the different solutions from this thread in Moz1.0 and saw that Douglas’s earlier example with <span> and implicit labels at least showed the labels. Completely wacked out of place, yes, but at least the darn letters are there. 
So I left the html as it was and decided to float and clear things a bit, this being the result:
<!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">
<head>
<title>Form without tables</title>
<style type="text/css">
/* essential */
span { float: left; clear:left; width: 6em; text-align: right;}
label { display: block; }
input, textarea {text-align: left; float:left; clear:right;}
input.submit {margin-left: 6em; text-align: center; clear:both;}
/* additionally give the button and the labels the same font to align the button better */
label, input.submit {font: normal 0.8em Verdana, Geneva, Arial, Helvetica, sans-serif;}
</style>
</head>
<body>
<form>
<fieldset>
<legend>My Form</legend>
<label><span>Name:</span>
<input type="text" size="25" /></label>
<label><span>Age:</span>
<input type="text" size="25" /></label>
<label><span>Remarks:</span>
<textarea rows="10" cols="23" /></textarea></label>
<label><span>Name:</span>
<input type="text" size="25" /></label>
<input type="submit" class="submit" name="submit" value="Easy like CSS" />
</fieldset>
</form>
</body>
</html>
Seems to do the trick in IE5.5, Opera 6.06, Firebird 0.6 and Moz1.0. Pfeeeeeew!!!
Just makes me wonder in which browser it’s going to break.
On a sidenote. Using implicit labels is the only way to label radiobuttons (since within a group af radiobuttons they will all have the same id). And on another sidenote, implicit labels are ‘clickable’ in Firebird (how I love this browser).
This has ended up a real good thread btw, thanks guys!
Rik
I say, you’ve got to pick which browsers you support. This even works in NN4: (OK, so you can’t set the width of the text area, and the inputs have a font twice as big as it should be… but it can still be used )
<!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">
<head>
<title>Form without tables</title>
<style type="text/css">
/* essential */
span { float: left; width: 6em; text-align: right; padding-right: 0.5em;}
span.submit { float: none; padding-left: 6.5em; text-align: left;}
input.submit { margin-left: 6.5em; }
legend { display: block; width: 5em; padding: 0.5em; text-align: center; }
/* additionally give the button and the labels the same font to align the button better */
body { font-size: 80% } /* _be_nice_to_IE_will_you!_ */
fieldset, textarea, input {font: normal 1em Verdana, Geneva, Arial, Helvetica, sans-serif;}
</style>
</head>
<body>
<form>
<fieldset>
<legend>My Form</legend>
<div><span><label>Name:</label></span>
<input type="text" size="25" /></div>
<div><span><label>Age:</label></span>
<input type="text" size="25" /></div>
<div><span><label>Remarks:</label></span>
<textarea rows="10" cols="23" /></textarea></div>
<div><span><label>Name:</label></span>
<input type="text" size="25" /></div>
<span class="submit"><input type="submit" name="submit" value="Easy like CSS" /></span>
</fieldset>
</form>
</body>
</html>
but, as you can see, the divs and spans are back…
BTW: Zoef, you loose all formatting in Opera 7, and you loose the whole thing in NN6.2 with the last code posted!
Sheeesh, I say: NN6 and Moz1 people should upgrade to Firebird (then I can use label { display: block; } !!!)
Nice thread everyone, wish there were more like this in this forum
Douglas
Hi guys,
I am new to CSS and am playing about with the code here so i can create a form in the style of:
a label | a text box | a label | a text box
a label | a text box | a label | a text box
a label | a text area in center
a label | a text box | a label | a text box
a label | a text box | a label | a text box
I am having trouble getting it all to line up. If i could just get some help putting a label and text box twice on one line that would be great!
Any ideas?
Thanks.
Maybe not what you want to hear, but I’d use a table.
Or simplify your layout.
I’m not saying that this could not be done with CSS but there’s a fair chance that whatever one comes up with will get screwed up in one browser or the other. Simply not worth the headache imho.
Rik