Why Is My Webpage Displaying Differently Across Browsers?

[Dave Ritche]

I have designed a webpage and i opened it in chrome.It worked quite fine and all the layouts were at their position but when the same page i opened in internet Explorer messed up and the layouts weren't at their position.In firefox,only the header section showed up.What is the problem?Howcaan it be solved?

 

[Borg]

I have designed a webpage and i opened it in chrome.It worked quite fine and all the layouts were at their position but when the same page i opened in internet Explorer messed up and the layouts weren't at their position.In firefox,only the header section showed up.What is the problem?Howcaan it be solved?

This is why I suggested learning bootstrap in one of your previous posts.

 

[DaveC426913]

Point me at the page.

 

[Borg]

https://www.physicsforums.com/threads/html-form-fields-question.855807/#post-5368377

 

[QuantumQuest]

It is the usual problem of incompatibility among browsers and especially of IE. These days, are far less in many regards, if I remember what was the case back in 2005, where we were developing webpages manually and it could take a substantial time to test them, in a cross browser fashion. But unfortunately there are still differences in the render model regarding html 5, css and Ecmascript - the latter have been substantially been limited. You can use frameworks like jQuery and many other and there are cross - tools and libraries for css too, for cross - browser compatibility and even for compatibility between mobile and web pages. As, web development has got a lot more complicated and demanding, I think it is not a good recommendation to try developing things manually any more. Use ready - to - go tools, to be on the safe side - of course a good working knowledge of the programming / scripting / mark-up languages and technologies is still a must, for any serious developer.

 

[Samy_A]

I have designed a webpage and i opened it in chrome.It worked quite fine and all the layouts were at their position but when the same page i opened in internet Explorer messed up and the layouts weren't at their position.In firefox,only the header section showed up.What is the problem?Howcaan it be solved?

And this is on a laptop or desktop probably.
Now imagine what will happen on a tablet or a phone (with the various OS and screen sizes to account for).
That's why we suggested Bootstrap in the thread about form layout.

I was reluctant to use it, but constantly adapting and testing HTML/CSS in various desktop and mobile browsers was a losing battle.
I don't "like" Bootstrap. You basically set your intelligence to 0, apply the clear rules about how to build the grid, and use boilerplate classes in your HTML elements. It is boring, like mindless copy-paste. But it works, that's the bottom line.

 

[pbuk]

I don't "like" Bootstrap.

Try something else like html5boilerplate or just plain normalize.css

 

[harborsparrow]

Using standards is IMO a far better way to get your page looking well in various browsers than just by constantly testing any kind of code you've managed to put together before thinking about the standards. This is why standards exist. If you use only HTML 5 standard and CSS 3 stylesheets, your page (in theory) should look okay in any of the recent browsers, and you'll be able to have very nice pages.

These small books (not on Amazon, unfortunately) are the easiest way I found to learn the standards: https://abookapart.com/products/html5-for-web-designers but there are many online resources (not quite as clear and easy as those unique SMALL books). The one by the same publisher on CSS is just as succinct and clear. Highly recommended. They are small enough to carry in a large pocket.

You can test which parts of HTML5 are supported by which browsers here: http://html5test.com/

You can test your page for compliance with HTML standards here: https://validator.w3.org/

(and there is a similar validator for CSS style sheets, google for it)

You can learn which parts of Javascript are safe to use in web pages by reading this (also small) book: https://www.amazon.com/dp/0596517742/?tag=pfamazon01-20