Why does my website look different on different browsers?

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

<input type = "submit"> You can replace it with the following code in order to specify the submit button image:

<button type="submit" name="submit" value="Submit"><img src="submitimg.gif"/>Submit</button>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

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:

http://browsershots.org

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.

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 the Internet for a specific solution for the issue.

Was this article helpful? yes / no

Article details

Article ID:	17
Category:	Knowledgebase
Date added:	2009-02-07 12:19:50
Views:	654
Rating (Votes):	(47)

<< Go back

Why does my website look different on different browsers?

Small Business Web Host