Why Do Web Pages Appear Different in Different Browsers?
Creating Web pages seems to be much easier now than it was just a few years ago. There are many website editors advertising that you can make a website without knowing any code. Different browsers and operating systems parse HTML code differently, and the appearance of your site may change depending upon the browser a visitor to your site is using. You cannot control what software a visitor will use to see your Web page, but if you learn HTML, you can fix code to make all browsers treat your Web page the same.
Other People Are Reading
-
Operating System
-
Different operating systems, such as Windows and Mac OS X, display control elements differently. Form elements and form submit buttons will change color and style depending on which operating system you are using. You can create your own form buttons so they display the same no matter which operation systems your website's visitor may use. Using Cascading Style Sheets (CSS), you can also format other form elements such as text boxes to look the same regardless of the operating system.
Screen Resolution
-
Screen resolution varies depending on the size of the monitor, the type of video card in the computer and the preferences of the user. You cannot control what resolution people use when they view your Web page. A smaller resolution will make the icons look bigger on the screen and have less space on the desktop. A larger resolution will make the icons look smaller and give you more screen space. You can either create a flexible Web page that changes size depending on the resolution of the screen, or you can create a fixed-width site that stays the same size no matter what the resolution. If you use a fixed-width website, you must make it narrow enough so it does not create a horizontal scroll bar at lower resolutions. The lowest resolutions have changed over the years. It is common now to design Web pages at 800 or 1,000 pixels wide, so the majority of computer users can view the website.
-
Browser
-
Different browsers treat Web pages differently. Not all browsers use Web design standards, so a website may look broken if it does not understand the code. If your code is not standardized, then browsers that use standards may break the page. Hacks and extra style sheets are used so that more browsers can view the page the same. Check your website in multiple browsers as you create it to make sure it looks the same in all of them.
DOCTYPE
-
A DOCTYPE is a bit of HTML put at the top of a page so the browser knows what code it is seeing. If you use the wrong DOCTYPE with your code, then some browsers may interpret the look of the page correctly, while others may break the page. If you don't use a DOCTYPE at all, the browser will try to guess, but there is no guarantee it will guess correctly.
Hacks
-
Older browsers required hacks to see the standard HTML and CSS code of Web pages because the browser did not adhere to Web standards. Hacks are special characters or codes used in conjunction with the CSS or HTML to force an older browser to recognize the correct code. The hacks are browser specific so only the browser they are aimed at can see them. Some people will use these hacks in a conditional comment so only the old browser can see it and newer browsers cannot. This allows the page to render in a similar way in different browsers.
-
