How to avoid Some Common CSS Mistakes.

I am here once again to share my knowledge. All points are based on my experience which I faced while development, but finally I got some solution and I want to share them with you all. We all are good with CSS but sometimes we forget to write the basic fundamentals. Still CSS3 not the most popular and still most of the people are using IE6,IE7 and these browser have its own market place,so while writing CSS we must be very careful. Some times browser like Firefox,Google Chrome hides our mistake but Microsoft browsers does not hide our mistakes.

Some important points must be considered while developing a site with cross browser capability: –

1) CSS Box Model: –

CSS Box model by W3C

CSS box model by w3c

Total Width = Margin-left + Border-left + Padding-left + Width + Padding-right + Border-right + Margin-right

CSS box model Supported by IE

Total Width = Margin-left + Width + Margin-right


Compression  between these two CSS Box Models

Diff Css Box Models

Now we can see the difference in above example how IE renders the content width. While writing the CSS If we consider this point in our mind the Layout of our site will never break.

2) Always clear floated element: –

When an html tag end we should always try to clear the block element because we don’t know is the element is floated or not. We have to avoid the overlapping the element.


<div class=”clear”></div>



3) Overflow Properties:  –

We know that all modern browsers supports overflow:hidden but IE 6 didn’t support overflow:hidden


Make the container DIV as overflow:auto and inside container any html tags make it position:relative and these CSS will go down in ie.css or conditional ie.css

Syntax of condition ie css

<!--[if lt IE 6]>
<style type="text/css">
#container {overflow:auto}
#container p{position:relative}


4) Background Attached Image problem: –

While Writing CSS for background properties sometimes we forgets its elements position


background:url("img/bg.png") repeat-x scroll 0 0 #EBEBEB;

This syntax will work fine in all browsers but sometimes instead of background color we didn’t require any color, so sometime we write our CSS like this

background:url("img/bg.png") repeat-x scroll 0 0 transparent;

Oh this will work in all modern browsers but it’s not going to work on IE.

IE only works when the used parameters is corrects.

IE is looking for this if he found the syntax in such a manner then it will work,

Correct placement which works in any browser


background:transparent url("img/bg.png") repeat-x scroll left top ;

5) Text-indent Problem:

p a{text-indent:-999;display:block}

It work perfectly fine again in all modern browsers but Its again not going to work on IE.

For all browsers the syntax would be,

p a{text-transform: capitalize;text-indent:-999;display:block}

After adding text-transform: capitalize it will work fine.

6) z-index problem for embed code: –

Most of the time we are facing the problem of z-index when we apply it on embed code. To make it work, In the  object of video , try setting a param

wmode = transprant

Add this to your object:

 <param name=”wmode” value=”transparent”>

and this to embed:

wmode = “transparent”

and remember to close your embed tag with either


I hope you enjoyed this tutorials. Suggestions and feedback’s  are most welcome.Will try to provide more details in my next post.

Subscribe on Youtube

Article By
I'm a Wordpress Developer and Work for rtCamp...


COMMENTs ( 17 )

    • saorabh says

      Yes, I will as I said in this post I will always try me level best to share some more and more tips with you all.
      Thanks for for comment Mad Geek..:)

  1. jason | says

    Thanks for posting this. I had some CSS issues I had been wrestling with on two of my blogs that left me scratching my head for days.

    I finally solved most of them by brute force, put probably screwed up some other stuff.

    I think it’s worth while to learn CSS better. I appreciate the CSS tips. I will review my CSS files to see If I have any of these issues.

    • saorabh says

      Hey Jason thanks for your comment.. Definitely this post will help you at the any point if you have some problem, fell free to ask me its really pleaser for me..:)

  2. Mukundan Srinivasan says

    This tutorial helped me to improve my CSS knowledge. Nice tutorial and you have presented well.

  3. Tushar says

    definitely a great CSS tutorial…i have just started learning CSS and in these 2 weeks, it has been fascinating