CSS Table-less Form Experts Please

Attn: CSS Table-less form experts!

2 questions involving forms and css. This is kinda my first attempt at a
table-less form

First Question:
Radio Buttons - Do they follow the input rule for styles? For example, I
have a general rule - input {background: #fff; border: 1px solid #fff;}
and my radio button is following this rule (I'm guessing) - since I've
applied no class to the radio button...but I don't want it to have these
properties. How can I make it so all radio buttons are just left alone?

Second Question:
I have a review form people can fill out. It's one file that's included on
several pages (some 2 column and some 3 column). On the 3col layout, the
form is layed out how I want it, but in the 2col pages, my fields are
shifted kinda zig zagged. Since I have this one form include on the two
different style pages, am I stuck? I can't show you how it looks because
you'd have to join to be able to write reviews. Membership is free,
but..anyway - any thoughts, ideas or comments would be much appreciated!

The form code:

<fieldset>
<legend>Your review will be published within 24 hours.</legend>
<form action="<%=MM_editAction%>" method="POST" name="review" id="review">
<label for="TITLE" accesskey="t">Title: </label>
<input name="TITLE" type="text" tabindex="1" id="TITLE" size="30"
maxlength="60"><br>
<label for="MESSAGE" accesskey="m">Message: </label>
<textarea name="MESSAGE" cols="23" rows="10" id="MESSAGE"
tabindex="2"></textarea>
<br>
<label for="RATING" accesskey="r">Rating: </label>
<select name="RATING" id="RATING" tabindex="3">
<option value="0">N/A</option>
<option value="1">*</option>
<option value="2">* *</option>
<option value="3">* * *</option>
<option value="4">* * * *</option>
<option value="5">* * * * *</option>
</select><br>
<input name="PARENT" type="hidden" id="PARENT" value="<%= sqlComParent %>">
<input name="CHANNEL" type="hidden" id="CHANNEL" value="<%= sqlComChannel
%>">
<input name="DATED" type="hidden" id="DATED" value="<%= DATE() %>">
<label for="Submit"></label>
<p><input name="Submit" type="submit" class="submit"
onClick="MM_validateForm('TITLE','','R','MESSAGE', '','R');return
document.MM_returnValue" value="Submit" tabindex="4"></p>
<input type="hidden" name="MM_insert" value="review">
</form>
</fieldset>

CSS:

form {margin:0; padding:0;}
input { font: 12px Arial, Helvetica, sans-serif; background: #FFF; color:
#369; border: 1px solid #006; margin: 2px 2px 0 0;}
..submit { font: 12px Arial, Helvetica, sans-serif; color: #FFF;
background-color: #69C; border-top: 1px solid #336699; border-right: 1px
solid #000033; border-bottom: 1px solid #000033; border-left: 1px solid
#336699; padding: 1px 6px;}
select { font: 12px Arial, Helvetica, sans-serif; color: #369; border: 1px
solid #003; padding: 2px;}
textarea {overflow: auto; border: 1px solid #006; color: #369; font: 12px
Arial, Helvetica, sans-serif; padding: 5px;}
radio {margin-top: 2px;}
input:focus, select:focus, textarea:focus {background-color: #f2f2f2; color:
#369;}
legend { padding: 3px 5px; color: #666; background: #f2f2f2; border-top: 1px
solid #ccc; border-right: 1px solid #999; border-bottom: 1px solid #999;
border-left: 1px solid #ccc;}
fieldset {border: 1px solid #ccc; padding: 10px; margin: 0;}
label {display: block; float: left; width: 100px; padding: 0; margin: 5px 0
0; text-align: right; }
label:first-letter { text-decoration:underline;}

#maincontent form { margin: 0 auto; padding: 0; width: 320px;}
#maincontent form input, #maincontent form textarea, #maincontent form
select { width:auto; margin:5px 0 5px 10px;}
#maincontent form br { clear:left; }
#maincontent form.search { margin: 0 auto; padding: 0; width: 160px;}

Hi

Radio buttons take styles somewhat inconsistently from browser to
browser when input styles are declared, you could add a class removing
borders or other values you don't want, this will look after the
browsers that do render them.

This tut shows you how to layout a two column form with CSS, a three
column one would follow the same principles.

http://www.adobe.com/devnet/dreamwea...forms_pt3.html


This one explains using labels as block level elements to break the
label and input onto two seperate lines and how to use labels as block
level elements to lay out a form "table style".

http://www.adobe.com/devnet/dreamwea...forms_pt2.html

Further tuts on forms and CSS are available here:

This one is a basic intro to form styling, which you likely won't want
to read, or perhaps you will.
http://www.adobe.com/devnet/dreamwea...forms_pt1.html


--
Cheers jojo
Adobe Community Expert for Dreamweaver 8
----------------------------------------------------
http://www.webade.co.uk
http://www.ukcsstraining.co.uk/
----------------------------------------------------
Extending Knowledge, Daily.
http://www.communityMX.com/
Free 10 day trial
http://www.communitymx.com/joincmx.cfm
----------------------------------------------------

I skimmed over those tutorials the other day.

Anyway, I don't want a 2-col or 3-col form, I just meant it's in a 2-col or
3-col page layout.

I applied a class to my radio buttons that didn't have a background color or
border, but it still shows it. What am I missing?

Dan


"jojo" <jojo (AT) zoot3 (DOT) com> wrote

Hi

Radio buttons take styles somewhat inconsistently from browser to browser
when input styles are declared, you could add a class removing borders or
other values you don't want, this will look after the browsers that do
render them.

This tut shows you how to layout a two column form with CSS, a three
column one would follow the same principles.

http://www.adobe.com/devnet/dreamwea...forms_pt3.html


This one explains using labels as block level elements to break the label
and input onto two seperate lines and how to use labels as block level
elements to lay out a form "table style".

http://www.adobe.com/devnet/dreamwea...forms_pt2.html

Further tuts on forms and CSS are available here:

This one is a basic intro to form styling, which you likely won't want to
read, or perhaps you will.
http://www.adobe.com/devnet/dreamwea...forms_pt1.html


--
Cheers jojo
Adobe Community Expert for Dreamweaver 8
----------------------------------------------------
http://www.webade.co.uk
http://www.ukcsstraining.co.uk/
----------------------------------------------------
Extending Knowledge, Daily.
http://www.communityMX.com/
Free 10 day trial
http://www.communitymx.com/joincmx.cfm
----------------------------------------------------

Dan Galfano wrote:

I skimmed over those tutorials the other day.

Anyway, I don't want a 2-col or 3-col form, I just meant it's in a 2-col or
3-col page layout.

I applied a class to my radio buttons that didn't have a background color or
border, but it still shows it. What am I missing?

Check your specificity, you should be able to override the settings on
the radio buttons. They are inheriting styles from input, right?

--
Cheers jojo
Adobe Community Expert for Dreamweaver 8
----------------------------------------------------
http://www.webade.co.uk
http://www.ukcsstraining.co.uk/
----------------------------------------------------
Extending Knowledge, Daily.
http://www.communityMX.com/
Free 10 day trial
http://www.communitymx.com/joincmx.cfm
----------------------------------------------------

Yes, in IE it's taking the border and background color. In Opera, just the
border. In FF, it's fine.


"jojo" <jojo (AT) zoot3 (DOT) com> wrote

Dan Galfano wrote:
I skimmed over those tutorials the other day.

Anyway, I don't want a 2-col or 3-col form, I just meant it's in a 2-col
or 3-col page layout.

I applied a class to my radio buttons that didn't have a background color
or border, but it still shows it. What am I missing?

Check your specificity, you should be able to override the settings on the
radio buttons. They are inheriting styles from input, right?

--
Cheers jojo
Adobe Community Expert for Dreamweaver 8
----------------------------------------------------
http://www.webade.co.uk
http://www.ukcsstraining.co.uk/
----------------------------------------------------
Extending Knowledge, Daily.
http://www.communityMX.com/
Free 10 day trial
http://www.communitymx.com/joincmx.cfm
----------------------------------------------------

Dan Galfano wrote:

Yes, in IE it's taking the border and background color. In Opera, just the
border. In FF, it's fine.

Still having a problem? Can I see how the rules are written?

--
Cheers jojo
Adobe Community Expert for Dreamweaver 8
----------------------------------------------------
http://www.webade.co.uk
http://www.ukcsstraining.co.uk/
----------------------------------------------------
Extending Knowledge, Daily.
http://www.communityMX.com/
Free 10 day trial
http://www.communitymx.com/joincmx.cfm
----------------------------------------------------

Sure. Some may not apply, but I just copied all the form rules. I tried
appling the .noborder class on the radio button, but that didn't do
anything. I had previously put a class on each form element before I
figured out I could put input and have them all be styled w/o having to add
classes, so that's why there's a duplicate.

form {margin:0; padding:0;}
..formfields { font: 12px Arial, Helvetica, sans-serif; background: #FFF;
color: #369; border: 1px solid #006; margin: 2px 2px 0 0;}
input { font: 12px Arial, Helvetica, sans-serif; background: #FFF; color:
#369; border: 1px solid #006; margin: 2px 2px 0 0;}
..submit { font: 12px Arial, Helvetica, sans-serif; color: #FFF;
background-color: #69C; border-top: 1px solid #369; border-right: 1px solid
#003; border-bottom: 1px solid #003; border-left: 1px solid #369; padding:
1px 6px;}
select { font: 12px Arial, Helvetica, sans-serif; color: #369; border: 1px
solid #003; padding: 2px;}
textarea {overflow: auto; border: 1px solid #006; color: #369; font: 12px
Arial, Helvetica, sans-serif; padding: 5px;}
..noborder {margin-top: 2px; padding-top: 2px;}
input:focus, select:focus, textarea:focus {background-color: #f2f2f2; color:
#369;}
legend { padding: 3px 5px; color: #666; background: #f2f2f2; border-top: 1px
solid #ccc; border-right: 1px solid #999; border-bottom: 1px solid #999;
border-left: 1px solid #ccc;}
fieldset {border: 1px solid #ccc; padding: 10px; margin: 0;}
label {display: block; float: left; width: 100px; padding: 0; margin: 5px 0
0; text-align: right; }
label:first-letter { text-decoration:underline;}

This is my radio button:
<input name="POL_ID" type="radio" class="noborder"
value="<%=(rsChoicesActive.Fields.Item("POL_ID").V alue)%>">

Thanks!

Dan


"jojo" <jojo (AT) zoot3 (DOT) com> wrote

Dan Galfano wrote:
Yes, in IE it's taking the border and background color. In Opera, just
the border. In FF, it's fine.

Still having a problem? Can I see how the rules are written?

--
Cheers jojo
Adobe Community Expert for Dreamweaver 8
----------------------------------------------------
http://www.webade.co.uk
http://www.ukcsstraining.co.uk/
----------------------------------------------------
Extending Knowledge, Daily.
http://www.communityMX.com/
Free 10 day trial
http://www.communitymx.com/joincmx.cfm
----------------------------------------------------

Dan Galfano wrote:

.noborder {margin-top: 2px; padding-top: 2px;}

Your .noborder class doesn't remove the border. Change it to this and it
works fine for me.

..noborder {margin-top: 2px; padding-top: 2px; border: none;}

--
Cheers jojo
Adobe Community Expert for Dreamweaver 8
----------------------------------------------------
http://www.webade.co.uk
http://www.ukcsstraining.co.uk/
----------------------------------------------------
Extending Knowledge, Daily.
http://www.communityMX.com/
Free 10 day trial
http://www.communitymx.com/joincmx.cfm
----------------------------------------------------

You know, I did do that last night and it did take the border off for Opera
and IE. I must've removed it when I was trying to get the background to not
follow the rule. This is only in IE where it's taking the input rule's
background still. How can I get rid of that?

Thanks!

Dan



"jojo" <jojo (AT) zoot3 (DOT) com> wrote

Dan Galfano wrote:
.noborder {margin-top: 2px; padding-top: 2px;}

Your .noborder class doesn't remove the border. Change it to this and it
works fine for me.

.noborder {margin-top: 2px; padding-top: 2px; border: none;}

--
Cheers jojo
Adobe Community Expert for Dreamweaver 8
----------------------------------------------------
http://www.webade.co.uk
http://www.ukcsstraining.co.uk/
----------------------------------------------------
Extending Knowledge, Daily.
http://www.communityMX.com/
Free 10 day trial
http://www.communitymx.com/joincmx.cfm
----------------------------------------------------

nevermind. I was trying to remove the background-color when I should have
just added one.

Thanks!

"Dan Galfano" <danielNO (AT) SPAMgalfanodesign (DOT) com> wrote

You know, I did do that last night and it did take the border off for
Opera and IE. I must've removed it when I was trying to get the
background to not follow the rule. This is only in IE where it's taking
the input rule's background still. How can I get rid of that?

Thanks!

Dan



"jojo" <jojo (AT) zoot3 (DOT) com> wrote in message
news:e37k4b$3tu$1 (AT) forums (DOT) macromedia.com...
Dan Galfano wrote:
.noborder {margin-top: 2px; padding-top: 2px;}

Your .noborder class doesn't remove the border. Change it to this and it
works fine for me.

.noborder {margin-top: 2px; padding-top: 2px; border: none;}

--
Cheers jojo
Adobe Community Expert for Dreamweaver 8
----------------------------------------------------
http://www.webade.co.uk
http://www.ukcsstraining.co.uk/
----------------------------------------------------
Extending Knowledge, Daily.
http://www.communityMX.com/
Free 10 day trial
http://www.communitymx.com/joincmx.cfm
----------------------------------------------------