• X

    How to avoid Some Common CSS Mistakes.

    By in Uncategorized

    Bluehost hosting

    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.

    $49 worth WordPress Guide

    Discover more awesome articles

    Article by

    Saorabh has written 3 articles.

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

    { 17 comments… read them below or 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

    Previous post:

    Next post:

    `