SitePoint Sponsor

User Tag List

Page 1 of 4 1234 LastLast
Results 1 to 25 of 76
  1. #1
    Non-Member emstro's Avatar
    Join Date
    Jul 2003
    Location
    Florida
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS - It's not as cool as some people make it out to be.

    After delving deep into CSS design and learning all the ins and outs - I don't get why people are trying to use CSS instead of tables. I know a bunch of people will jump on here and post all the "benefits" of using css, but the benefits just don't outweigh the hassle you go through trying to get your layout to work.

  2. #2
    Non-Member emstro's Avatar
    Join Date
    Jul 2003
    Location
    Florida
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll also add that if you are familiar with design using tables, and you are thinking about making the switch to css - try learning css real good and using a combination of tables and css. You'll be much happier, and you'll waste a lot less time.

  3. #3
    SitePoint Addict naveed's Avatar
    Join Date
    Feb 2003
    Location
    Ottawa, Canada
    Posts
    230
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One major advantage of CSS layouts is it's easy to completely change the look of a Website without even touching the HTML, an excellent time-saver.

    Take a look at the examples at http://www.csszengarden.com/
    Layouts are all different, but all share the same HTML. Only the external stylesheets are different.

  4. #4
    Non-Member emstro's Avatar
    Join Date
    Jul 2003
    Location
    Florida
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh yeah, and somehow, CSS manages to disable your ability to highlight text and copy/paste it, as is apparent in your example. I guess that could be both good and bad if you didn't want people copying content from your website, but I'm going to call it bad since it disables the browser to some extent.

    This website IS a good example of how, if you had multiple pages, you could update your layout by only modifying the CSS.

    This isn't a time saver to me however, the design must be so meticulously put together that in the long run you'll probably spend more time on the CSS layout making sure that everything updates properly.

    You'll have to fogive me for playing devil's advocate here. I know that CSS is superior to table layouts in many ways, but I just don't think it's good enough yet to replace the tried and true tables. They need more options for people that design websites with complex layouts. Right now you have to employ so many workarounds or "Band-Aids" to get things how you want them.

  5. #5
    SitePoint Addict naveed's Avatar
    Join Date
    Feb 2003
    Location
    Ottawa, Canada
    Posts
    230
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    CSS does *not* disable text highlighting. I highlighted, copied and pasted the following text from CSSZenGarden using MozFirebird:

    *****
    The Road to Enlightenment Littering a dark and dreary road lay the past relics of browser–specific tags, incompatible DOMs, and broken CSS support.

    Today, we must clear the mind of past practices. Web enlightenment has been achieved thanks to the tireless efforts of folk like the W3C, WaSP and the major browser creators.

    The css Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the (yet to be) time–honored techniques in new and invigorating fashion. Become one with the web.
    *****


    hhmmm, works for me!


    CSS does have issues, I won't deny that. Making a CSS layout cross-browser compatible sometimes requires hacks; I think hacks are a bad thing.


    However, I disagree about your comment about time saving. A modern Web document should be separated into two parts: structure and presentation.
    This creates cleaner, easier-to-maintain code and more accessible Websites (http://www.tsbvi.edu/technology/accessible-css.htm).


    Scenario: you have a 100-page Website that uses tables for layout. Redesigning or revising the entire the site would require editing all 100 pages (except if you use server-side includes). A significant amount of the HTML would have to be rewritten, too.


    On the other hand, if you used external stylesheets instead, you only have to edit ONE file to change the look of the entire site. You don't even have to touch the HTML. Much easier, IMO.



    That's my take on CSS.

  6. #6
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have encountered the highlighting text on certain websites. its really strange sometimes.

    The full effects of css wont be seen for some time, because so many websites use tables, plus there will be more support for different styles and attributes.

    Here is another key issue. Consistency. By fiddling with 1 style sheet, you can make sure all fonts, links, and more give the site a consistent feel.

    I am no expert, but I am sure some solid CSS people like John Colby, Vinnie Garcia, Redux, and more will make their way to this thread

  7. #7
    SitePoint Member
    Join Date
    Nov 2003
    Location
    USA
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I used to use tables all the time and refused to use CSS to design my sites. But now, I actually prefer CSS. When you say in the long run, we'll end up spending more time trying to get webpages to appear exactly the way you want them, it can also apply to using tables also. It just depends on how experienced you are with tables or CSS. I like CSS better because it separates content from design and there is no need for that ridiculous transparent filler gif used to create blank space.

    Of course, now is a time of transition and slowly people will migrate to using CSS. At the moment, for the majority of the time, I am still using tables to design layouts
    SCNetwork
    - Looking for a cheap host? Our service provides
    affordable and simple hosting solutions.

  8. #8
    SitePoint Evangelist ucahg's Avatar
    Join Date
    Apr 2001
    Location
    Sarnia, Ontario, Canada
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I assume you mean CSS-positioning, and not just CSS, unless with your <table>s you like <font>s, <center>s, and <b>s.
    Love it? Hate it? Helpful? Useless?
    Use the rate button to let me know what you think of my post!

  9. #9
    SitePoint Zealot
    Join Date
    Jan 2003
    Location
    Las Vegas
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Eh... I defintely see emstro's point, and feel his frustration. I for one do not use CSS hacks. I'll tweak my stylesheet until the website I'm working on looks relatively the same in all the latest browsers. I don't look at anything lower than IE 6.0, Opera 7, Mozilla 1.5 (6, now) etc. I do this mainly because I agree that to get a stylesheet working in ALL the "major" (obviously some are a lot less major now) browsers just IS too much of a hassle. Who cares if your stylesheet looks good in Netscape 4?

    I love it when people talk about being backwards compatible. I just smile at them. I'm all for forwards compatibility. Makes my job easier anyway.

  10. #10
    One website at a time mmj's Avatar
    Join Date
    Feb 2001
    Location
    Melbourne Australia
    Posts
    6,282
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by naveed
    Making a CSS layout cross-browser compatible sometimes requires hacks; I think hacks are a bad thing.
    This is why using tables for page layouts is a bad thing. Using tables for page layout is a hack
    [mmj] My magic jigsaw
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    The Bit Depth Blog · Twitter · Contact me
    Neon Javascript Framework · Jokes · Android stuff

  11. #11
    SitePoint Zealot MetalAges's Avatar
    Join Date
    Jan 2003
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Count me in the converted table designer to CSS design now. It did take a bit of tweaking to get just what I wanted, but no more than I had to do when learning tables and what works when you nest etc. between different browsers. After only a couple CSS layouts I now am pretty fast at dong it I think, and lots of thanks go to these forums and to Paul O B. Plus, even if you have only 15-20 pages...CSS time saving edits make it far superior to table based design.

  12. #12
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,350
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by naveed
    CSS does *not* disable text highlighting.
    does too

    oh, wait, perhaps it could be because i'm using IE6, only the most popular browser on the entire planet?

    my bad

    don't get me wrong, i'm a css advocate, i code in xhtml1 strict without tables, but that's one thing that has always p1ssed me off -- on some css sites, you have to view source if you want to highlight a certain portion of text
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  13. #13
    One website at a time mmj's Avatar
    Join Date
    Feb 2001
    Location
    Melbourne Australia
    Posts
    6,282
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by r937
    does too

    oh, wait, perhaps it could be because i'm using IE6, only the most popular browser on the entire planet?

    my bad

    don't get me wrong, i'm a css advocate, i code in xhtml1 strict without tables, but that's one thing that has always p1ssed me off -- on some css sites, you have to view source if you want to highlight a certain portion of text
    I have never experienced this with any version of Internet Explorer, on any website. I've never even heard of this happening. You should look into making sure your version of IE is up to date.
    [mmj] My magic jigsaw
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    The Bit Depth Blog · Twitter · Contact me
    Neon Javascript Framework · Jokes · Android stuff

  14. #14
    SitePoint Addict naveed's Avatar
    Join Date
    Feb 2003
    Location
    Ottawa, Canada
    Posts
    230
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mmj
    This is why using tables for page layouts is a bad thing. Using tables for page layout is a hack
    True.

    Why using tables for layout is bad: http://www.webreference.com/programm...chap1/1/2.html

  15. #15
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,350
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by mmj
    I've never even heard of this happening. You should look into making sure your version of IE is up to date.
    windows 2000 pro, version 6.0.2800.1106

    Updated Versions: SP1; Q328970; Q324929; Q810847; Q813951; Q813489; Q330994; Q818529; Q822925; Q828750; Q824145;

    if i am missing an update, then it could only have come out in the last 6 days

    do yourself a favour, take your latest version of ie6 and go visit the css zen garden, and see if you can highlight a portion of a sentence out of one of the first three paragraphs
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  16. #16
    SitePoint Addict naveed's Avatar
    Join Date
    Feb 2003
    Location
    Ottawa, Canada
    Posts
    230
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by r937
    does too

    oh, wait, perhaps it could be because i'm using IE6, only the most popular browser on the entire planet?

    my bad

    don't get me wrong, i'm a css advocate, i code in xhtml1 strict without tables, but that's one thing that has always p1ssed me off -- on some css sites, you have to view source if you want to highlight a certain portion of text
    I just tried to highlight text from CSSZenGarden using IE 6.0.2800, and it's the strangest thing. When I try to highlight just a single letter, it highlights the entire page!
    First time I experience this problem.

    Highlighting works just fine with MozFirebird 0.8pre and Opera 7.
    IE bug?

  17. #17
    SitePoint Zealot DarkWulf's Avatar
    Join Date
    Aug 2003
    Location
    US
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Its an IE bug related to absolute positioning.

    Besides, tables aren't as cool as some people make it out to be either. CSS and table based design both have learning curves, to say that CSS sucks because you have always used tables and thus know more about tables than CSS is a bit silly.

    CSS is "superior" because its clean and semantic and all that. It aids in removing content from presentation, which just feels good from an engineering standpoint. It saves you bandwidth because your layout and formatting is cached in a file instead of being sent down the wire every time.

  18. #18
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Back in October 2001 I set up my own domain for a conspiracy site and at the time I was just discovering these sites:

    http://bluerobot.com/web/layouts/
    http://glish.com/css/
    http://www.thenoodleincident.com/tut...son/boxes.html

    And all the other sites like ALA and Zeldman. I was very excited about the possibilities and decided to try and implement a 3-col header and footer for the layout of the site. After a whole lot of headaches and struggling with both floats and absolute positioning I decided to fall back on the old trusty table layout.

    With the basic table template designed in no time, I went to work building up over 200 pages based on it. Now I haven't updated it for a year and absolutely dread the fact that I will have to convert all these bloated pages into a more manageable standards design. I've started, and it's going very slow. The knowledge that I have now allowed me to come up with a 3-col float layout in a few hours that proves to be stable, and cross browser compliant, even at small window sizes. And indeed, I make these sorts of layouts for clients every day and there is an increasing market for this knowledge - it's proven to be a skill that is very valuable.

    I'm not sure what the moral of this story is but I wish I would of stuck to my original intent back then when I first got hooked on css positioning.

  19. #19
    SitePoint Zealot
    Join Date
    Jan 2003
    Location
    Las Vegas
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use Mozilla 1.6 and have had troubles highlighting text on certain CSS websites - including one featured in the Zen Garden.

    This layout specifically:
    http://www.csszengarden.com/?cssfile...075.css&page=0

  20. #20
    SitePoint Wizard Dangermouse's Avatar
    Join Date
    Oct 2003
    Posts
    1,024
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    After delving into the world of fully css layouts, some other people have created some amazing stuff, but at the level im at i wouldnt attempt to create a fully css layout if i was to say sell it. I would stick to a hybrid layout. And on zen garden alot of the 'wow' factor comes down to the images, the css just sticks the thing together.

    Css does have issues, but lets not try to blame css itself, its really the browsers than cause the problems.

  21. #21
    Wanna-be Apple nut silver trophy M. Johansson's Avatar
    Join Date
    Sep 2000
    Location
    Halmstad, Sweden
    Posts
    7,400
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I generally think there is a huge over-trust in table-less layouts. They an excellent way to make fanstastic layouts with very little code. However, currently, I feel that browser adoption is not wide enough for it to work well enough. Currently, I have to spend more time making a CSS layout work than I spend with fiddling with tables.
    Mattias Johansson
    Short, Swedish, Web Developer

    Buttons and Dog Tags with your custom design:
    FatStatement.com

  22. #22
    SitePoint Zealot pacman2504's Avatar
    Join Date
    Oct 2003
    Location
    North Wales
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    After only a couple CSS layouts I now am pretty fast at dong it I think, and lots of thanks go to these forums and to Paul O B. Plus, even if you have only 15-20 pages...CSS time saving edits make it far superior to table based design.
    I'll second that.
    In the land of the witless, the half-wit is king.
    Business and liability insurance quotes

  23. #23
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I prefer positioning absolutely with css, rather than trying to make a fluid site. It's alot easier than both tables and fluid css layout. It's a shame that most other browsers don't have a similar zoom feature as Opera, it enables alot more versatility. IMO

    Reasons: Objects can be placed in any order. The headers and main text can be placed first, for SEO, and there is no need to place objects relatively, no "this must follow that".
    No need for innerHTML or other ways of changing or creating objects within another object. You just place it where you know it needs to go. Useful for adding js created objects before or after the HTML has loaded.
    You can create a visual "map" of where you want your objects to appear, splitting the page into a grid of objects.

    This can be done with em's in a way, but the relation between sizes when the browsers font size is changed is not consistant, and you cant work with windows componants in ems.

    Alot more work is needed when using em's
    Code:
    <div style="position:absolute;top:1em;left:2em;width:7em;height:4em; background:red;padding:0em;margin:0em"></div>
    <h1 style="position:absolute;top:1em;left:2em;font-size:2em;padding:0em;margin:0em">Header</h1>
    <div style="position:absolute;top:216px;left:32px;width:112px;height:64px; background:red;padding:0px;margin:0px"></div>
    <h1 style="position:absolute;top:216px;left:32px;font-size:32px;padding:0px;margin:0px">Header</h1>
    I tried to convert my site to em's using a ratio of 16px to 1em, the results I obtained where similar to the problems above.

    I find both tables, and fluid css, a pain in the......
    Last edited by Markdidj; Feb 7, 2004 at 07:24.
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  24. #24
    Free your mind Toly's Avatar
    Join Date
    Sep 2001
    Location
    Panama
    Posts
    2,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by emstro
    I'll also add that if you are familiar with design using tables, and you are thinking about making the switch to css - try learning css real good and using a combination of tables and css. You'll be much happier, and you'll waste a lot less time.
    That is exactly what I said on a thread similar to this. At this point, there are still browsers out there that do not support all of the CSS features or display them differently on each browser.

    I'm really looking forward to create a fully CSS website without tables, but with so many projects, I can't afford to spend all the time and I don't have the experience either that it takes to create a CSS design.

    I recently started to completely combine tables with CSS on my designs. So far, I couldn't be much happier, and it does save a lot of time.
    Community Guidelines | Community FAQ

    "He that is kind is free, though he is a slave;
    he that is evil is a slave, though he be a king." - St. Augustine

  25. #25
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if that's how you feel, emstro, than by all means stick with tables...there's already too many of us here at the cutting edge of the next generation of web design
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com


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
  •