How to solve browser compatability problems.

Question

I had created a website for my personal use.I was working with Mozilla firefox.But when i moved to IE7 , the entire site was lost. The structure and all its alignments has gone. So please help me to solve this issue.

thanks/-

Answer 1

There are a number of differences between browsers in how they implement layout and CSS, most notably because most versions of Internet Explorer implement CSS badly. You'd have to give much more specific details for people here to be able to help you more, but one possible approach is to use different stylesheets on IE from other browsers. Be warned that this is a complex area, and there are major differences even between versions of IE!

Answer 2

Specifying browser specific style sheets is one solution, but I really dislike it as it can be unreliable and hard to manage.

Your best solution is to test in all browsers during development and make sure everything look as it should in all browsers before moving on to the next design element.

Experience and trial and error are the only way unfortunatly.

Answer 3

I usually open minimum 5 different browsers (Internet Explorer, Firefox, Google Chrome, Apple Safari and Opera) all in the "current/latest" version - sometimes I also go backwards one version - especially with Internet Explorer as their standards changes like the wind blows. :-)

I you build a website that follow the standard (X)HTML from W3C http://www.w3.org/ and make it work with CSS and XHTML in Chrome and Internet Explorer, then most of your job is done.

I spend very little time "fiddling" with the last browsers as they more or less all follow the same specs. Secondly Google Chrome and Firefox are great for debugging weird CSS/HTML bugs.

I never make any "hacks" for browser limitations in the CSS, no "clearfix hacks" nor any special style sheet depending on browser type.

BUT if my website is going to work in certain other hardware platforms such as a mobile phone, I might do a second stylesheet or perhaps just generate the whole website with another structure and on another URL such as: http://m.example.com/

To help you make the website work, I would rather say:

1.) whats your current problem with the HTML/CSS ? where is it you have made some wrong decisions and cant you fix these?

2.) rebuild the website with known W3C standards in mind and check that the new layout and navigation is compatible with Internet Explorer (minimum 7) and latest Google Chrome, then you have covered most standards.

3.) learn when to use display:block; in CSS http://www.w3schools.com/css/pr_class_display.asp

4.) NEVER EVER mix WIDTH/HEIGHT settings with PADDING and MARGIN in the same CSS class, this will make SOME older browser mess up your designs. And THIS might be the major reason for your design crashing.

lastly... always remember to provide us with some documentation on your problem so we can examine if its something we actually know the solution for... in other words, where is the problem? show us....

Was this useful, then please mark it as your answer. Thanks

Answer 4

http://hsivonen.iki.fi/doctype/
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
http://www.positioniseverything.net/explorer.html

Answer 5

Find out what breaks your code, and fix it in this silly html if statements, that would be my suggestion.

If your website doesn't show up at all, you can simply write entire new page in the if statements.

And sadly, these if statement only support IE variation, not for Chrome, firefox, opera, Safari, or else.

<p><!--[if IE]>
    According to the conditional comment this is Internet Explorer<br />
    <![endif]-->
    <!--[if IE 5]>
    According to the conditional comment this is Internet Explorer 5<br />
    <![endif]-->
    <!--[if IE 5.0]>
    According to the conditional comment this is Internet Explorer 5.0<br />
    <![endif]-->
    <!--[if IE 5.5]>
    According to the conditional comment this is Internet Explorer 5.5<br />
    <![endif]-->
    <!--[if IE 6]>
    According to the conditional comment this is Internet Explorer 6<br />
    <![endif]-->
    <!--[if IE 7]>
    According to the conditional comment this is Internet Explorer 7<br />
    <![endif]-->
    <!--[if gte IE 5]>
    According to the conditional comment this is Internet Explorer 5 and up<br />
    <![endif]-->
    <!--[if lt IE 6]>
    According to the conditional comment this is Internet Explorer lower than 6<br />
    <![endif]-->
    <!--[if lte IE 5.5]>
    According to the conditional comment this is Internet Explorer lower or equal to 5.5<br />
    <![endif]-->
    <!--[if gt IE 6]>
    According to the conditional comment this is Internet Explorer greater than 6<br />
    <![endif]-->
    </p>