Create Compatible CSS for Firefox , IE6 , Opera , IE7 , etc

Learn How to create Compatible CSS for Various Browsers like Internet Explorer 6 , IE7 , IE8 , Opera , Firefox , etc..

Web-designers create blogger template for Hours using one particular browser say Firefox , They don’t know that the CSS code they use is compatible only for the browser they are working at present. Especially in IE6 , there are many Compatible issues.

for Example : the sidebar may appear below main content wrapper or there would be more gap between each widget , content wrapper and sidebar may overlap ,etc.

So in this Post I will tell you How to create CSS code which is compatible for almost all browsers. For this you need to have two browsers Internet Explorer 6 and Firefox .

I have chose IE6 because it is one of the most common browsers which windows have.

Incompatibility issues in IE6 and Firefox

First let’s check is our current Blogger template is compatible with all browsers or not.

For this visit this website : Browser Screen shots
Enter your Blog URL and check the images there to know How your blog looks in various Browsers.

step 2 : If you find any incompatibility issues then you need to modify your CSS code to suit browsers.

Let’s us see an Example

Generally the css we use if of this form :

#example {
float : left;
width : 170px;
margin-left : 5px;
}

In this assume that this particular div is incompatible with Internet Explorer version x.

then we need to modify the above css code as

#example {
float : left;
width : 170px;
margin-left : 5px;
}
#example {
float : left;
width : 185px;
margin-left : 3px;
}

in this first css code is for all versions of Internet Explorer and the second css code is for other browsers like firefox , opera , dillo , sea monkey , etc

but it will be confusing for you to edit.. so now we are going to add different CSS rules to IE, we can use the child selector command which IE can’t understand. The child selector command involves two elements, one of which is the child of the other. So, html>body refers to the child, body, contained within the parent, html.

After introducing Child selector command , the css code must look like this

#example {
float : left;
width : 170px;
margin-left : 5px;
}
html > body #example {
width : 185px;
margin-left : 3px;
}

in this the green colored code is for IE versions and the red Colored code is for other browsers.

So with simple child selector command we can make our css code compatible for all browsers. Every time when I create a New template , I use to check whether it is compatible with other browsers or not. And I use to change the CSS code to suit that browser.

If you are unable to modify the CSS code then please mail me your template and explain the problem , I will rectify those errors and mail you back.





If you like this article , then please help us by bookmarking

43 Responses to “Create Compatible CSS for Firefox , IE6 , Opera , IE7 , etc”

  1. Assalamulaikum Rias,

    nice post bro..
    how about using global reset css it can help for fix that problems?

    wassalam

  2. اسلام وعلیکم:۔
    Brother i have a problem and it is only in IE when i increase the width of my comment-form my right sidebar goes down and it’s look bad.What should i do?http://www.dlcomplete.com

    Stylish VBulletin Comment Area in Blogger
    http://www.dlcomplete.com/2009/01/stylish-vbulletin-comment-area-in.html

  3. hello friend pls tell how to put

    "NUMBERED COMMENTS"

    as showing numbers in ur blog pls write article about it i am waiting for this thanks …

    ==>P.K.ARUN

  4. Thanks For Share your information

  5. Thank you for the very useful tip. :)
    Am experiencing a problem with that–my URL works well on Firefox but not IE.
    However, am unsure of where to change (which element) of the HTML code.
    Will be truly grateful if you could give me a hand. :)

    URL : http://diaryofane-shopaholic.blogspot.com/
    Email: bittersweet.symphony01@hotmail.com

    Thank you.

  6. I’m waiting for your response, i have some trouble with my template :-s. I sent you an e-mail

  7. Mohamed.. how do I mail you my template..i need a little help… this looks like i came to the right place… you can contact me at rmcguire15@gmail.com

  8. Hi thefantasysportsroom ,

    Welcome to Blogger Accessories. Send me your blog template to my email id as an attachment

    mohamedrias1103@gmail.com

    regards ,
    Blogger Accessories

  9. Is this post complete, the child selector code doesn’t appear to be in there, where is the code to detect the browser version.

    Very good post about CSS code.

  10. Can u plz convert egamer wp template to blogger……..
    i want it for my site Gamespump

  11. thanks for spreading the world…..
    when I tried with IE6,7 and firefox in my css

    #example {
    float : left;
    width : 170px;
    margin-left : 5px;
    }
    #example {
    float : left;
    width : 185px;
    margin-left : 3px;
    }

    IE 6 works with this
    #example {
    float : left;
    width : 170px;
    margin-left : 5px;
    }

    but, IE7 and firefox follows

    html > body #example {
    width : 185px;
    margin-left : 3px;
    }

    thanks but it resolved my problem up to certain extent….

  12. Thanks for the Post.

  13. It's a plenty of work to do. I have 2 Free Blogger Magazine template (http://arapaaptemplate.blogspot.com & http://namnama-template.blogspot.com) that I launch which I've done it with Google Chrome browser, the thing is this templates were looks okay with Chrome, Ubuntu and Firefox but when I tried to view on IE, some of the sidebar goes down.

    Do I have to put html>body in all the CSS code or just on the part which goes down?

    Thanks for this post!

  14. AMazing post! weee! thanks! now I won’t have to worry about browser compatibility!

  15. hey friend
    http://bloggeronline.net

    can i have some your templates on my blog?
    http://www.bloggeronline.net

  16. cool! thanks for this man! :D

  17. can u plz give the orange CSS you used for the subscribe widget which you had you put after every post.

    Aditya

  18. Thanks you for your help today on my blog template..I have been trying to make a donation..but I dont remember my pay pal account information. I will get that when my husband returns. Please dont think I forgot…

  19. Hi Dawn ,

    I will never mistake you dude….
    take care

    regards,
    Mohamed Rias

  20. hey rias i do not understand your post please help me

  21. thank you
    but i try to use this method in my new template
    but failed

    see my blog http://shbshb-tv.blogspot.com/

    its in arabic (rtl)

    but look good in IE8,OPERA,FIREFOX
    NOT COMPATIPLE WIH IE 6

    please help me fixing this error
    thanks alot

  22. A very good post. Nice way to resolve compatibility issues between browsers w.r.t css.

    Good Work

  23. I have tried but i still cannot make it compatible. Could you give a look to the site and let me know what you think i am doing erong. I am not an expert..

    Best Regards

  24. #example {
    float : left;
    width : 170px;
    margin-left : 5px;
    }
    html > body #example {
    width : 185px;
    margin-left : 3px;
    }

    your code not working, Plz let me how to use it.

    Thanks…

  25. wow great blog,

    it really resolved for my website in IE 7

    thanks..vijay

  26. Having some alignment issues with compatibility pertinent to Internet Explorer 5-7 on my website and i can’t fix the problem. I have tried everything and W3 Validates my website. The alignment in IE is off centered on the bottom of the navigation menu and the bottom of the main content. It also isn’t aligned the same as it would be in any other browser. What adjustments can i make or what adjustments could you make?

    The web address is http://www.delanoamericanlegion.org and the css address is http://www.delanoathletics.org/style.css

  27. Works fine in Firefox. Can someone shoot me a code to make it compatible with IE?

  28. I am experiencing a problem with my css. It works well on Firefox but not in chrome.
    I am unsure of what to change (which element) of the HTML code.
    Will be truly grateful if you could help me.

    url:http://192.168.20.122:7001/qccsw/jsf/common/loginTest.jsf.

  29. hi i m unable to implement your code pls help me my blog is still nt compatible with IE8 and opera 10.60 its showing the sidebar at the bottom side pls tel wat shuld i do?

  30. Hi.

    This is really amazing. Thanks so much for this. I was also hoping you could email me, so I can send you my code. I’d really appreciate the help, as I’m still relatively new at this.

    My email is laura at giroapps.com

    Thanks again in advance! :)

    -Laura

  31. Hi,
    My blog has more pictures and little text and I wanted to remove the white space between pictures so in html, i removed this just the padding and border and it worked in IE:
    .post img, table.tr-caption-container {
    padding:4px;
    border:0px;

    Firefox has not registed this and there is still a little white space between the pictures.

    HOw do I deal with this?
    thanks you
    Sue

  32. Hi ,

    The following url works fine in latest version of Firefox but a div’s position is changing in Firefox 3.0.5 version.

    please suggest

    http://goldenslash.com/sumantesting/laser/

    Thank you.

  33. Hi,
    My css file is not working in Mozilla.
    so please guide me to solve this problem
    here is my css file ,

    body {text-align: justify;
    font-family: Arial, Verdana;
    font-size: 14px;}

    a:link {color: blue;
    font-size: 14px;}
    a:visited {color:blue;
    font-size: 14px;}
    a:hover {color: #000000;
    font-size: 14px; }
    a:active {color: #B70004;
    font-size: 14px; }

    div {margin-left: 5px;
    margin-right: 5px;
    text-valign: center;
    font-family: Arial, Verdana;
    font-size: 14px;}

    div.header {
    top: 15px;
    height: 130px;
    width: 100%;
    background-image:url(‘images\head.JPG’);}

    div.left {
    padding: 20px;
    top: 188px;
    left: 2px;
    width: 662;
    height: 270px;
    border: 2px ;
    background-image:url(‘images\left.JPG’);}

    div.right {
    padding: 12px;
    top: 178px;
    left: 675px;
    width: 300px;
    height: 270px;
    position: absolute;
    border:2px;
    background-image:url(‘images\right.JPG’);}

    div.foot1 {
    padding: 10px;
    position: absolute;
    right: 645px;
    top: 275px;
    height: 140px;
    width: 310px;
    background-image:url(‘images\foot1.JPG’);}

    div.foot2 {
    padding: 10px;
    position: absolute;
    right: 320px;
    top: 275px;
    height: 140px;
    width: 310px;
    background-image:url(‘images\foot2.JPG’);}

    div.foot3 {
    padding: 10px;
    position: absolute;
    right: 0px;
    top: 275px;
    height: 140px;
    width:310px;
    background-image:url(‘images\foot3.JPG’);}

    thanx in advance

  34. Hi, im in desperate need of help!
    im completely new to code work.im recreating a website for a client in squarespace, and created a css modification(shadow border) the other day (whilst in my firefox browser)
    i checked it in internet explorer today, and it looks awful!!
    i dont know how to rectify the problem!
    please help!
    thank u

  35. Hai,

    The following CSS is working fine only in Chrome, But not in IE,Firefox,etc…

    Am using this for my web development with some modifications such as rounded corners & rotations. Please help me to fix it.

    I got it from the following demo
    http://css-tricks.com/examples/SlideToUnlock/

    I got it from

    * { margin: 0; padding: 0; }
    html { background-color:White; }
    body {
    font: 14px Georgia, serif;
    /*
    background-image:
    -webkit-gradient(linear,left top,left bottom,color-stop(0, #3b3b3b),color-stop(1, #404040));
    background-repeat: no-repeat;
    */
    background-image:-webkit-gradient(linear,left top,left bottom));
    background-repeat: no-repeat;
    min-height: 350px;

    }

    #page-wrap { z-index: 1000; width: 740px; margin: 0 auto; padding-top:20px; height:50px }

    #well {z-index: 1000;
    padding: 14px 20px 20px 20px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    /* border-radius: 30px;*/

    background: -moz-linear-gradient(top, #010101, #181818);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #0A809C),color-stop(1, #8B8378));

    border: 2px solid #0a809c;
    overflow: hidden;

    -webkit-user-select: none;
    }

    /* #well:hover {
    z-index: 1000;
    padding: 14px 20px 20px 20px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 10px;

    background: -moz-linear-gradient(top, #010101, #181818);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #WHITE),color-stop(1, #9FCBCF));

    /*border: 2px solid #c0c0c0;
    overflow: hidden;

    -webkit-user-select: none;
    }*/

    #Top_Well {
    padding: 14px 20px 20px 20px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    /*border-radius: 30px;*/

    background: -moz-linear-gradient(top, #010101, #181818);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #efe7cf),color-stop(1, #WHITE));

    border: 2px solid #0a809c;
    overflow: hidden;

    -webkit-user-select: none;
    }

    h2 {
    background: -moz-linear-gradient(left, #4d4d4d, 0.4, #4d4d4d, 0.5, white, 0.6, #4d4d4d, #4d4d4d);
    background: -webkit-gradient(linear,left top,right top,color-stop(0, #4d4d4d),color-stop(0.4, #4d4d4d),color-stop(0.5, white),color-stop(0.6, #4d4d4d),color-stop(1, #4d4d4d));

    -moz-background-clip: text;
    -webkit-background-clip: text;

    -moz-text-fill-color: transparent;
    -webkit-text-fill-color: transparent;

    -webkit-animation: slidetounlock 5s infinite;

    font-size: 80px;
    font-family: “HelveticaNeue-Light”, “Helvetica Neue Light”, “Helvetica Neue”, Helvetica, Arial, “Lucida Grande”, sans-serif;
    font-weight: 300;

    padding: 0;
    width: 200%;

    -webkit-text-size-adjust: none;
    }
    #slider
    {
    background:url(../imaGes/GLOBE.jpg);
    background-repeat:no-repeat;
    background-position:center;
    width: 126px;
    height: 98px;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    }
    s
    /*@-webkit-keyframes slidetounlock {
    0% {
    background-position: -720px 0;
    }
    100%{
    background-position: 720px 0;
    }
    } */

    Awaiting with Regards,
    Narendran.N
    94876-93560.

  36. I just noticed that my web site looks fine in IE but HORRIBLE in Chrome and Firefox. I am using Expressions by Microsoft which utilizes css…..however, I am not familiar enough wiuth coding to change or midify it myself. Could you please look at my site in the three browsers and help me change the coding or tell me what I need to do to make all 3 compatable? I have many pages to my site so am I understanding correctly that ALL pages must be changed? H E L P!!!

  37. I created my site using blogger on Google Chrome 16.0.912.63.
    Everything looks fine. But when I test it in other browsers, the gadgets/widgets that I added to the home page are out of place. Every other page is fine. It’s just the “Tweets,” “Latest Video,” “Pics,” and social media buttons on the home page that are off. They are not centered or aligned properly. Please Help!
    Here is my CSS code (I tried adding what you posted above but it didn’t seem to fix it, so you’ll see that in the code).
    Thanks!

    /* Sidebar
    ———————————————–*/
    #sidebar-wrapper{
    position:relative;
    z-index:10;
    width:272px;
    margin-top:25px;
    margin-right:660px;
    }
    html > body #example {
    width : 185px;
    margin-left : 3px;
    }
    #sidebar,#sidebar a,#sidebar li,#sidebar ul,#sidebar ol{
    color:#787878;
    font-size:12px;
    }
    #sidebar ul{
    list-style:none;
    padding:0;
    margin:0;
    }
    #sidebar .widget{
    margin:0 0 7px 0;
    border:0px solid #;
    background:url();
    }
    #sidebar h2{
    font-size:20px;
    padding:13px 18px;
    color:#45494e;
    font-weight:light;
    margin-left:40px;
    }
    #sidebar ul{
    border:0px solid #cecece;
    border-bottom:none;
    }
    #sidebar ul li{
    border-bottom:0px solid #cecece;
    padding: 10px 18px;
    }
    #sidebar ul li:hover{
    border-bottom:0px solid #cecece;
    padding: 10px 18px;
    background:#eee;
    }
    #sidebar2 {
    width:272px;
    margin-top:-26px;
    margin-bottom:101px;
    margin-left:867px;
    }
    html > body #example {
    width : 185px;
    margin-left : 3px;
    }
    #sidebar,#sidebar a,#sidebar li,#sidebar ul,#sidebar ol{
    color:#787878;
    font-size:12px;
    }
    #sidebar2 ul{
    list-style:none;
    padding:0;
    margin:0;
    }
    #sidebar2 .widget{
    margin:0 0 7px 0;
    border:0px solid #fff;
    background:url();
    }
    #sidebar2 h2{
    font-size:20px;
    padding:13px 18px;
    color:#45494e;
    font-weight:light;
    margin-left:-281px;
    }
    #sidebar2 ul{
    border:0px solid #cecece;
    border-bottom:none;
    }
    #sidebar2 ul li{
    border-bottom:0px solid #cecece;
    padding: 10px 18px;
    }
    #sidebar3 {
    width:275px;
    margin-top:-400px;
    margin-bottom:1px;
    margin-left:456px;
    }
    html > body #example {
    width : 185px;
    margin-left : 3px;
    }
    #sidebar,#sidebar a,#sidebar li,#sidebar ul,#sidebar ol{
    color:#787878;
    font-size:12px;
    }
    #sidebar3 ul{
    list-style:none;
    padding:0;
    margin:0;
    }
    #sidebar3 .widget{
    margin:0 0 7px 0;
    border:0px solid #fff;
    background:url();
    }
    #sidebar3 h2{
    font-size:20px;
    padding:13px 18px;
    color:#45494e;
    font-weight:light;
    margin-left:500px;
    }
    #sidebar3 ul{
    border:0px solid #cecece;
    border-bottom:none;
    }
    #sidebar3 ul li{
    border-bottom:0px solid #cecece;
    padding: 10px 18px;
    }
    #sidebar4 {
    width:275px;
    margin-top:-280px;
    margin-bottom:1px;
    margin-left:151px;
    }
    html > body #example {
    width : 185px;
    margin-left : 3px;
    }
    #sidebar,#sidebar a,#sidebar li,#sidebar ul,#sidebar ol{
    color:#787878;
    font-size:12px;
    }
    #sidebar4 ul{
    list-style:none;
    padding:0;
    margin:0;
    }
    #sidebar4 .widget{
    margin:0 0 7px 0;
    border:0px solid #fff;
    background:url();
    }
    #sidebar4 h2{
    font-size:20px;
    padding:13px 18px;
    color:#45494e;
    font-weight:light;
    margin-left:84px;
    }
    #sidebar4 ul{
    border:0px solid #cecece;
    border-bottom:none;
    }
    #sidebar4 ul li{
    border-bottom:0px solid #cecece;
    padding: 10px 18px;
    }
    #sidebar5 {
    width:330px;
    margin-top:-25px;
    margin-bottom:1px;
    margin-left:475px;
    }
    html > body #example {
    width : 185px;
    margin-left : 3px;
    }
    #sidebar,#sidebar a,#sidebar li,#sidebar ul,#sidebar ol{
    color:#787878;
    font-size:12px;
    }
    #sidebar5 ul{
    list-style:none;
    padding:0;
    margin:0;
    }
    #sidebar5 .widget{
    margin:0 0 7px 0;
    border:0px solid #fff;
    background:url();
    }
    #sidebar5 h2{
    font-size:20px;
    padding:13px 18px;
    color:#45494e;
    font-weight:light;
    margin-left:141px;
    }
    #sidebar5 ul{
    border:0px solid #cecece;
    border-bottom:none;
    }
    #sidebar5 ul li{
    border-bottom:0px solid #cecece;
    padding: 10px 18px;
    }
    #sidebar6 {
    width:300px;
    margin-top:22px;
    margin-bottom:1px;
    margin-left:800px;
    }
    html > body #example {
    width : 185px;
    margin-left : 3px;
    }
    #sidebar,#sidebar a,#sidebar li,#sidebar ul,#sidebar ol{
    color:#787878;
    font-size:12px;
    }
    #sidebar6 ul{
    list-style:none;
    padding:0;
    margin:0;
    }
    #sidebar6 .widget{
    margin:0 0 7px 0;
    border:0px solid #fff;
    background:url();
    }
    #sidebar6 h2{
    font-size:20px;
    padding:13px 18px;
    color:#45494e;
    font-weight:light;
    margin-left:137px;
    }
    #sidebar6 ul{
    border:0px solid #cecece;
    border-bottom:none;
    }
    #sidebar6 ul li{
    border-bottom:0px solid #cecece;
    padding: 10px 18px;
    }

    #sidebar-wrapper {float: left;width: 215px;}

    • I’ve replaced where it says “#example” and below that with the same sidebar information as above it, but it still doesn’t seem to do anything

  38. Hello Mohamed!

    I really appreciate finding this post about Creating Compatible CSS for Firefox, IE6, Opera, IE7 etc. and found your suggestions quite insightful. I know this was several years old, but hoping you might be able to lend your expertise to identifying a CSS compatibility issue with IE8 on our website: http://www.firefighterflashgames.com

    Issue#1 – There are two (2) specific blocks that do not appear correctly in IE8. I use mostly Firefox and Safari on my Mac. In the center of the Home Page, there is a 468 x 60 Ad Block to the right of the word “Sponsor” and this Ad does NOT show in IE8 unless one selects the ‘Compatibility Button’ and then it shows incorrectly (shifted too far down.)

    Issue#2 – On the Individual Game Pages (when you select a Game to play, and new page opens) you will notice that below the Game is the text “Share Online” and to the right of this is supposed to be a row of Social Media icons. These too do not display unless the ‘Compatibility Mode’ button is pressed.

    I know this site is not a blogger site, but thought perhaps the issue was with CSS and IE8 compatibility. I’d gladly make a small donation via PayPal and send you the CSS for this site if you thought you might be able to identify how to modify the code to get these issues resolved and the graphics appearing correctly on the pages.

    Any consideration you might offer would be sincerely appreciated.

    Kind Regards,

    Ethan

Leave a Reply

You must be logged in to post a comment.