Monofactor - Design Graphics and Web Development Studio and Blog of Onur Oztaskiran

There’re so many times I find myself struggling with IE6 and 7 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 base selectors to use and they exist almost on every css file of my previous projects and this site’s css as well.

Doing that, I reset the default values for common elements and selectors, and then I restyle and organize those elements individually, wherever they are needed.

Here are my favourite fixes and resets for my possible troubles:

• 1- 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 {
  font-size:138.5%;
  }
  

  IE6 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,h2,h3 {
  margin:1em 0;
  }
  
  h2 {
  font-size:123.1%;
  }
  h3 {
  font-size:108%;
  }
  h1,h2,h3,h4,h5,h6 {
  font-weight:bold;
  }
  

• 2-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;
  }
  

• 3- Removing the Link Outlines

  Especially with Firefox view, a links get bordered and outlined on focus and active states. It is annoying when it is not intented, so I deactivate the link outlines.

  a {
  outline: none;
  }
  

• 4- Preventing Linked Images Gain Borders

  Unstyled img elements gains borders when they are hyperlinked. I remove the possible image borders:

  img {
  outline: none;
  }
  

  However, as Gareth reminded me on his comment; removing outlines may reduce accessibility. Removing outlines and borders on focus or hover will theorically disable browsing using tab key.

  Unless you are not worried about this issue, you can use this hack.

• 5- Resetting Margin and Paddings on My Common Elements

  Mostly because IE renders margins and paddings ratherly different than other major standards based browsers, I reset the paddings and margins for my form, paragraph, and list elements.

  p, form, ul, ol, dt, dd {
  margin:0;
  padding:0;
  }
  

• 6- Clear Fix

  Almost in every project, I come to needing the float clearing divs or classes to attach. So I created a base class selector for clearing div and usually pick name from a comic hero. Mostly I name it spiderman/batman =)

  .batman:after {
  content:".";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
  }
  .batman {display:inline-block;}
  /* Hide from IE Mac */
  .batman {display:block;}
  /* End hide from IE Mac */
  

Of course some of you might think if all of these settings are necessary, as some of the techniques may be altered with other shortcut selectors. These are just my kind of solutions, and I hope they help on your projects too.

There are many more techniques about base css documents and resetting selectors like Yahoo’s Base CSS and Eric Meyer’s Reset CSS. Just take a loot at them and see how timesaving they are.

Tags: base, CSS, reset