My website looks different in Firefox.?

Question

I am coding my own website right now and I am almost done. Only one problem. It looks perfect in Internet Explorer, but when I test it in Firefox the areas of my websites , images, etc get shifted. I doubt its a problem in my actual html coding. Could it be a problem with Firefox not understanding my CSS? What's going on and how can I go about fixing this issue?

Thanks in advance.

Answer 1

Welcome to the world of browser's incompatibilities! (And especially of the misunderstood

's)

No two browsers renders the CSS, nor the W3C recommendations the same way: it is up to the coder to "fine tune" his/her code to make it compatible with, at least, IE, FF, Opera, Chrome and Safari.

It is a bit of a nightmare, but it IS possible (We always GUARANTEE compatibility, and never need multiple CSS!)

However, the list of "quirks" is huge, and far too long to enumerate here.

IE is the one with the most problems: we develop for IE first. When it works ok there, it is very little work to have it working fine with all other browsers. Developing for FF first will guarantee that it will NOT work on IE.

Good luck!

Answer 2

It COULD be a problem with IE not understanding CSS and your coding being wrong because you used IE as your reference browser.



Internet Explorer is well known to have many browser quirks*, which you can check some of them out at http://www.positioniseverything.net/



*One of the biggest quirks is that an XML-prologue (or even a comment) before the DOCTYPE throws Internet Explorer into quirks mode, even though conforming XML documents (such XHTML documents) require it AND the similar enough SGML declarations have been in use since before Internet Explorer was even a browser.



Here's what you could do:



1) Confirm if it's Firefox or Internet Explorer by downloading another good browser like Opera http://www.opera.com/ , Safari http://www.apple.com/safari/ or Google Chrome http://www.google.com/chrome



If these browsers agree with Firefox, then it's Internet Explorer who is wrong.



2) Make sure you have the latest two major versions of Firefox, or at least just the latest non-beta version.



So we could actually give you an answer, please show us your code AND/OR a link to your website. Also tell us what versions of Internet Explorer and Firefox you're using.



For future references, build for Firefox first, using it as your reference browser, *then* fix quirks on Internet Explorer.



Hope this helps!

Answer 3

* Ye.. this is a common issue in web development, and I too experienced it before.

* For me the opposite thing happens; in most of the time, the site shows all right on firefox but having issues on IE.

* And for me the major reason for this issue is CSS is not reading well on IE and sometimes the CSS that does not read from IE6 is showing on IE7.

* Most time it is an issue of CSS so you have to implement codes to show in different browsers.

* And after modifying the template of a site make sure to view it through different browsers.



Cheers~~

Answer 4

Why Validate?: http://validator.w3.org/docs/why.html

CSS Validator: http://jigsaw.w3.org/css-validator/

HTML Validator: http://validator.w3.org/#validate_by_uri+with_options



IE Bugs: http://www.positioniseverything.net/explorer.html



IE's Coditional Comments: http://msdn.microsoft.com/en-us/library/ms537512.aspx



That should help you get closer to cross-browser compatibility. Firefox "understands" a lot more than most browsers and will present your pages as you have coded it. If it looks bad, you coded it badly. Validate the CSS/HTML and use IE's Conditional Comments to keep IE in line. Check the other requirements for what is needed to use in your CSS for other browsers. Do NOT leave stuff out because you expect the browser to know what you want. It will parse the pages just as the developers set it to and will fall back on its default parsing if something is not "understood".



Ron