NYCPHP Meetup

[BAS]

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.