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

31. Jan, 2009 27 Comments


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.

Mohamed Rias - has written 94 posts on Techie Blogger

I am Mohamed Rias , admin of Techieblogger.com. Basically I am Engineering student but still blogging is my passion. My areas of interest are HTML , CSS , Jquery , Javascript and PHP.

Visit Authors Website  |  All Articles From This Author
0
hits

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

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

  1. subagya Reply 31. Jan, 2009 at 8:31 pm

    Assalamulaikum Rias,

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

    wassalam

  2. dlcomplete Reply 01. Feb, 2009 at 2:46 am

    اسلام وعلیکم:۔
    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. True hacking Reply 01. Feb, 2009 at 9:50 am

    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. saterlatblogs Reply 03. Feb, 2009 at 5:32 pm

    Thanks For Share your information

  5. xäsh ™ Reply 04. Feb, 2009 at 10:28 pm

    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. aLiN Reply 06. Feb, 2009 at 4:11 am

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

  7. thefantasysportsroom Reply 08. Feb, 2009 at 11:32 pm

    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. Mohamed Rias Reply 10. Feb, 2009 at 10:04 am

    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. Dragonblogger Reply 16. Feb, 2009 at 6:02 am

    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. Softpump Reply 21. Feb, 2009 at 2:10 am

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

  11. Japan Shah Reply 28. Feb, 2009 at 9:10 pm

    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. anhsirk Reply 04. Mar, 2009 at 12:01 pm

    Thanks for the Post.

  13. Jake Ilac Reply 13. Mar, 2009 at 4:04 pm

    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. janmck Reply 17. Mar, 2009 at 7:24 am

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

  15. Blogger Online Reply 06. Apr, 2009 at 6:31 pm

    hey friend
    http://bloggeronline.net

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

  16. DrMartin Reply 07. Apr, 2009 at 3:31 pm

    cool! thanks for this man! :D

  17. Softpump Reply 08. Apr, 2009 at 10:59 pm

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

    Aditya

  18. dAwN Reply 10. Apr, 2009 at 10:43 pm

    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. Mohamed Rias Reply 11. Apr, 2009 at 4:01 am

    Hi Dawn ,

    I will never mistake you dude….
    take care

    regards,
    Mohamed Rias

  20. Sudeep Reply 20. Apr, 2009 at 3:54 pm

    hey rias i do not understand your post please help me

  21. doctor A.E Reply 23. Apr, 2009 at 3:32 pm

    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. Prathy Reply 09. Jun, 2009 at 10:59 pm

    For browser compatibility solution see this URL:
    http://iwasnotbornasagenious.blogspot.com/2009_06_07_archive.html

  23. Amarendra Reply 13. Jul, 2009 at 5:28 am

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

    Good Work

  24. Fabio Reply 22. Aug, 2009 at 2:44 pm

    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

  25. mohammad imtiaz Reply 07. Oct, 2009 at 11:13 am

    #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…

  26. vijay Reply 13. Oct, 2009 at 4:00 am

    wow great blog,

    it really resolved for my website in IE 7

    thanks..vijay

Blogger Hack, CSS, blogger tutorials