PaulCheung wrote:
Hi
I am at the stage where I need to put style to the site and am using
CSS. with Firefox, Opera, Internet Explorer and Safari to test for
browser compatibility. What I find puzzling is there seems to be
differences in the styles of output, Using the same the exact same
coding the only varible in the testing are the browsers themselves.
I'm coming to this discussion late, and while you've already gotten some
excellent advice, I don't think anyone has mentioned CSS resets yet.
Every browser, or rather browser family, has its own internal stylesheet
that sets the default presentation of HTML elements. For example: In IE
& Opera lists are indented by setting a left margin of 40px on the <ul>
element, whereas in Gecko-based browsers lists are indented by setting
40px of left padding. Trying to achieve consistent list indentation can
drive you insane if you're unaware of this.
The best way I've found to avoid these inconsistencies is to use CSS
reset, which sets page elements to margin: 0, padding: 0. There are tons
of examples out there--just google "css reset". Some people only reset
certain commonly used elements, others reset everything (I reset
everything so I don't have to think about it again).
Personally, I have a prototype CSS file (also referred to as "CSS
framework"--another term you can google) which I use for all the sites I
build. My file first resets all elements, then sets up basic layout divs
like #wrapper, #branding, #navPrimary, #contentMain, #sidebarPrimary,
etc. It also includes a default set of rules for typography, headings,
lists, links, etc. It takes time to create one that works for you--mine
took months and is still constantly evolving--but in the long run it's a
huge time saver.
If you decide to go the prototype/framework route, you'd do well to read
up on CSS naming conventions. For maximum flexibility you'll want to use
structural rather than presentational names--i.e. #navPrimary,
#navSecondary, #sidebarPrimary, #sidebarSecondary instead of #navTop,
#navLeft, #sidebarRight, #sidebarLeft.
Hope that helps a little.
_______________________________________________
New York PHP Community Talk Mailing List
http://lists.nyphp.org/mailman/listinfo/talk
NYPHPCon 2006 Presentations Online
http://www.nyphpcon.com
Show Your Participation in New York PHP
http://www.nyphp.org/show_participation.php
