ShoutMeLoud – Shouters Who Inspire

Superlinks
≡ Menu
≡ Menu

How to avoid Some Common CSS Mistakes.

rainmaker
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

CSSboxmodelbyw3c thumb

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

DiffCssBoxModels thumb

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>

CSS

.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.

  • Author Bio

  • Latest Post

Article by saorabh

Saorabh has written 3 articles.

If you like This post, you can follow ShoutMeLoud on Twitter. Subscribe to ShoutMeLoud feed via RSS or EMAIL to receive instant updates.


{ 17 comments… add one }

  • sagar

    It is very useful article.
    Thanks Saorabh.

    Reply
  • Jitendra

    very helpful information

    Reply
    • saorabh

      Thanks dude for your comment.. :)

      Reply
  • Mad Geek @beingPC

    Nice tips, continue this tutorial buddy

    Reply
    • saorabh

      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..:)

      Reply
  • vector graphics

    @Saorabh Thanks for the awesome post. :)

    Reply
    • saorabh

      Thank you vector:)

      Reply
  • jason | TheBlogQuest.com

    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.

    Reply
    • saorabh

      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..:)

      Reply
  • himanshu

    great tips. i’ll make a note of this

    Reply
    • saorabh

      Thanks Himanshu:)

      Reply
  • Mukundan Srinivasan

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

    Reply
    • saorabh

      Thank you for your comment Mukundan :)

      Reply
  • Tushar

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

    Reply
    • saorabh

      Hey Tushar Thanks for your comment:)All the best enjoy:)

      Reply
      • Prasad

        yes…a great css article. Damn helpful..!!

        Reply
      • Prasad

        Helpful article.

        Reply

Leave a Comment