homepage Welcome to WebmasterWorld Guest from 54.167.179.48
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS Mistakes
DrDoc

WebmasterWorld Senior Member drdoc us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 703 posted 8:48 pm on Mar 7, 2003 (gmt 0)

1) Your page looks smashing in all new browsers, but the page is unusable in older ones.

Solution: Test your page in as many browsers as possible. Hide CSS that causes issues in a certain browser should be hidden from it, or removed entirely.

2) Your page is perfect in IE, but you can't seem to make it work in other browsers.

Solution: Make sure it works in other browsers first. Then it's easier to make it work in IE as well.

3) Your page is perfect in browser A, but sucks in browser B. When fixed to work in browser B, it sucks in browser A.

Solution: Usually this happens for one of two reasons.
a) You have designed your site to be pixel perfect. Since "perfection" relies 100% on all browsers implementing the same level of standard conformance it is bound to fail.
b) You are using buggy or highly advanced CSS properties. The problem, again, is that all browsers are at different levels of standard conformance.

4) You think that CSS is too complicated, and that it leads to more code than plain HTML does.

Solution: Stop thinking about layout and looks. First concentrate on content. Start with a simple page, logically formed with DIVs, paragraphs, and headings. Add text! Not until then are you ready to structure the page graphically. And, then you also have a better overview of what can be done.

5) Your style sheet is bloated.

Solution: Usually the problem is a wrong approach, as described under #4. But, it could also be the simple fact that you define styles for every single element on the page.

Start by defining styles for the BODY. Save. Test in the browser. Make one change. Save. Test again. Make another change. Save. Test again...

Also, if several elements need the same styles. Give them a class name to which you apply styles. If a single element needs spcific styles, give it a unique ID to which styles are applied.

If an element looks ok without any additional styles applied to it - leave it be!

6) You think that CSS is difficult to update

First, make sure you have followed the above-mentioned suggestions. Then organize your style sheet alphabetically as well as grouping general rules, IDs, and classes separately. Finally, move it to an external style sheet, which you can then use for every single page on your site.

7) You continously encounter problems and want to give up

Solution: First of all, this is normal. Do you remember when you were trying to take your first steps? Probably not, but I know you didn't give up!
Second, add [webmasterworld.com...] to your bookmarks. We are here to help you, and we will help you. Of course, we want you to try solving it on your own first. But, if nothing else helps - this is the place!

 

madcat

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 703 posted 12:32 am on Mar 8, 2003 (gmt 0)

Great tips DrDoc, just to underscore the point you made...

There is no way you can get a pixel perfect layout. Use whitespace to your advantage. Make your page flexible so that elements won't collide when the resolution is switched. Or if they do, make sure that vital information is still visible.

DrDoc

WebmasterWorld Senior Member drdoc us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 703 posted 10:08 am on Mar 8, 2003 (gmt 0)

Thanks for your added insight and for emphasizing the point about pixel perfect layouts :)

SuzyUK

WebmasterWorld Senior Member suzyuk us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 703 posted 10:18 am on Mar 8, 2003 (gmt 0)

Good advice Dr Doc, thanks

Solution: Make sure it works in other browsers first. Then it's easier to make it work in IE as well.

I especially like this one as I'm a recent convert to this way of thinking! ;)

Suzy

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved