Standards Compliance and Form Vomit

[lightnb]

I created my first table-free form layout using CSS.

It displayed perfectly in Firefox. In Internet Explorer it looks like form-element-vomit.

So I followed the advise of the sticky at the top of this forum that suggested using the W3C validation tool.

It found over sixty errors, and I corrected all of them.

Now my form looks like form-element-vomit in both Firefox and Internet Explorer. Yay standards compliance!

Ok, seriously. I don't get how creating a site the 'right' way made it worse.

Can somone please help point me in the right direction? I would like my site to work in both browsers, not be broken in both.

[NogDog]

It's hard to give any specific answers without knowing precisely what sort of layout you're going for. That being said, one thing I usually do is to use Label elements which do not wrap around the Input element (using the for="element_id" attribute in the Label tag to associate it with its input element). Then I can style the label and the input element separately, usually floating them within a P element. For an example, you could take a look at my Email Me (http://www.charles-reace.com/Email_Me) form on my personal site.

[lightnb]

Below is the HTML from my form (bear in mind that it is generated by a PHP script). Currently I have my <label> tags wraping around the form elements. I'll try it the other way and see what happens.

<form action='/RVM/add_event.php' method='post'>

<div style='height:580px;' ID='border'>
<fieldset ID='details'>
<legend align='left' class='med_form_text'>
Event Details
</legend>

<label style='position:absolute; top: 14px; left:10;' id='event_name_label' class='med_form_text' for='event_name'>
Event Name:<input style='width:355px;' id='event_name' class='input_text_field' name='event_name' type='text' value='Event Name' maxlength='50' tabindex='1' onfocus='clearField(this)'/>
</label>

<label style='position:absolute; top: 14px; left:480;' id='producer_label' class='med_form_text' for='producer'>

Producer:<select style='width:175px;' id='producer' class='input_select' name='producer'><option class='input_select'>Do-Wap Productions</option><option class='input_select'>Fickle and Pride</option><option class='input_select'>Rahl Entertainment</option></select>
</label>

<label style='position:absolute; top: 60px; left:10;' id='venue_label' class='med_form_text' for='venue'>
Venue:<select style='width:175px;' id='venue' class='input_select' name='venue'><option class='input_select'>Skate America!</option></select>
</label>


<label style='position:absolute; top: 60px; left:258;' id='room_label' class='med_form_text' for='room'>

Room:<select style='width:140px;' id='room' class='input_select' name='room'><option class='input_select'>Rink 1</option></select>
</label>


<label style='position:absolute; top: 60px; left:471;' id='supervisor_label' class='med_form_text' for='supervisor'>
Supervisor:<select style='width:175px;' id='supervisor' class='input_select' name='supervisor'><option class='input_select'>Qwreqwre, Qwerqwr</option><option class='input_select'>Rahl, Nick</option></select>
</label>

[lightnb]

part 2:
</fieldset>

<fieldset ID='times'>
<legend align='left' class='med_form_text'>
Time &amp; Date
</legend>


<label style='position:absolute; top: 14px; left:30;' class='med_form_text' for='start_time'>
Start Time:<select id='start_time' class='input_select' name='start_time'><option class='input_select'>0</option><option class='input_select'>1</option><option class='input_select'>2</option><option class='input_select'>3</option><option class='input_select'>4</option><option class='input_select'>5</option><option class='input_select'>6</option><option class='input_select'>7</option><option class='input_select'>8</option><option class='input_select'>9</option><option class='input_select'>10</option><option class='input_select'>11</option><option class='input_select'>12</option><option class='input_select'>13</option><option class='input_select'>14</option><option class='input_select'>15</option><option class='input_select'>16</option><option class='input_select'>17</option><option class='input_select'>18</option><option class='input_select'>19</option><option class='input_select'>20</option><option class='input_select'>21</option><option class='input_select'>22</option><option class='input_select'>23</option></select>

</label>

<label style='position:absolute; top: 14px; left:152;' class='med_form_text' for='start_time_min'>
:<select id='start_time_min' class='input_select' name='start_time_min'><option class='input_select'>0</option><option class='input_select'>5</option><option class='input_select'>10</option><option class='input_select'>15</option><option class='input_select'>20</option><option class='input_select'>25</option><option class='input_select'>30</option><option class='input_select'>35</option><option class='input_select'>40</option><option class='input_select'>45</option><option class='input_select'>50</option><option class='input_select'>55</option></select>

</label>

<label style='position:absolute; top: 60px; left:34;' class='med_form_text' for='end_time'>
End Time:<select id='end_time' class='input_select' name='end_time' ><option class='input_select'>0</option><option class='input_select'>1</option><option class='input_select'>2</option><option class='input_select'>3</option><option class='input_select'>4</option><option class='input_select'>5</option><option class='input_select'>6</option><option class='input_select'>7</option><option class='input_select'>8</option><option class='input_select'>9</option><option class='input_select'>10</option><option class='input_select'>11</option><option class='input_select'>12</option><option class='input_select'>13</option><option class='input_select'>14</option><option class='input_select'>15</option><option class='input_select'>16</option><option class='input_select'>17</option><option class='input_select'>18</option><option class='input_select'>19</option><option class='input_select'>20</option><option class='input_select'>21</option><option class='input_select'>22</option><option class='input_select'>23</option></select>

</label>

<label style='position:absolute; top: 60px; left:152;' class='med_form_text' for='end_time_min'>
:<select id='end_time_min' class='input_select' name='end_time_min' ><option class='input_select'>0</option><option class='input_select'>5</option><option class='input_select'>10</option><option class='input_select'>15</option><option class='input_select'>20</option><option class='input_select'>25</option><option class='input_select'>30</option><option class='input_select'>35</option><option class='input_select'>40</option><option class='input_select'>45</option><option class='input_select'>50</option><option class='input_select'>55</option></select>

</label>


<label style='position:absolute; top: 14px; left:266;' class='med_form_text' for='show_time'>
Show Time:<select id='show_time' class='input_select' name='show_time'><option class='input_select'>0</option><option class='input_select'>1</option><option class='input_select'>2</option><option class='input_select'>3</option><option class='input_select'>4</option><option class='input_select'>5</option><option class='input_select'>6</option><option class='input_select'>7</option><option class='input_select'>8</option><option class='input_select'>9</option><option class='input_select'>10</option><option class='input_select'>11</option><option class='input_select'>12</option><option class='input_select'>13</option><option class='input_select'>14</option><option class='input_select'>15</option><option class='input_select'>16</option><option class='input_select'>17</option><option class='input_select'>18</option><option class='input_select'>19</option><option class='input_select'>20</option><option class='input_select'>21</option><option class='input_select'>22</option><option class='input_select'>23</option></select>

</label>

[lightnb]

Part Three:


<label style='position:absolute; top: 14px; left:395;' class='med_form_text' for='show_time_min'>
:<select id='show_time_min' class='input_select' name='show_time_min' ><option class='input_select'>0</option><option class='input_select'>5</option><option class='input_select'>10</option><option class='input_select'>15</option><option class='input_select'>20</option><option class='input_select'>25</option><option class='input_select'>30</option><option class='input_select'>35</option><option class='input_select'>40</option><option class='input_select'>45</option><option class='input_select'>50</option><option class='input_select'>55</option></select>

</label>



<label style='position:absolute; top: 60px; left:266;' class='med_form_text' for='show_time2'>
Show Time:<select id='show_time2' class='input_select' name='show_time2'><option class='input_select'>0</option><option class='input_select'>1</option><option class='input_select'>2</option><option class='input_select'>3</option><option class='input_select'>4</option><option class='input_select'>5</option><option class='input_select'>6</option><option class='input_select'>7</option><option class='input_select'>8</option><option class='input_select'>9</option><option class='input_select'>10</option><option class='input_select'>11</option><option class='input_select'>12</option><option class='input_select'>13</option><option class='input_select'>14</option><option class='input_select'>15</option><option class='input_select'>16</option><option class='input_select'>17</option><option class='input_select'>18</option><option class='input_select'>19</option><option class='input_select'>20</option><option class='input_select'>21</option><option class='input_select'>22</option><option class='input_select'>23</option></select>

</label>


<label style='position:absolute; top: 60px; left:395;' class='med_form_text' for='show_time2_min'>
:<select id='show_time2_min' class='input_select' name='show_time2_min' ><option class='input_select'>0</option><option class='input_select'>5</option><option class='input_select'>10</option><option class='input_select'>15</option><option class='input_select'>20</option><option class='input_select'>25</option><option class='input_select'>30</option><option class='input_select'>35</option><option class='input_select'>40</option><option class='input_select'>45</option><option class='input_select'>50</option><option class='input_select'>55</option></select>

</label>


<label style='position:absolute; top: 14px; left:510;' class='big_form_text' for='date'>
Date:
<input tabindex='1' onfocus='clearField(this)' id='date' style='width:105px; text-align:center;' class='input_text_field' maxlength='10' value='Date' name='date' type='text'>
<img alt='Choose Date' style='position:absolute; top: 2px; left:163;' width='16px' height='16px' src='include/datechooser/calendar.gif' onclick='showChooser(this, "date", "chooser", 1950, 2010, Date.patterns.ShortDatePattern, false);'>
</label>


<label style='position:absolute; top: 60px; left:515;' class='checkbox_text' for='after_midnight_min'>
<input type='checkbox' style='position:relative; top: 1px; left:-6;' id='after_midnight_min' class='checkbox' name='after_midnight_min'/>Event ends after midnight.
</label>

</fieldset>




<fieldset style='border: 1px dashed #aa794e; color:black; width:733px; height:170px; position:relative; top:70px; margin:auto;' id='positions'><legend align='left' class='med_form_text'>Positions Needed</legend><label style='position:absolute; top: 7px; left:14;' class='checkbox_text' for='Lighting_Designer'>

<input style='position:relative; top: 1px; left:-5;' type='checkbox' Id='Lighting_Designer'/>Lighting Designer
</label><label style='position:absolute; top: 7px; left:259;' class='checkbox_text' for='Follow_Spot_Operator'>
<input style='position:relative; top: 1px; left:-5;' type='checkbox' Id='Follow_Spot_Operator'/>Follow Spot Operator
</label><label style='position:absolute; top: 7px; left:505;' class='checkbox_text' for='Dog_Catcher'>
<input style='position:relative; top: 1px; left:-5;' type='checkbox' Id='Dog_Catcher'/>Dog Catcher
</label><label style='position:absolute; top: 37px; left:14;' class='checkbox_text' for='Cable_Coiler'>
<input style='position:relative; top: 1px; left:-5;' type='checkbox' Id='Cable_Coiler'/>Cable Coiler
</label><label style='position:absolute; top: 37px; left:259;' class='checkbox_text' for='Stage_Sweeper'>
<input style='position:relative; top: 1px; left:-5;' type='checkbox' Id='Stage_Sweeper'/>Stage Sweeper
</label><label style='position:absolute; top: 37px; left:505;' class='checkbox_text' for='Console_Cleaner'>
<input style='position:relative; top: 1px; left:-5;' type='checkbox' Id='Console_Cleaner'/>Console Cleaner
</label><label style='position:absolute; top: 67px; left:14;' class='checkbox_text' for='Opera_Singer'>

<input style='position:relative; top: 1px; left:-5;' type='checkbox' Id='Opera_Singer'/>Opera Singer
</label><label style='position:absolute; top: 67px; left:259;' class='checkbox_text' for='FOH_Audio_Engineer'>
<input style='position:relative; top: 1px; left:-5;' type='checkbox' Id='FOH_Audio_Engineer'/>FOH Audio Engineer
</label><label style='position:absolute; top: 67px; left:505;' class='checkbox_text' for='Monitor_Engineer'>
<input style='position:relative; top: 1px; left:-5;' type='checkbox' Id='Monitor_Engineer'/>Monitor Engineer
</label><label style='position:absolute; top: 97px; left:14;' class='checkbox_text' for='Pizza_Delivery_Guy'>
<input style='position:relative; top: 1px; left:-5;' type='checkbox' Id='Pizza_Delivery_Guy'/>Pizza Delivery Guy
</label><label style='position:absolute; top: 97px; left:259;' class='checkbox_text' for='Stage_Hand'>
<input style='position:relative; top: 1px; left:-5;' type='checkbox' Id='Stage_Hand'/>Stage Hand
</label><label style='position:absolute; top: 97px; left:505;' class='checkbox_text' for='Rock_Climber'>
<input style='position:relative; top: 1px; left:-5;' type='checkbox' Id='Rock_Climber'/>Rock Climber
</label><label style='position:absolute; top: 127px; left:14;' class='checkbox_text' for='Foog_Machine_Operator'>

<input style='position:relative; top: 1px; left:-5;' type='checkbox' Id='Foog_Machine_Operator'/>Foog Machine Operator
</label>
</fieldset>


<div align='center' style='position:relative; left:230px; top:93px;' >
<input type='submit' style='background-color:#550000; color:#ccc; font-family: georgia, serif; font-size:16px; width:175px; height:25px; border-left:1px solid #550000; border-right:1px solid #550000; border-bottom:1px solid #550000; border-top:1px solid #550000;' value='Add Event' id='add_event' name='add_event'/>
</div>

</div>
</form>

[lightnb]

I've tried it both ways, and niether one works correctly in either browser.

This Is The Live Site (http://www.rahlentertainment.com/RVM/add_event.php)

[NogDog]

I've tried it both ways, and niether one works correctly in either browser.

This Is The Live Site (http://www.rahlentertainment.com/RVM/add_event.php)
The link didn't work for me.

However, I just took a look at your code samples above and...wow!...that's a lot of absolute positioning! Maybe you'll need to absolutely position a <div> or some other container, but you really shouldn't have to absolutely position every form element -- well, unless you're trying to fit them precisely over some sort of background image, perhaps. Otherwise, I think you'd be better off letting things flow normally, controlling spacing between elements via margins, paddings, line-heights, etc., rather than trying to place each and every element absolutely (and doing so by pixel position can have nasty repercussions when the user increases the browser font-size).

[lightnb]

Oops.... I decided to redo my folder structure to make it more organized, and broke the link in the process.

(and before you think I'm too wierd, let me say that I put a bunch of 'random' data into the database just for testing purposes, which is why the form has 'strange' options)


This New Link Actually Works (http://www.rahlentertainment.com/RVM/interface/manager/add_event.php)


In the version that worked in Firefox I had relativly positioned fieldsets that contained absolute form elements which seemed logical at the time, but I guess it doesn't work.

I'm removing all of the absolute positioning to see what happens...

[lightnb]

Well, with the positioning turned off all of the elements aren't on top of each other (as much), but it's still a mess.

[ray326]

I think next I'd add

label { display:block; float:left }

[lightnb]

With "label { display:block; float:left }" they are less on top of each other, but there's still some overlap.

Also, the checkbox array (which is dynamically generated) should be neatly aligned in a grid with three columns per row.

I had a PHP function that arranged them using a formula that assigned absolute positioning, but I guess absolute positioning isn't the right way to do it?

[felgall]

You only need absolute positioning if you want elements to overlap. To build a web page where nothing overlaps you just need to use

margin
padding
width
float
clear

as required on the elements top build outwards from the top left corner.

[lightnb]

I used padding to realign the top part of my form. The code passed validation.

It displays correctly in FF 1.5 for Linux @ 1280 x 1024.

It displays 'ok' in FF 1.5 for Windows @ 1024 x 768, but the 'float: right;' elements are too low.

IE 6 for Windows is still smoking crack.

[drhowarddrfine]

I don't have time to look at this but you have too many CSS errors. (http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.rahlentertainment.com%2FRVM%2Finterface%2Fmanager%2Fadd_event.php)

In addition, you are using xhtml ver 1.1 which you should NOT be using. It is designed to be pure xml and served as such but you are serving it as html.

[lightnb]

I've fixed all CSS errors except:

Lexical error at line 134, column 0. Encountered: <EOF> after : ""

I couldn't find 'EOF' in the source code anywhere.

I used xhtml in order to pass the other validator. With the other doctype declarations it keep complaining about charector encoding and some other thing.

[ray326]

EOF = End of File

The next thing would be to use the ID each of the fieldsets to put appropriate widths on the labels. E.g. in the last one

#positions label { width: 25% }

[drhowarddrfine]

I'm not saying anything about using xhtml. I am saying you are using the wrong version. You shouldn't use 1.1 and should drop down to 1.0.

In addition, the doctype is the very first thing you should put on any web page. It is never an afterthought. You don't try and match the doctype to the code but should make the code match the doctype.

[lightnb]

I've added:

#details label
{
width: 25%
}

#times label
{
width: 25%
}

#positions label
{
width: 25%
}

to the style sheet, but I'm not sure I noticed a difference. What does that do?



I'm not saying anything about using xhtml. I am saying you are using the wrong version. You shouldn't use 1.1 and should drop down to 1.0.

In addition, the doctype is the very first thing you should put on any web page. It is never an afterthought. You don't try and match the doctype to the code but should make the code match the doctype.

I don't really know what the difference is between all the doctypes, or, more importantly, what the reason is for using one over the other.