Why does my website look different on different browsers?

Having a website look the same on different browsers has been an ongoing issue for the web designers all over the world. The reason is simple - the visualization of a website depends on many different variables such as:

  • The visitor's OS (operating system)
  • The visitor's display resolution
  • How the browser interprets the page

1. The visitor's OS

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. 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:

You can replace it with the following code in order to specify the submit button image:

Similar changes can be made for the other parts of your website's interface. Consulting a professional web designer or searching the Internet will be necessary to solve all of the possible issues.

2. 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 1024x768 they will not fit into the screen of a visitor that has set his/her resolution to 800x600.

In order 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.

3. How the browser interprets the page or website's cross-browser compatibility

Web browsers do not render pages pixel by pixel. They read the entire code and produce an output depending on your code. There are, however, differences in the code interpretation. Therefore you should check the way your website looks on different browsers and operating systems. You can use the following online tool in order see how your pages look on different browsers:


A good website should look the same and all its features should work in any browser.

Unfortunately, there is no easy solution for that. You should check the specificities of each browser that fails to display your website correctly and make the necessary adjustments to your code. A skilled website developer should be familiar with most common browser compatibility issues and should be able to assist you. Such compatibility issues may occur not only in different browsers but because of an old browser version which does not support completely the latest standards.

In conclusion, you should test your websites on as many different browsers and operating systems as possible. If you spot any errors, you should try searching on the Internet for a specific solution for the issue or contact a skilled developer who may assist you in resolving it.


  1. Reply March 1, 2017 / 16:01 KaelaSiteGround Team

    We are using illdy theme and In the customise section it shows our smartphone/tablet layout however when we check our sites layout on our phones it looks totally different and our feature picture in the jumbton section is blown out and zoomed so far into the picture you can't tell what the picture is.
    How can we fix that, so our feature picture adjusts to fit any screen

    • Reply March 1, 2017 / 18:12 Ivan AtanasovSiteGround Team

      The illdy theme should be mobile friendly. I would recommend testing this using different hand-held devices and browsers so that you can confirm if the problem is indeed related to the theme.

      If so, it is best to contact the theme developers so that they can take a look.

* (Required)