Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 3 123 LastLast
Results 1 to 15 of 35
  1. #1
    New Coder
    Join Date
    Apr 2005
    Posts
    72
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Who decided we should be using CSS for layout?

    I was spending some time fussing with a site last night trying to get all my divs to line up properly across multiple browsers. The operation I was doing was quite simple, just a two column layout, one of which with headers and subsections, and one with straight content.

    Anyhow, once I got everything to line up properly in one browser, it would go all funky in another, and I got to wondering who it was that decided that in order to be "good" web designers we need to use CSS to do things that are easily taken care of my tables? Consistently when I posted code using tables for the layout, I'd get snide remarks about how I should be using CSS and not tables. What's so bad about tables?

    What does CSS do better as far as layout goes than tables? Can CSS easily set up a fluid matched height two column layout? Absolutely not. Can CSS guarantee predictable results across multiple platforms? Absolutely not.

    To me, it seems like CSS simply isn't ready to be implemented as the main contender as far as website layout goes. Too often I'm finding myself either limited by the confines of CSS, or finding myself frustrated by the lack of sense involved in creating a website with CSS (for example, last night I was trying to give a div a background which stretched up slightly higher than the content within. not only did the padding attribute do absolutely nothing, the div only stretched out to its pre-defined static height when I applied a border to it! THAT'S supposed to be the new standard in web design?! )

    Can someone please explain why I'm spending all this time doing things in CSS that could be handled much easier and with better result with a simple table layout? And don't say "just use tables" because thanks to the new attitudes among web-savvy types, I've got clients requesting that I do their sites in CSS

  • #2
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    Because CSS is the ideal solution. In a perfect world where all browsers supported standards, CSS allows for the separation of layout / presentation and actual data. It is much, much easier to change things if you use pure CSS.
    To see really, really neat examples of this, see the CSS Zen Garden. Ultra cool.
    http://www.csszengarden.com/

    This allows for designers to design and coders to code. Perfect for the business world where the MVC methodology is used extensively. XML/XSL and all that jazz. Big sites with big teams. You get the picture.

    Arguably the biggest reason, though, is accessibility. User agents that render visual content in a audible manner are very, very confused by tables used for layout.

    Using pure CSS is something I strive for, but due to browser limitations, I do still use tables for layout for some things. CSS solutions simply take too much time and energy to do well and they simply can't do some things cross-browser yet. It will come. It is worth your time to learn CSS and to separate data and presentation as much as possible.

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #3
    New Coder
    Join Date
    Apr 2005
    Posts
    72
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by nikkiH
    Because CSS is the ideal solution. In a perfect world where all browsers supported standards, CSS allows for the separation of layout / presentation and actual data. It is much, much easier to change things if you use pure CSS.
    To see really, really neat examples of this, see the CSS Zen Garden. Ultra cool.
    http://www.csszengarden.com/

    This allows for designers to design and coders to code. Perfect for the business world where the MVC methodology is used extensively. XML/XSL and all that jazz. Big sites with big teams. You get the picture.

    Arguably the biggest reason, though, is accessibility. User agents that render visual content in a audible manner are very, very confused by tables used for layout.

    Using pure CSS is something I strive for, but due to browser limitations, I do still use tables for layout for some things. CSS solutions simply take too much time and energy to do well and they simply can't do some things cross-browser yet. It will come. It is worth your time to learn CSS and to separate data and presentation as much as possible.
    So we should be using CSS simply to push the major browsers to support a standard of CSS? I guess that makes sense. It doesn't help much at 2AM while trying to match div widths though!

  • #4
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    Not exactly.

    We should use it because it is simply better coding all around. It makes your life easier later when you want to change things. It makes life easier for other people who come after you to change the layout of the entire site by changing one CSS file. It helps people with disabilities use your page. It forces you to write well-designed pages that are as easy to render in a PDA as MSIE (you do check that your page renders intelligibly with stylesheets off, right??). And so on.

    The push for standards is a result of all that, not the other way around.

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #5
    Senior Coder JamieR's Avatar
    Join Date
    Oct 2004
    Location
    United Kingdom
    Posts
    3,161
    Thanks
    0
    Thanked 5 Times in 5 Posts
    CSS allows designers to create websites which look better, load faster and a lot more versatile that its table counterparts. The W3C decided that CSS should be used for web layouts, and the concept of standards compliant web development is really catching on now

  • #6
    New Coder
    Join Date
    Mar 2005
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's more intuitive. After programming with CSS for a while you will see that it is easier than tables. When you start nesting tables within tables with image spacers you stop seeing the downsides of CSS.

  • #7
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    Quote Originally Posted by eelozano
    It's more intuitive. After programming with CSS for a while you will see that it is easier than tables. When you start nesting tables within tables with image spacers you stop seeing the downsides of CSS.
    Now, see, to me it's the opposite.
    When I try to nest things with CSS, I assume divs will stretch like tables, and they never do it quite right.
    My biggest problem one time was with a div that then had a real table in it (result of a query, like a report). Damn table would stretch outside the div and get all funky.
    I won't pretend CSS isn't a pain in the ***. It's just a worthwhile pain in the ***.

    edit: Oh, is *ss a swear word, even though they say it on TV? My bad.

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #8
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    heh heh, I know your pain
    (for example, last night I was trying to give a div a background which stretched up slightly higher than the content within. not only did the padding attribute do absolutely nothing, the div only stretched out to its pre-defined static height when I applied a border to it! THAT'S supposed to be the new standard in web design?! )
    Try the margin attribute. 10px or -10px and see if that helps you.

    A lot of your difficulty seems to come from the transfer from tables to css. I found that it took me to adopt a different mental approach to achieve the results I wanted in css. I think this was a good example:

    When I try to nest things with CSS, I assume divs will stretch like tables, and they never do it quite right.
    Divs stretch to accommodate their content but I agree, they do so differently from tables.

    Don't worry. You'll get the hang of it soon and see things differently.

    Bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #9
    New Coder
    Join Date
    Apr 2005
    Posts
    72
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by eelozano
    It's more intuitive. After programming with CSS for a while you will see that it is easier than tables. When you start nesting tables within tables with image spacers you stop seeing the downsides of CSS.
    I've done a fair share of designing with both methods and I can tell you that laying out tables is way easier than laying out divs. Give me spacer images over container divs any day.

    Plus, once you get everything laid out in tables, you generally don't have to do it all over again to get it to work in IE

  • #10
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Nobody told anybody that they have to use CSS for layout. The W3C says that HTML (XHTML) is a semantic markup language, and that you should not abuse semantics to achieve presentation.

    Now, we have CSS. We use it because that's what is commonly available between browsers. If you wanted, you could use XSLT and XSL-FO to layout your pages. Or you could do XSLT+SVG. Nobody says you have to use CSS.

    With that out of the way, CSS is hardly an ideal solution as one put it. Many of the layout models are effectively crippled until CSS3 becomes mainstream, and even then I'm sure some people will complain about it. CSS2 is good, and I use it when I can, adding hacks to bring IE up to par. And if you're creative, it's usable. But I wouldn't call it necessarily great.

  • #11
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I was spending some time fussing with a site last night trying to get all my divs to line up properly across multiple browsers.
    The thing about CSS is it relies on the foundation created by your HTML. Make sure you're using the appropriate DOCTYPE and validating against it as you go.

    Until I understood the difference between quirks mode and strict mode, CSS was just frustrating. It's not always straight-forward, but you're in the right place if you need help.
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #12
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,074
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Last edited by glenngv; 07-12-2005 at 01:29 PM.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #13
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    Quote Originally Posted by jkd
    With that out of the way, CSS is hardly an ideal solution as one put it. Many of the layout models are effectively crippled until CSS3 becomes mainstream, and even then I'm sure some people will complain about it. CSS2 is good, and I use it when I can, adding hacks to bring IE up to par. And if you're creative, it's usable. But I wouldn't call it necessarily great.
    I'm sorry; you misunderstood what I meant. I guess you only read my first sentence.
    I didn't mean CSS is currently ideal and should be used exclusively. One look at my sites would show you I don't do that -- I agree with you. Many browsers are effectively crippled right now. I'd like to use pure CSS, but some browsers just don't support all the coolness of CSS right yet and mucking about trying to hack crap to support all the eccentricities of the various browsers is a waste of my time.
    I meant that the ideal most would like to reach is the complete separation of presentation and content, and in theory, CSS would acheive that ideal. If every browser supported standards perfectly. Unfortunately, that is not yet the case.

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #14
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It all depends on how you learned webdesign and coding.

    If you are an IE user from the begin and only support that, you almost certainly use "quirks" to your advantage, for example, text-align:center will center all childs of the parent whic has that text-align setting. But if you look at the function, it's meant for aligning inline objects, not block level objects!

    If you start out with a browser which (almost) doesn't have quirks, you are doing everything right, and you only have to fix certain bugs for browsers with bugs.

    Also the lack of coding knowledge can lead you to not use the best way to code something. I've had someone who coded his websites with padding-top:0px;margin-top:0px, etc etc etc, while he could just use margin:0;padding:0; and have a very short time changing values.

    So to make a story short, it depends on how you learned it, and that's the only reason you are supporting your statement.
    CATdude about IE6: "All your box-model are belong to us"

  • #15
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'll just say this:

    Your position and feelings are not unique. Everybody goes through that initially. Well, mostly. I never looked back at tables, because I understand the reasons for CSS. If you don't, I highly suggest thinking it over more and talking to more people who know the score. But I sure as hell got frustrated like all get out trying to work that stuff. But if you're serious, and if you're good at what you do (meaning LEARNING), then it will come. And once it does, life will be beautiful.

    I don't use a single table anymore that isn't presenting tabular data. Some people think you NEED to use SOME tables still, but that's utter bull****. Those people are not designing for the web as much as they should and most importantly CAN be.

    Keep at it, man. You'll start to see the light.


  •  
    Page 1 of 3 123 LastLast

    Posting Permissions

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