Monofactor - Golden Age Eddition

There’re so many times I find myself struggling with IE6 issues and some other misbehaviors when working on the css of my designs.

In order to shorten the time I waste on the css and to modify the elements a bit easier, I defined some common selectors to use and they exist almost on every css file of my previous projects and this site’s css as well.

Most of the problems occur from IE6 rendering for margins, font size and some overall float problems. So here are what I always place to prevent possible troubles i might have.

1. Removing the Hyperlink Outlines

   Disabling outlines to supress link outlining mostly to clearer see my graphically styled header list item nav at the beginning:

   a, :focus { outline:none; }

2. Removing the Img borders

   To prevent hyperlinked images having borders, I set all img tags to be borderless:

   a img, :link img, :visited img { border:none; }

3. Settings for Headings

   Because IE6 displays the font-size and margin/padding properties for headings different than other browsers, I define preliminary standard values for the heading properties:

   h1,h2,h3 {
margin:1em 0;
}

   E6 renders the font sizes for headings differently (mostly for the typefaces like Georgia, Trebuchet MS, etc), so they need to be standardized for all browsers:

   h1 { font-size:138.5%;}
h2 { font-size:123.1%;}
h3 {font-size:108%;}
h1,h2,h3,h4,h5,h6 {font-weight:bold;}


4. Hiding the Horizontal Rules

   As I sometimes divide content into divisions, it looks better and more organized by dividing with horizontal rules when site is viewed without stylesheet.
   And of course, I hide them inside css:

   hr { display:none;}

5. Paragraph Margins

   Giving a default top and bottom margin to paragraphs to be interpreted same on all browsers:

   p { margin:15px 0px 15px 0px; }

6. Clear Fix

   I usually pick name for the clearer div class from a comic hero. Mostly I name it spiderman/batman =)
.batman {width:100%; font-size:0px; height:0px; clear:both;
/* prevent IE from adding 1px height to clearer div */
overflow:hidden;}

There’re also some really helping css reset snippets I use sometimes; like Eric Meyer’s Reset CSS and YUI Reset CSS. This is pretty much like how I manage things and prevent future challenges.

Any suggestions to further standardize view? Let me know!

Tags: base css, code, CSS, IE6, reset, web design

This entry was posted on Monday, February 11th, 2008 at 3:43 am and is filed under CSS, Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.