Website displaying differently on firefox, internet explorer and google Chrome

Question

I have finished designing my website but it displays differently on firefox, chrome and internet explorer. I believe i have done everything right but i dont know what is happening. Actually, google chrome displays it as i want it to, but firefox and internet explorer does not. My internet explorer version is 10 and firefox is 29. Please any help is much appreciated. thanks This is the link to hosted site: http://www.ruebenpersonal.netai.net. http://pastebin.com/xTnXeGhq - Link to the html source code.

Answer 1

Some browsers are uses the same rendering engine and some are not.

For example:

Google Chrome and Safari browsers are using : Webkit Engine (See: http://www.webkit.org/)

Firefox is using Gecko Engine (A.K.A. Moz) - (See: http://en.wikipedia.org/wiki/Gecko_(software)

Opera is using : Presto (See: http://www.opera.com/docs/specs/productspecs/)

So differences between rendering engines are normal. Which is why we are using their css properties like;

-webkit-border-radius /* For Webkit */
-moz-border-radius /* For Gecko */
-o-border-radius /* For Presto */
border-radius /* For IE9+ */

Some older browsers like Internet Explorer 6, 7, 8 are not giving support for most of CSS3 methods. To enable that methods, there are available to use JS engines like html5shiv or modernizr.

---

Note: You can use a service like this to generate starter templates that supports almost every browser.

Initializr: http://www.initializr.com/

Answer 2

Each browser uses different rendering engines. This means that certain HTML elements, CSS styles, etc. will be interpreted differently or not at all by browsers that do not share the same rendering engine.

To understand more, I would refer to this link: http://taligarsiel.com/Projects/howbrowserswork1.htm

As far as developing for multiple browsers, I would look into the modernizr javascript library, http://modernizr.com/, and for quick reference, caniuse.com.

Hope this is helpful.