Why does my website look different on different browsers?
Table of Contents
Having a website look the same on different browsers has been an ongoing issue for web designers all over the world. The reason is simple – the visualization of a website depends on many different variables such as:
- How the browser interprets the page
- The visitor’s OS (Operating System)
- The visitor’s display resolution
How the browser interprets the page
A website is just a set of instructions describing how a site should look. It’s up to the browser to render it by reading the entire code of your website and producing a certain output. There are, however, differences in the code interpretation and different browsers will render the same page slightly differently. That’s why you should check the way your website looks on different operating systems and browsers during the development of your website.
Unfortunately, there is no easy solution to that. You should check the specificities of each browser that fails to display your website correctly and make the necessary adjustments to your code. Such compatibility issues may occur not only in different browsers but because of an old browser version that does not support completely the latest standards.
The visitor’s OS (Operating System)
If your website uses submit buttons, radio buttons, check boxes, and edit fields, all of them will be visualized depending on the visitor’s OS and its style. Browser fonts also have a tendency to look slightly different when rendered on a PC, Mac, or Linux computer.
One area where sites almost always look different is on pages with forms. Different operating systems and browsers render the buttons on forms and text boxes completely differently. On a PC, default submit buttons are square and pretty flat looking, on a Mac the default submit buttons are nicely shaded ovals with a gradient. For example, a submit button can look like a gray rectangle on your Windows Classic theme, and like an oval if you use the XP style. As a workaround, you can create custom buttons for your website.
The code of an ordinary submit button looks like this:
<input type="submit" />You can replace it with the following code to specify the submit button image:
<button name="submit" type="submit" value="Submit"><img alt="" src="submitimg.gif" />Submit</button>The visitor’s display resolution
Display resolution is affecting quite a lot the way a website is displayed. For example, if you create your pages at 1024×768 they will not fit into the screen of a visitor with a screen resolution set to 800×600.
To fix this, you should not use static dimensions for your website, i.e. instead of setting width = 1024px you can use width = 100%. This will not fix all issues but at least will make the page fit into the screen.