The Headaches of CSS

[SurfPark]

I'm slowly leaning about CSS. Unlike Flash or HTML, this type of design is really hard for me because I'm not building visually like I can in Flash and Dreamweaver. I've been checking out some of the stellar work on 'A List Apart' and a few Blogger templates and I have to say I'm outright jealous of such great design. I've been favoring CSS over Flash since its just easier for the end users to deal with.

I've been trying to learn it via CSSzenGarden.com, and its been slow. Lots of possibilities, but I find it difficult to type out the entire page and then style it. I've been using the newest version of Dreamweaver with some CSS tools, but I've also been trying to learn the traditional coding method (Notepad and I are like bitter ex's).

Any one know any great web sites that have a more visual approach to learning CSS? I was thinking of getting "HTML and CSS for Dummies" but I'm not sure.

[EC]

The CSS gurus on this board compiled a list of their favorite CSS sites, be sure to check it out ... http://www.graphicdesignforum.com/forum/showthread.php?t=13057

I am a couple years into using CSS only for layout and it still frustrates the heck out of me. Partly the reason why it's frustrating is because there are still so many browser issues you have to learn and workaround -- if all browsers were standards-compliant, it would be a piece of cake. You have to learn the how and the why, and then the how and the why Internet Explorer will choke and how to fix it. Fun, fun, fun.

The way I learned is by what you're doing -- looking at sites that are controlled by CSS, downloading them, studying the code, deconstructing, etc. I've read a lot of great books on the topic, probably the best to get you started on the "how" is the Visual Quickstart Guide to DHTML & CSS. Then anything by Dan Cederholm and Jeffrey Zeldman for the "why" you bother.

Good luck. :)

[ecsyle]

You will have to retrain your brain. You can't approach a CSS website the same as a tables site. It is a different creature. Once you learn how to visualize it, designing in code is faster than using a WYSIWYG editor.

The way I have been approaching it lately is to first create the valid html. Once I have a semantically correct html document, I then deconstruct my design and solve the problems in making it work. You can't think of things in terms of cells and rows. Table cells can't overlap, but layers can. There is no need to slice up an image anymore. Those are just a couple of old school webdesign practices that people tend to hold onto when working with CSS. Oh yeah, I also always make sure my site works on a "good" browser before making it work in IE. IE will become your worst enemy.

[NewEra]

http://jigsaw.w3.org/css-validator/
sometime even after writing a perfect .CSS you get the errors pages when validating
so check again and again

[Patrick Shannon]

As I always say, if you've never hit a problem with Internet Explorer (and have to "hack" around it) when creating a website, then you're not a real web designer. Which is something you're definitely going to go through with CSS and IE. ;)

I heard something to the effect that the IE7 team are really bright, but one of their developers said that the worry they have is that if they "correct" IE's flaws in CSS and whatnot, it's going to break a lot of websites so it's a huge situation of "damned if they do, damned if they don't."

Way I see it, why continue to do something wrong? I'd be more than happy to go back over our legacy websites to properly apply the correct code if it means more a more compliant IE in the future.

I was playing around with IE7 beta on my coworker's computer and so far it does seem to fix some CSS flaws I've come across.

[Mynock]

As I always say, if you've never hit a problem with Internet Explorer (and have to "hack" around it) when creating a website, then you're not a real web designer. That's a great line Patrick, lol, and sadly it's true.

[JPnyc]

Depends on the hacks used to get around IE6. If they just used the !important hack, then no changes need be made. IE7 will understand it same as FF and Opera, and IE6 still won't. that's the one I try to use whenever a hack is necessary.

[chris_bcn]

just grab all your hacks, throw them in a new stylesheet and link them to a page via conditional comments. You can target which version of IE as well.

http://www.quirksmode.org/css/condcom.html

Also, a lot of the IE6 problems come from using it in quirks mode, and therefore the box model problem. Always use a strict doctype and that problem goes away.

I always design for standards compliant browsers, then check in ie 5 & 6 and then create an IE hacks style sheet. bish bash bosh - jobs a good 'un

[SurfPark]

Wow! Conditional comments! I read all of CSS Zen Garden and kind of bypassed the section that talked about these. The IE hacks are the biggest pain out of CSS in general. In 10 years we'll be laughing about IE 5/6.

[DesignerScott]

Or you could take my newest approach to CSS.
Accept the fact that browsers aren't standard, CSS is hard to retrain and retain.
Go out and pick up a big fatty actionscript book, and use the majorly accepted 3rd party cross-browser application ----> Flash !

No really though, I just got back into CSS after a long flash endeavour and have forgotten almost everything I once new about the language. Unless I pick it up really quickly again, I might just become Flash exclusive for my web designs (since that's not my primary forte)