Jan 31, 2009 in , ,

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.

Check Out This Popular Posts

23 Responses So far
gravatar
subagya
on January 31, 2009 at 7:31 PM  

Assalamulaikum Rias,

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

wassalam

gravatar
dlcomplete
on February 1, 2009 at 1: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

gravatar
True hacking
on February 1, 2009 at 8: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

gravatar
saterlatblogs
on February 3, 2009 at 4:32 PM  

Thanks For Share your information

gravatar
xäsh ™
on February 4, 2009 at 9: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.

gravatar
aLiN
on February 6, 2009 at 3:11 AM  

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

gravatar
thefantasysportsroom
on February 8, 2009 at 10: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

gravatar
Mohamed Rias
on February 10, 2009 at 9: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

gravatar
Dragonblogger
on February 16, 2009 at 5: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.

gravatar
Softpump
on February 21, 2009 at 1:10 AM  

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

gravatar
Japan Shah
on February 28, 2009 at 8: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....

gravatar
anhsirk
on March 4, 2009 at 11:01 AM  

Thanks for the Post.

gravatar
Jake Ilac
on March 13, 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!

gravatar
janmck
on March 17, 2009 at 7:24 AM  

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

gravatar
Blogger Online
on April 6, 2009 at 6:31 PM  

hey friend
http://bloggeronline.net

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

gravatar
DrMartin
on April 7, 2009 at 3:31 PM  

cool! thanks for this man! :D

gravatar
Softpump
on April 8, 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

gravatar
dAwN
on April 10, 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...

gravatar
Mohamed Rias
on April 11, 2009 at 4:01 AM  

Hi Dawn ,

I will never mistake you dude....
take care

regards,
Mohamed Rias

gravatar
Sudeep
on April 20, 2009 at 3:54 PM  

hey rias i do not understand your post please help me

gravatar
doctor A.E
on April 23, 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

gravatar
JOB-INFO
on June 9, 2009 at 10:37 PM  
This comment has been removed by the author.
gravatar
Prathy
on June 9, 2009 at 10:59 PM  

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

Post a Comment

Custom Search
Web Analytics