SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Tableless semantically correct css form

    My tableless form:
    http://www.urmood.com/urmood_css_tableless_forms/

    Hi there,

    I've been looking for a good css alternative to table based forms. I found a few articles all with different implementations, however, the majority of them used div, br, lists, paragraphs etc which isnít semantically correct. Most didnít validate to XHTML 1.0 Strict, and fell apart in different browsers, and they also didnít cater for radio buttons, check boxes etc as soon as you added any the form died. The css was bloated too!

    ANYWAYS iíve been working on my own tableless form which covers all the points above and seems pretty bulletproof:

    Tested and working in Windows: IE 5, IE 5.5, IE 6, IE 7, FF 1, FF 2, Netscape 6*, Netscape 7*, Netscape 8, Opera 5, Opera 6, Opera 7, Opera 8, Opera 9

    Thought Iíd share it and see what you guys think, any feedback would be very much appreciated (good or bad I donít mind) lol

    http://www.urmood.com/urmood_css_tableless_forms/

  2. #2
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You do know that you can assign an ID to a form, and then apply styles to it, right? The div needs to go, and so does the class. There is only one instance of it.

    What's up with the "34.58em" width? Proprietary class name on the div wrapper? Why is there a "txt" before each id/name/for attribute?

    Why are there inline styles, and why don't you have external stylesheets?

    Other than that it looks consistent on FF 1.5 / IE6 (too lazy to check other browsers; will take your word for it). The em might be a problem if you're applying graphics (fixed width).

    Not bad.
    Cross browser css bugs

    Dan Schulz you will be missed

  3. #3
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The fieldsets are too wide in IE5/Mac and the <textarea> is too wide in Safari. Also it seems that clicking on a label does nothing in Safari. It may work if you nested the form control in its label.

    Try adding this to the stylesheet.
    Code:
    /* for IE5/Mac only \*//*/
    *>html .nestedFieldset{
    	display:inline-block;
    }
    /* for IE5/Mac only */
    Quote Originally Posted by SoulScratch
    The div needs to go, and so does the class. There is only one instance of it.
    Yes, there is only one member of that class, but that does not mean that you should change it to an ID.

    Quote Originally Posted by SoulScratch
    Why are there inline styles, and why don't you have external stylesheets?
    Embedded stylesheets are helpful for demos so that you don't have to open a second window to see the styles that are being applied.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  4. #4
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Kravvitz you beat me to it lol Thanks for the IE/mac and safari results

    There is no external stylesheet as I thought it would be easier for folk to view the source.

    There are inline styles as i just knocked the page up as a demo.

    The reason it is a class and not and ID is that on a large site with many forms you would use the class again.

    The "txt" is just something i like to use thats all lol

    "Proprietary class" could think of a better name lol

  5. #5
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz

    Embedded stylesheets are helpful for demos so that you don't have to open a second window to see the styles that are being applied.
    Agreed, but I did take a look at the actual main site and noticed there was no external stylesheet on that; so i assumed he didn't use external stylesheets.
    Cross browser css bugs

    Dan Schulz you will be missed

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah. I didn't look at the code of the site's main page.

    Perhaps mute20 will make the stylesheet external when he recodes the form on that page to be tableless.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  7. #7
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You don't need to wrap the whole form in a fieldset IMO, each section has a fieldset which serves as the block level element within the form, why have another one around the whole thing? A fieldset means a 'set of fields', not 'a useful tag to serve as a block level element when I need one'

    Also, the div should go, just put the class on the form, as someone said above.

  8. #8
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Guys,

    Thanks for the feedback so far. Taking your comments in to consideration I've updated the code. How are things looking now?

    Also if anybody knows of a better tableless form implementation it would be good to know as I haven't managed to find any??

    Thanks again


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •