******************************************
<--- (Zhang Ziyi) On My "Must Defile" list for 2005

I've been fuckin around with tableless CSS designs for almost two years now. I'm trying to decide if shit is worth the hassle. Because of the tweaks and hacks necessary to get a site to look the same across browsers, tableless design doesn't seem like we're advancing the field of design. Are tables THAT bad. Seems more like we're creating new challanges when we already had enough. At the end of the day, I DO love looking as the short, simple source code on a CSS site design, but aside from getting my own geek rocks off, i've lost sight of the benefit and can't remember why i thought it necessary to try to stop using tables.

-----------------------
"I'm so glad I got my own
I'm so glad that I can see
my life's a natural high
the man can't put no thing on me" (c) Curtis Mayfield

html tables were never designed to be used for page layout. The CSS solution in theory is much more "correct" but I hear what you sayin. I hate web development but looks like I'm stuck with it for short while, so might as well brush up on my CSS.

******************************************
<--- (Zhang Ziyi) On My "Must Defile" list for 2005

of purist. i'm not exclusive with it but i've been street teaming for CSS designs for almost 2 years now. i'm just wonder aloud about whether i've let other "purists" define what's most pure. just being open and asking the question. Until browser developers (i'm not talking exclusively about microsoft either) become purist in adherence to W3C standards, I question whether it matters whether designers follow those standards.

-----------------------
"I'm so glad I got my own
I'm so glad that I can see
my life's a natural high
the man can't put no thing on me" (c) Curtis Mayfield

At its base level, HTML is a language that was intended to describe the STRUCTURE of a document, not the style. When designers needed to find a way to make their web sites look pretty, the abuse of tables lead to a bunch of documents with little to no strucure, making it difficult to ascertain the heirarchy of a page by looking at the HTML. Now, being the visually-oriented beings that we are, this doesn't matter much to us while reading a web page, but for a blind person using a screen reader, or a search engine indexing your site, the result is a jumbled mess.

By sticking to web standards, separating style from content/structure, and avoiding the abuse of elements strictly for stylistic purposes, web pages are given better structure, and therefore are more readily indexed by search engines and easier for screen readers to digest. Part of this is avoiding using tables when they're not necessary. Particularly, it makes maintaining the HTML much easier by reducing extraneous markup (thereby making it more readable). In addition, if a redesign is ever needed and you need to rearrange content, instead of having to move however many columns and table cells you have in all the pages on your site around, all you have to do is make a few edits to a single stylesheet, which will significantly reduce the amount of time you spend redesigning in the future.

Of course, there is a significant initial investment in time in creating table-less layouts, but after awhile, after learning all the bugs and tricks of the different browsers, it gets easier and becomes pretty much second nature.

There also seems to be a significant market out there for it --- right now I'm getting paid nicely to do web-standard XHTML/CSS coding for an energy firm here in Houston. Many large companies are becoming standards-compliant on their inter/intra-nets, and the talent pool for web-standards coders is surprisingly thin at this point, so cats that *do* know web standards are getting the leg up on cats that don't know them, so I think there's a lot of incentive in getting up to speed there.

__________________________________________
Twitter: https://twitter.com/jaboonday

R.I.P. Dilla 1974-2006

for 3 years, we worked hard to produce tableless design templates for the university's main site and federal guidelines mandated that we meet requirements for level two priority accessibility. We did both: met the accessibility requirements and produced a pretty good looking tableless design (www.gatech.edu). well the calendar uses tables but that's it.
having produced tableless designs for two years now, i still put A LOT of time into tweaking designs and employing hacks to make them work. That hasn't become intuitive yet. I'm just sayin' that until Safari, Opera, Mozilla/Netscape and IE and all their various (relevent) versions can interpret code the same, is it worth the time. Unles there are nested tables everywhere, you can actually meet accessibility requirements with a table'd design. I get your point. those were my reasons for taking the time to learn CSS. I'm just sayin'.

-----------------------
"I'm so glad I got my own
I'm so glad that I can see
my life's a natural high
the man can't put no thing on me" (c) Curtis Mayfield

>for 3 years, we worked hard to produce tableless design
>templates for the university's main site and federal
>guidelines mandated that we meet requirements for level two
>priority accessibility. We did both: met the accessibility
>requirements and produced a pretty good looking tableless
>design (www.gatech.edu). well the calendar uses tables but
>that's it.

Being a web developer, I know you know this already, but I just wanted to point it out for those who don't --- tables aren't disallowed in web standards design, it's just that the preferred usage of a table is for data that needs to be placed in a tabular format (charts, listings, etc.) A lot of people don't realize this, so it helps to point that out from jump.

Nice design on that website, btw.

>having produced tableless designs for two years now, i still
>put A LOT of time into tweaking designs and employing hacks to
>make them work. That hasn't become intuitive yet. I'm just
>sayin' that until Safari, Opera, Mozilla/Netscape and IE and
>all their various (relevent) versions can interpret code the
>same, is it worth the time. Unles there are nested tables
>everywhere, you can actually meet accessibility requirements
>with a table'd design. I get your point. those were my reasons
>for taking the time to learn CSS. I'm just sayin'.

I remember reading an article on informit.com about hack management that made things a lot easier for me in managing the different browser irregularities regarding CSS. Here's the link: http://www.informit.com/articles/article.asp?p=170511

Summing the article up, you can place CSS for specific browsers in separate files, and then use CSS hacks to filter the files so that only certain browsers can read them. Doing it this way, you can create a base stylesheet for highly compliant browsers (Mozilla, Firefox, Opera), and then use filters to feed to the different versions of IE for those little bitty issues that pop up when working with CSS in those browsers.

Another thing that helped me was the ol' * { margin: 0; padding: 0} trick. This removes margins and padding from ALL elements, thereby allowing you to set them at your leisure for every element. This helps when it comes to things like ordered and unordered lists, which are indented using padding in some browsers and margins in others.

I feel your frustrations with CSS design though, it's unnecessarily complicated by having to deal with all the little browser irregularities, but for me, I think it's all worth it at the end.

__________________________________________
Twitter: https://twitter.com/jaboonday

R.I.P. Dilla 1974-2006

>I remember reading an article on informit.com about hack
>management that made things a lot easier for me in managing
>the different browser irregularities regarding CSS. Here's
>the link:
>http://www.informit.com/articles/article.asp?p=170511

I'll check this out. thx.

>Summing the article up, you can place CSS for specific
>browsers in separate files, and then use CSS hacks to filter
>the files so that only certain browsers can read them. Doing
>it this way, you can create a base stylesheet for highly
>compliant browsers (Mozilla, Firefox, Opera), and then use
>filters to feed to the different versions of IE for those
>little bitty issues that pop up when working with CSS in those
>browsers.

that's prolly the most viable solution. as new versions of IE are released, this will make it easier to make fixes and prevent sites from breaking in that browser. BTW, all the browsers mentioned have their quirks, but IE is still the devil. I'll definitely visit the link and give this solution a shot.

>Another thing that helped me was the ol' * { margin: 0;
>padding: 0} trick. This removes margins and padding from ALL
>elements, thereby allowing you to set them at your leisure for
>every element. This helps when it comes to things like
>ordered and unordered lists, which are indented using padding
>in some browsers and margins in others.

this works for me as well.

>I feel your frustrations with CSS design though, it's
>unnecessarily complicated by having to deal with all the
>little browser irregularities, but for me, I think it's all
>worth it at the end.

i haven't abandoned CSS layouts. The frustrations are just part of it web design. It's the life I've chosen. I remember when there was also the issue of people using old ass browsers like Netscape 4 or IE releases from 1999. That issue has worked itself out with time and people at least have modern browsers now. I'm sure some of these other issues will resolve with time too. Thanks for the links.

-----------------------
"I'm so glad I got my own
I'm so glad that I can see
my life's a natural high
the man can't put no thing on me" (c) Curtis Mayfield

http://dean.edwards.name/IE7/

This is a set of JavaScript functions that bring IE6 up to speed with many of the CSS selectors and PNG image functionality that Mozilla, Opera, and Safari already include.

You link to the main script with conditional comments, so that pre-IE7 Microsoft browsers see the script as only comments, and the markup is still valid.

The script isn't perfect, and can create conflicts with other JavaScripts you may use, but I think it's a better solution than using CSS hacks, which may become problematic once the supposedly more standards-friendly IE7 becomes the commonplace browser.


Triggering strict standards mode in all browsers also helps even things out a bit.


____________________
www.anti-personnel.com | let's talk about stuff like a chicken wing.

>This is a set of JavaScript functions that bring IE6 up to
>speed with many of the CSS selectors and PNG image
>functionality that Mozilla, Opera, and Safari already
>include.

IE has supported PNG transparency since IE 5.0. It's not an issue any longer.

>The script isn't perfect, and can create conflicts with other
>JavaScripts you may use, but I think it's a better solution
>than using CSS hacks, which may become problematic once the
>supposedly more standards-friendly IE7 becomes the commonplace
>browser.

Internet Explorer will continue to be a renegade browser. That's another fear I have... future releases of IE breaking sites and having to fix them for free or almost free.

-----------------------
"I'm so glad I got my own
I'm so glad that I can see
my life's a natural high
the man can't put no thing on me" (c) Curtis Mayfield

>http://dean.edwards.name/IE7/
>
>This is a set of JavaScript functions that bring IE6 up to
>speed with many of the CSS selectors and PNG image
>functionality that Mozilla, Opera, and Safari already
>include.
>
>You link to the main script with conditional comments, so that
>pre-IE7 Microsoft browsers see the script as only comments,
>and the markup is still valid.
>
>The script isn't perfect, and can create conflicts with other
>JavaScripts you may use, but I think it's a better solution
>than using CSS hacks, which may become problematic once the
>supposedly more standards-friendly IE7 becomes the commonplace
>browser.

I've seen that before, but ultimately I decided against using it because I looked at it as being more of a hack than using CSS hacks. In addition, if you choose the right method of CSS Management, you can make a contigency for IE 7 by using conditional comments to present the alternate stylesheet reference only if the IE version is less than 7. That way, when IE 7 comes along, it will default to using the base stylesheet (the one for more standards-compliant browsers), and won't see the styles intended for the lower IE versions.

>Triggering strict standards mode in all browsers also helps
>even things out a bit.

That's for damn sure. Making sure you remove the xml prologue (because IE will automatically jump to quirks mode if it is present) helps out even better

__________________________________________
Twitter: https://twitter.com/jaboonday

R.I.P. Dilla 1974-2006

For the Houston energy firm, are you doing both design and markup, or just markup?

____________________
www.anti-personnel.com | let's talk about stuff like a chicken wing.

Although I'm not doing mockups in Photoshop, I still have to convert mockups made by our graphic designers to XHTML/CSS, so in a way I'm still doing design, but a lot of our stuff is based from templates, so in most situations all I'm doing is either adding content, or migrating old sites from non-standard to standards-compliant designs. I'd say it's much more coding than design, but occasionally an opportunity will come up where I get to do some design. Not really good for the ol' portfolio, but it's definitely helping me in the pocketbook and on the resume.

__________________________________________
Twitter: https://twitter.com/jaboonday

R.I.P. Dilla 1974-2006

Browers typically don't display a table until all of its contents have been loaded. This means that you won't see text within a table until every image or multimedia object from that table have been fully downloaded. Which can seriously slow down the content delivery time within a nested table layout. Admittedly, this effect isn't as dramatic with the advent of broadband, but it's still an issue.

Adding on to the aforementioned accessibility issues, try downloading Lynx and viewing (or reading, as it were) different sites with it. Standards-based sites with semantic markup are far more readable than those without. Which, as has been noted, is beneficial for both handicapped users and the all-important Search Engine Optimization factor.

Also, standards-based layouts can be easily adapted to other formats. After creating a site's markup strictly based on document structure and content hierarchy, you can create StyleSheets for the web, print, and mobile devices. Making a print StyleSheet is far better than the old JavaScript "Print this Page" solution, saving time and eliminating the need for additional scripting. Mobile StyleSheets aren't widely or universally supported yet, but expect that to change in the coming years. Even so, a Standards-based layout will be more legible on a narrow width portable device. Especially if one is using Opera as their choice mobile browser. Tables are far more rigid and difficult to manipulate with CSS than DIVs.




____________________
www.anti-personnel.com | let's talk about stuff like a chicken wing.

i've reviewed and tested sites using text-only browsers as well as screen readers. i get what you're saying. i'm just venting about how things that are very difficult become extremely difficult because w3c standards are largely ignored by the worlds most pipular browser and even the more complient browsers interpret and display differently. I feel ya tho.

-----------------------
"I'm so glad I got my own
I'm so glad that I can see
my life's a natural high
the man can't put no thing on me" (c) Curtis Mayfield

http://www.alistapart.com
http://www.mezzoblue.com
http://www.w3schools.com
http://www.jasonsantamaria.com (the older articles mostly)
http://www.webstandards.org/learn/standards/css/index.html (lot of good links to resources here)

I think Mezzoblue has a link to a bunch of CSS designers who maintain their own weblogs, check those links as well because every once in a while they'll put up some articles discussing CSS/XHTML design issues.

__________________________________________
Twitter: https://twitter.com/jaboonday

R.I.P. Dilla 1974-2006

******************************************
<--- (Zhang Ziyi) On My "Must Defile" list for 2005

http://www.positioniseverything.net (this one is really helpful for verifying CSS bugs in the different browsers, and finding solutions or workarounds for them)

__________________________________________
Twitter: https://twitter.com/jaboonday

R.I.P. Dilla 1974-2006

******************************************
<--- (Zhang Ziyi) On My "Must Defile" list for 2005

Work is kinda slow right now, I need something to do besides sitting at my desk and twiddling my thumbs, I should have some time to answer some ???'s...

__________________________________________
Twitter: https://twitter.com/jaboonday

R.I.P. Dilla 1974-2006

******************************************
<--- (Zhang Ziyi) On My "Must Defile" list for 2005

i've found answers here.

-----------------------
"I'm so glad I got my own
I'm so glad that I can see
my life's a natural high
the man can't put no thing on me" (c) Curtis Mayfield

http://digg.com/programming/Advanced_CSS_Layouts:_Step_by_step_2


FREE CHAI VANG!

Certified Grade A Coon - Inspector Abrock33

http://rjcc.stumbleupon.com - what I'm looking at

www.hdbeat.com - the other stuff i'm looking at

http://contentwithstyle.co.uk/Articles/17/a-css-framework/

******************************************
<--- (Zhang Ziyi) On My "Must Defile" list for 2005