How to avoid Some Common CSS Mistakes.

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

1) CSS Box Model: –

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

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.

syntax:

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

.clear{clear:both}

3) Overflow Properties:  –

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

CSS Fix

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}

endif]-->

4) Background Attached Image problem: –

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

Example:

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

syntax

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

</embed>

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