Posts Tagged browser

Before you even start contemplating the code for your new design, it’s good practice to normalize all elements in your first lines within the CSS file. 

“Normalizing” – means you are overriding all browser styles; which will appear if you do not provide code for styling.

Due to the fact that your final design should show well with a variety of browsers, you should also know that different browsers have different style defaults. By normalizing your CSS code, you are actually setting all these styles under your control (to some degree).

Here’s a list of normalizing your elements:

/*Margin and Padding */
body, div, dl, dt, ol, ul, li, h1, h2, h3, h4, h5, h6, p, blocquote
{margin: 0; padding: 0}

/* Font Size */
h1, h2, h3, h4, h5, h6, p
{font-size: 100%}

/* Normalize Lists */
ul, ol
{list-style: none}

/* Font Style and Font Weight */
p, h1, h2, h3, h4, h5, h6, strong, address, caption
{font-style: normal; font-weight: normal}

/* Remove borders or spacing from tables */
table
{ border-collapse: collapse; border-spacing: 0}

/* Remove borders from images */
img
{ border: 0}

Take in consideration all these style elements before you actually start your coding in CSS and you should have a clean slate when testing in different browsers. Good luck!

Related articles by Zemanta

• Turn Your Sketches into CSS Based Websites (labnol.org)