Advanced Search Module

Close Search
 

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.

Related posts:

  1. Add Yahoo Smileys to Blogger Posts – Firefox Hack
  2. Add 125 x 125 ad section to Blogger
  3. Add Icon Before Post Titles
 
 

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

  • subagya February 1, 20093:31 am

    Assalamulaikum Rias,

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

    wassalam

  • True hacking February 1, 20094:50 pm

    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

  • saterlatblogs February 4, 200912:32 am

    Thanks For Share your information

  • xäsh ™ February 5, 20095:28 am

    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.

  • aLiN February 6, 200911:11 am

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

  • thefantasysportsroom February 9, 20096:32 am

    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

  • Mohamed Rias February 10, 20095:04 pm

    Hi thefantasysportsroom ,

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

    mohamedrias1103@gmail.com

    regards ,
    Blogger Accessories

  • Dragonblogger February 16, 20091:02 pm

    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.

  • Japan Shah March 1, 20094:10 am

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

  • anhsirk March 4, 20097:01 pm

    Thanks for the Post.

  • janmck March 17, 20092:24 pm

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

  • DrMartin April 7, 200910:31 pm

    cool! thanks for this man! :D

  • Softpump April 9, 20095:59 am

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

    Aditya

  • dAwN April 11, 20095:43 am

    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…

  • Mohamed Rias April 11, 200911:01 am

    Hi Dawn ,

    I will never mistake you dude….
    take care

    regards,
    Mohamed Rias

  • Sudeep April 20, 200910:54 pm

    hey rias i do not understand your post please help me

 
 

16 Responses to "Create Compatible CSS for Firefox , IE6 , Opera , IE7 , etc"