views:

90

answers:

5

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/-

A: 

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!

psmears
The first page you linked to is old and contains several misunderstandings of fundamental concepts (e.g., the chosen box-model isn't decided because of ‘ISO value’s, whatever those may be, but whether IE >= 6 is in [quirks mode](http://hsivonen.iki.fi/doctype/) or not). Not my down vote, BTW.
Marcel Korpel
Yeah... It's hard to find a page that's 100% accurate on the issues; the idea was more to find a page that at least has roughly comprehensive list of the sort of problems to expect, than to give chapter and verse on each particular problem. Probably should have mentioned that in the answer :-) (And the downvote looks like a drive-by; when I last looked every single answer on this page, plus the question, had been downvoted...)
psmears
A: 

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.

Tom Gullen
A: 

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

BerggreenDK
Edited to comply to [RFC 2606](http://www.ietf.org/rfc/rfc2606.txt).
Marcel Korpel
A: 

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>
Ankiov Spetsnaz
@Ankiov I dont agree on this solution, instead of bugfixing and patching, which gives us terrible code/markup as a result - I believe that figuring out HOW the standards works, will do most of the job and then keep away from things not supported on most popular browsers and versions.
BerggreenDK