Website compatibility wtih all web Browser

They have: 5 posts

Joined: Feb 2009

Hey guys I need some tips to know how to make my website to compatibility with all browsers.When I use firefox its working fine,but when I try to use with IE7 all the positions n some other stuff messed up....Please share with me ty very much...

decibel.places's picture

He has: 1,494 posts

Joined: Jun 2008

unfortunately, it is often necessary to create a special stylesheet for IE and often you will need one for IE6 and another for IE7 (and soon, perhaps, IE8)

rather than relying on hacks and tricks that might stop working, the recommended method is conditional comments

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

A lot of this really comes from experience - knowing what is likely to cause problems and how to solve them. Widths, margins, and padding (box model) is often the biggest problem. Using a lot of absolute positioning can also cause problems.

Always make sure you're using a strict doctype (either html 4.01 or xhtml 1.0). THis will help to make sure you're seeing the most standards compliant rendering mode. Then design for standards compliant browsers first (Firefox, Opera, Safari etc.). After that, try to tweak so it works in IE. If you can't make it work in both, then use conditional comments to server different CSS to IE.

My current preferred method of using conditional comments is to put in an extra wrapper div for IE called IEroot (and IE6root if necessary). THen you can add in the extra CSS in your regular stylesheet. This way you don't risk making mistakes when you do future changes because you've forgotten about the special IE css file.

decibel.places's picture

He has: 1,494 posts

Joined: Jun 2008

can you post an example, Megan?

it seems to me that any IE styles applied to a wrapper would be overriden by the non-IE styles...

unless you have an IE wrapper inside every container, which is tedious

He has: 629 posts

Joined: May 2007

Not to speak for Megan, but I think she means something like this:
HTML:
<!--[if lt IE 8]><div id="for-ie5-7"><![endif]-->
... your content here ...
<!--[if lt IE 8]></div><![endif]-->
CSS:
#for-ie5-7 (rest of selectors here) {declarations for IE only ...}

I don't think anyone expects their designs to work in "all browsers"-- counting all the older versions out there, there must be thousands. You may like to read about how Google tackles this tricky problem with their Graded Browser Support.

Good luck with your efforts. Visit us for help when you get stuck.

Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;

decibel.places's picture

He has: 1,494 posts

Joined: Jun 2008

I do not think the conditional comments are what Megan meant - she said if IE containers don't work THEN try conditional comments. And I do not see how adding these makes any difference - you can have divs that add inherited styles for IE... without donditional comments.

Even with your code, webwiz, I do not see how the IE containers will work unless they are placed inside each of the other containers with styles that don't work in IE... seems to be a big burden just to consolidate the stylesheet.

I am used to Drupal sites that may have 30+ stylesheets (that's why you can optimize and cache them)

RTFVerterra's picture

He has: 109 posts

Joined: Dec 2008

I saw a lot of CSS with a line of code that says !important. I am not sure if this is related to this post. But what it is all about?

pr0gr4mm3r's picture

He has: 1,502 posts

Joined: Sep 2006

That just means that no future CSS statements can override that setting.

RTFVerterra's picture

He has: 109 posts

Joined: Dec 2008

ok thanks, I thought this is about IE6 fix.

They have: 18 posts

Joined: Oct 2012

Yes all points about contemptibility of a website with all browser are good because All browsers work differently and in order to make an impact extensively and expansively, your website must be compatible with all web browsers without distortions and errors.Read some tips about this topic here.

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.