I am a programmer doing web development for over two years now. Even though I’ve been doing front end engineering for the past two years I don’t think I have done it the right way
visibility: hidden(well, I know it now. but there are many cases like- padding, margins, overflows etc)
#and not a class.
I know I am doing a lot of things wrong(and I need to get it right) here but I manage to get things into place and somehow show it up, only to see it messed up in a different browser.
I don’t want do a primer on CSS or CSS for dummies. I know more than that. I want to learn CSS the right way. Focusing on problems like the examples I showed above and rectifying them.
Can you point me to resources or add common suggestions and tips used by CSS developers to get it right.
You could start by reading some good books on the matter. The ones of Eric Meyer are hands on and of very high quality. The other book that of which I learned a lot was the Zen of CSS design book.
And the rest is effort and practice. Be sure that you understand why something works the way it does, don't be satisfied with 'trial-and-error' css development.
Practice, practice, practice. You know what you don't know, and that is the key to success in my mind. Every project you do, try to improve your skills, and eventually it will become second nature to do it the right way.
Eric Meyer's Cascading Style Sheets 2.0 Programmer's Reference is a great resource to understand exactly how selectors and rules work, and serves as a great reference as well.
Some thoughts on what you posted.
A Master Reset style sheet will help with browser differences.
And Tabular data should use tables.
It's layouts that should avoid table tags in favor of css.
for me, Pro CSS and HTML Design Patterns by Michael Bowers changed it all. no more endless trial-and-error, but problem - pattern - solution. indispensable.
Well the basics are quite simple, you should really get a hang of the quite easy if you've already don't some css coding.
The best practices, browser quirks, hacks and other sketchy stuff concerning crossbrowser layout is something else.
Here is my suggested reading list, all of them are on my bookshelf and certainly worth reading! If you ask me i'd say these are the book you should have read if you are a webdesigner.
I'm not a usability specialist, and I really don't care to be one.
I just want a small set of rules of thumb that I can follow while coding my User Interfaces so that my product has decent usability.
At first I thought that this question would be easy to answer "Use your common sense", but if it's so common among us developers we wouldn't, as a group, have a reputation for our horrible interfaces.
Read Don't Make Me Think by Steve Krug. It is a great starting point, and an easy short read.
EDIT: This is mainly for web usability though, but it would still be a good read even if you are doing rich clients.
Really, any rules someone posts will be a variation on the theme: Don't Make Your Users Think
Am using django framework, am pretty comfortable with the backend logic using python, but whats bothering me is the front-end bit where i have to work with css, how can i learn easily the workings of css or is there a tool i can use to create the front-end interfaces for django easily?
I have to agree that it's a lot of trial and error. There are sometimes many ways to achieve what you need to...some more "proper" than others. CSS Zen Garden was one of the first sites I discovered that really helped things click in my own head. View the design, view the source, view the design, etc...
A couple of books I appreciate having around are Dan Cederholm's Bullet Proof Web Design and
Andy Budd's CSS Mastery
Both give solid ways of accomplishing some common techniques and issues you'll run into with css-based designs.
The best book I've read about CSS and HTML is Zeldman's Designing with Web Standards
Zeldman covers the historical aspects of HTML and CSS along with converting a table-based website to semantic CSS. He also covers web standards, graceful degradation and browser quirks. It's often considered the 'bible' of modern web development.
CSS isn’t really that easy — it kind of stands on its own in terms of its concepts.
If you’re delving into it deeply, CSS: The Definitive Guide is well worth it.
I'm looking for best-practices for designing a site that with accessibility in mind. The site is going to have a lot of older and less-abled individuals visiting it, and I want to make it as friendly for them as possible. Is there a resource that describes all the right tags, and attributes to use?
A must read is Jeffery Zeldman's "Designing with Web Standards"
Not sure if you are using Dreamweaver, but he has also just realeased a toolkit to validate your site for accessiblity.
I just started working for a pretty large company and my group manages all of their public facing websites. I opened the style sheet for the first time today and have seen over 20 instances of the designers using the voice-family hack to fix an IE bug. (I don't know why they allow graphic designers to write any kind of markup at all)
What is the general public opinion of the voice-family hack. Is it worth the time to recommend using IE conditional comments to include custom styles sheets?
The "voice-family" hack, better known as the Tantek Celik Box Model Hack, is used to hide specific CSS rules from IE4/5 on Windows because of incorrect implementations of the CSS standard in those browsers. It is an attempt to deliver the most correct single stylesheet to all browsers, without resorting to browser sniffing and multiple stylesheets.
Ironically this hack is the result of many man-hours (months?) of experimentation and testing to develop a standards-compliant stylesheet that works across older, newer, and future browsers. It is one of several workarounds that been created to make up for the horrible state of browser compliance to the CSS standard.
See Jeffrey Zeldman's Designing with Web Standards for an in-depth look at why adhering to standards (as much as possible) is a worthy goal, and why using browser sniffing and multiple stylesheets only causes headaches for the developer:
One example is the arms race to keep up with browser/operating system combinations, not to mention mobile phones and other future devices with browsing capability. The detection code has to be changed with each new combination, and because of the way that many browsers masquerade as Netscape Navigator, detection can become a full time job.
Another good reference is the Web Standards Project, which has a lot of good information and tutorials on the subject:
If you move your coding style towards standards-compliance, you will generally not have to be as concerned about the release of future browsers. Yes, you still have to test against them, but you don't have to write and then test custom stylesheets for each one.
Many thank you's...
I would like to learn moders XHTML and CSS programming. Does someone has any good book suggestions where to start? I would like to have a book where I can learn those languages completely or as much as possible and I can use them if I get trouble on my web-programming projects. And of course I would like that my sites passes web-standards and validators and teaches what are different DTD's.
I would second the recommendation of Head First HTML with CSS & xHTML.
Other good "starter" books would be:
All of the above are very readable and focused on the practical.
Css Mastery - is the best CSS book I have read. If you think you know a lot about CSS, this book will open eyes!