why do websites look different in different browsers


I have a website and when I build it it looks normal. I am very tight with my spacing very precise with everything. Several hours later when I come back to look at the website in the builder or the regular website there is either a lot of spacing between items on my page or the text is all smashed together on top of one another (paragraphs). I look on one computer, it\’s a spacing problem and I look on another computer and things are smashed together. Nothing is consistent. I fix it, it all looks fine, then 8-12 hours later it\’s all broken again. I have cleared caches and done that but it doesn\’t help. The support techs looking at the problem report that everything looks ok. I build websites for a living and have never seen this problem. Any ideas what is going on? This is through the Go Daddy website builder.
I\’d attempt to enlist the basic clues over browsers which provide the visual differences, based on my own experience (and efforts) in that direction: The fonts. css property) to display text on the page. Most of these fonts are coming from the operating system, so here is a short list of what can go wrong with that: The different operating systems have different font families pre-installed, and when a certain font is missing, it is silently substituted with another.


Moreover, the font that is used for substitution may be a native to the OS and specific to that particular OS only. A particular font with size for instance, can look larger or smaller as the same -sized font on another operating system. The font appearance is determined also by the clear type effect, which is supported in different manner under the different operating systems. This feature may be disabled by default or not available at all on some OS-es. For example, Windows XP has it disabled, and below Windows versions do not support it at all, as far as I know. Under XP, you can also enable the clear-type only for the browser, not the entire OS, if you use IE7 or above. The lack of clear type will make a font look pixelated, and thus quite different from their clear-type-enabled version.


Furthermore, the clear-type itself can be fine-tunned for best appearance, so one\’s personal settings may also cause slight difference in the look-and-feel of the text. The rendering engine. The browsers use engines of their own to display the website and execute scripts, called rendering engines. The most popular browsers today come with rendering engines each of their own Trident is used by IE Gecko is used by Firefox WebKit is used by Safari and Chrome and yet they render pages differently. Presto is the engine that Opera used to ship with, now it has switched to WebKit. Each rendering engine may behave differently under different devices/operating systems. Chrome for instance, being a cross-platform browser, may show slightly observable differences under different OS-es, like Windows and Linux, even if both OS-es use the same browser version (also true terms of script behavior). The browser version. The browser version is another important thing to look at. Why, you may ask. Here it is: As browsers evolve, they are independently introducing new versions with individual patches for their rendering engine.

Therefore, the latest patch for Safari\’s WebKit will likely be different than Chrome\’s most-current WebKit version. One particular browser could come up changes that affect page display between its former and its current version. For instance Microsoft are deprecating many features from its Trident engine, so some IE7 display tricks and scripts will no longer work on the new IE11. It is possible for an update to introduce a change that replaces the entire rendering engine, like is the case with Opera. The client operating system. Besides the fonts and clear type effects, the basic styles of some HTML elements are provided by the appearance and the theme of the operating system – as pointed in the. Usually, this will affect the appearance of: buttons, combo boxes, scroll-bars, radio buttons and check-boxes, if not overridden by the page\’s styles. Older browsers, like IE6, may not support re-styling of these UI components, and they will appear as whatever the OS theme looks like.

Browser-specific code, hacks or spoofing. Last, but not least are the browser-specific hacks, which are practices that can be seen in css, javascript and html. These are done by web developers and designers to overcome some browser-specific issues and may cause display differences either accidentally, or on purpose. As mentioned by the under the question, a developer or user might deliberately cause his browser to identify itself as another browser. Usually, it is a practice for developers to test how a website would look if viewed by a mobile browser while still working on a desktop PC, and some browsers have plug-ins that allow them to re-identify themselves as other known browsers. Combine all the above and you will get a very comprehensive and wide range of factors that may cause a page to look ( and even behave! ) differently depending on the device, OS, browser, browser version and the page\’s own source code. And, I do not pretend to be exhausting all the possibilities.

Show More

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button