Friday, May 15

Simple CSS tricks for IE

All those who are familiar with web designing will know about cross browser issues. You start designing a beautiful layout with CSS and after much testing in Firefox when you are satisfied with the results, you realize all those efforts are in vain, just to find out that the design looks ugly in IE or some other browser like opera or safari. (Most of the time it is IE).

I had the same problem with IE. So how can we overcome issues in such situations?

1) Firefox Addon to make life easier

First thing first. Firefox is the most widely used browser among web designers. It provides very useful sets of Addons like the Web developer toolbar , firebug which are a must to assure easy , smooth coding.

The next thing is to make sure your css looks perfect both in firefox and IE. The IE tab addon for firefox can come to rescue here. You can download it here. You do not need to have FF and IE simultaneously open for this. A small FF icon at the bottom right of your browser , when clicked changes to IE tab. So you can easily test how your CSS would appear in IE. Another click on the icon and you are back to FF.

2) The centering Issue.

Now days since everyone mostly uses a 1024 * 786 Resolution or higher monitors , the basic width of the website mostly considered is 960px. For this we define a div tag which will include the entire web page mostly called as the body-wrap or container. (The div name can be anything depending on your choice.)

Your css will look like this :

body {

margin : 0px;
padding:0px;
background-color:#FFFFFF;

}

#body-wrap {

Width : 960px;
height:auto;
margin-left : auto; /* this will assure that your main body or the layout is centered to the */
margin-right:auto; /*main browser window.. */

}

The above code will work well for FF , however it will not work for IE. IE would not consider it centered and continue displaying it left aligned.

To make it work for IE we need to introduce small changes to our css

So our CSS would look like this :

body {

text-align : center; /* For IE
margin : 0px;
padding:0px;
background-color:#FFFFFF;

}

#body-wrap {

Width : 960px;
height:auto;
margin-left : auto; /* this will assure that your main body or the layout is centered to the */
margin-right:auto; /*main browser window.. */
text-align : left /* this will counter the body center.

}

The above small change to the code will do the trick.

Well there are a lot of problems that occur in IE , this is one of the basic and if not known may create a lot of frustration. Hope this helps.

Be the first one to Comment!!!

  1. @peter thanks a lot...there are many such small hacks..u can share them here if u know any...

    ReplyDelete