CSS Tips and Tricks

When I am coding the web pages, I frequently run into problems with CSS rendering properly on Internet Explorer. So, the first place I go to for a solution is my best friend Google. Over the time, I have collected some CSS tips from the many forums and other websites and I save them for a quick reference. Here are some of them.

Margins in IE:

Margins are rendered differently in FF and IE – especially IE6. To correct the double margin showed by IE6 add the following:

display:inline

Margins for <ul> Tags:

<ul> tags have some standard margins. It determines how far the element wants to be from the elements above and below it.
If, the <ul> tag is rendering extra space above or below it, then add this to the style sheet:

ul{
Margin: 0em;
}

a:hover in IE:

I was surprised to learn that a:hover properties do not work properly in IE. When I was designing a menu for a client, I had a simple CSS for hovering over the links. This did not show up in IE. For the hover properties to work in IE add position:relative property.

#menu li a:hover{

border-bottom-color:#C30;

border-bottom-style:solid;

position:relative; /* This was added for the hover to work in IE */

}

Writing IE Specific hacks:

This is one of my favorites. If you wish to write a property specific for IE, just add ‘//’ in front of the property.

#menu li a{

color:#FFF;

text-decoration:none;

padding-left:10px; /*This will work for Firefox and other browsers*/

//padding-left:8px; /*This will work for IE*/.

padding-right:10px;

//padding-right:8px;

}

The most important thing to remember for this hack to work is that you have to write the general rule first and then the hack for IE. The first rule is seen by FF and other browsers. The next property is ignored all browsers except IE.

Feel free to add to the list and come back for some more CSS tips or better yet subscribe to my feed.