SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,714
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Tables and Tabular Data

    Excel or calendar information is a given, but could login controls be considered tabular data? (i.e. - "Username", "Password" and their two respective input boxes)

    I can see the above as being tabular due to the fact that both inputs require respective labels of which all require alignment of some sort. Besides, messing around with form controls gets to be fairly annoying because using CSS without tables on forms sucks. Using tables is much simpler. Your thoughts?

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, I don't consider form controls to be tabular data. The exception is if you have multiple sets of controls, like 'order rows'.

    A login form with CSS instead of tables is easy. In fact, most forms are (unless you need to style legends and have them look right in Gecko browsers).

    Code HTML4Strict:
    <form action="login.php" method="post" accept-charset="utf-8" id="login">
      <fieldset>
        <legend>Login</legend>
     
        <label for="user">Username</label>
        <input type="text" name="user" id="user">
     
        <br><label for="pwd">Password</label>
        <input type="password" name="pwd" id="pwd">
     
        <br><input type="submit" value="Login">
      <fieldset>
    </form>
    Code CSS:
    #login fieldset {
      position:relative;
      border:none;
      padding:0 0 0 6em;
    }
     
    #login legend {
      display:none;
    }
     
    #login label {
      position:absolute;
      left:0;
    }
     
    #user, #pwd {
      width:8em;
      margin-bottom:0.25em;
    }
     
    #login input[type="submit"] {
      margin-top:1.5em;
    }
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,714
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Cuckoo, but I'm having some issues with your code example for Strict.

    This is what I have so far:
    Code:
    			<form action="login.php" method="post" accept-charset="utf-8" id="login">
    			  <fieldset>
    				<legend>Login</legend>
    
    				<label for="user">Username</label>
    				<input type="text" name="user" id="user" />
    
    				<br /><label for="pwd">Password</label>
    				<input type="password" name="pwd" id="pwd" />
    
    				<br /><input type="submit" value="Login">
    			  <fieldset>
    			</form>
    The labels appear to be getting placed inside the inputs. Why? As for styling them, how does this approach suffice in making the actual task easier or any better than using that of tables (I'm not trying to start any tables vs. CSS crap or anything silly, it's just that my experience from using tables when forms are in question has been much easier versus using strictly CSS avenues).

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Wolf_22 View Post
    The labels appear to be getting placed inside the inputs. Why?
    Ah yes. I forgot about that buggy POS called Firefox.
    My code works in standards-compliant browsers, but Firefox messes it up. The easiest workaround is probably to add a div inside the fieldset.
    Code HTML4Strict:
    <form action="" method="post" accept-charset="utf-8" id="login">
      <fieldset>
        <legend>Login</legend>
     
        <div>
          <label for="user">Username</label>
          <input type="text" name="user" id="user">
     
          <br><label for="pwd">Password</label>
          <input type="password" name="pwd" id="pwd">
     
          <br><input type="submit" value="Login">
        </div>
      </fieldset>
    </form>
    Code CSS:
    #login fieldset {border:none; padding:0}
    #login legend {display:none}
    #login div {position:relative; padding-left:6em}
    #login label {position:absolute; left:0}
    #user, #pwd {width:8em; margin-bottom:0.25em}
    #login input[type="submit"] {margin-top:1.5em}

    Quote Originally Posted by Wolf_22 View Post
    As for styling them, how does this approach suffice in making the actual task easier or any better than using that of tables
    You mean apart from using less markup, more semantic markup and separating content from presentation?

    Quote Originally Posted by Wolf_22 View Post
    (I'm not trying to start any tables vs. CSS crap or anything silly, it's just that my experience from using tables when forms are in question has been much easier versus using strictly CSS avenues).
    I never really got into the habit of using tables for presentation, so my experience is the opposite. I find it very counter-intuitive to start placing labels and inputs in different table cells, even though the belong together.
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,714
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Interesting. So you're telling me that FF3 lacks proper support for web standards? If that's the case, then I'm assuming no browser properly supports web standards simply because all I remember from visiting these very forums was how everyone would always seem to boast about FF and how great (or now, better) it was for web standards.

    If that's the case (if no web browser properly follows web standards), then why continue this banter about it to begin with? I doubt they'll ever follow it.

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Wolf_22 View Post
    Interesting. So you're telling me that FF3 lacks proper support for web standards? If that's the case, then I'm assuming no browser properly supports web standards simply because all I remember from visiting these very forums was how everyone would always seem to boast about FF and how great (or now, better) it was for web standards.

    If that's the case (if no web browser properly follows web standards), then why continue this banter about it to begin with? I doubt they'll ever follow it.
    It is a matter of for this particular web standard that Opera 9, Safari3, Google Chrome, and IE8 all follow the standard more closely than Firefox 3 does. None of the browsers follows the CSS 2.1 standard perfectly although in most cases the small part that each browser hasn't got right is fairly obscure and would be seldom used. The browser that actually comes closest to supporting all of CSS 2.1 is IE8.

    Also in every case each new version of each browser comes closer to supporting the standard than the version before. They are all so close to full CSS 2.1 support now that one or two minor updates to each browser should see the CSS 2.1 standard fully implemented by all browsers. Since they already all fully support the HTML 4.01 standard that leaves only JavaScript/JScript where browsers are still some way off supporting the full DOM 3 section of the standards and it shouldn't take many more browser versions for most to achieve that as well.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,714
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And the reason it's taken this long to accomplish this is why again...?

  8. #8
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Wolf_22 View Post
    Interesting. So you're telling me that FF3 lacks proper support for web standards?
    No, FF3 generally has excellent support for web standards. But as with every single piece of software, there are bugs and quirks. Firefox has some odd behaviour when it comes to fieldsets and legends. It also has some float-related bugs, but on the whole it's very good.

    Quote Originally Posted by Wolf_22 View Post
    If that's the case, then I'm assuming no browser properly supports web standards simply because all I remember from visiting these very forums was how everyone would always seem to boast about FF and how great (or now, better) it was for web standards.
    No, I doubt that any browser has 100% bug free support for all web standards.

    Quote Originally Posted by Wolf_22 View Post
    If that's the case (if no web browser properly follows web standards), then why continue this banter about it to begin with? I doubt they'll ever follow it.
    Because all of the contemporary browsers support almost all of the HTML and CSS standards. And using a common standard with, possibly, a few hacks or kludges to circumvent the occasional shortcoming is far easier and better than using something that's non-standard and supported only by one or two browsers.

    Quote Originally Posted by Wolf_22 View Post
    And the reason it's taken this long to accomplish this is why again...?
    Several things. The CSS2.1 specification is not trivial to implement when you consider all the edge cases and weird combinations of properties that are possible. The specification is also somewhat ambiguous in a few places and deliberately vague in others.

    Then it's a chicken-and-egg problem: designers didn't embrace CSS because browser support was bad, so browser vendors didn't devote themselves to CSS development because designers didn't use it anyway. This is changing, which is clearly evident by Microsoft's recent commitment to the standards.

    A third reason is that not everyone is using the latest and greatest of browsers. In particular, many non-savvy users are still on IE6 and IE7, which lag behind the competition in CSS support. Designers, developers and marketing people often aren't willing to risk display problems for this large group of visitors. Again, it's a chicken-and-egg situation. If some large companies had the guts to abandon support* for legacy browsers, perhaps more people would have an incentive to upgrade?

    *) By 'support' I mean pixel-perfect rendering; the content should always be accessible in every browser.
    Birnam wood is come to Dunsinane

  9. #9
    SitePoint Enthusiast
    Join Date
    Nov 2008
    Location
    Minnesota
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That was a great overview of the issue. When I first got into design, I wondered why sites were still written in HTML.


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
  •