How to design a Web page that will display properly across browsers

Every browser has its own way of rendering different elements. For example, let's look at the <input type =”button”> HTML tag.  IE and Firefox both render it as a grey background button with the text showing whatever we specify in the value attribute in black. What if tomorrow there's a new browser that renders the buttons as having blue background and white text instead of the traditional grey and black combination? How can you maintain consistency in look and feel?

CSS reset

The solution is that if we set a baseline value of <input type=”button”> in my CSS, all the browsers would render the buttons in the same way as you would prefer them to render and not as their own set defaults.

Resetting CSS helps avoid browser inconsistencies. Let’s say you want to get rid of the leading space around the edges of your website in all the browsers. I would include the following in my CSS file:
 

body{

margin: 0;

padding:0;

}
 

Hence, a reset CSS removes the default styling of HTML elements - which is different across different browsers - and provides a foundation upon which you can implement the rendering behavior of your own choice universally across all the browsers.

Font selection

The main criteria of selecting a font type should be the availability of that font on a viewer’s computer. Let’s say you choose your Web pages to be displayed in “Lucida calligraphy” and the viewer does not have this font on his machine. In this case, the whole page will be rendered in a browser’s default font, which will distort the overall design of the Web page. Hence, it is always advisable to prefer commonly used font.

Sans-serif fonts such as Verdana, Helvetica or commonly used fonts such as Arial are good choices. Double-check font rendering in every browser during testing. Many developers specify something like “Verdana, sans-serif;” just to be safe. This notation means that if Verdana is not available then whatever sans-serif font is available will be used for display.

Size specification

Another suggestion is to always size the text of your website as either % in the body, or as em’s throughout, instead of as pixels. Percentages and em’s behave exactly the same way when it comes to specifying font sizes. Every browser has a default text size, which users can specify according to their personal choice - usually amongst small, medium and large sizes. We can use em’s or % to base our font sizes on top of user’s default font sizes. This can save the developers from worrying about how the font will look on every monitor.

1em or 100% is equal to the font size user has selected, so using this you can safely ensure that your text is readable for every visitor to your website. Also, as a personal recommendation, font-size should always be inherited from the root element. Prefer not to have it inline as this will make the code cluttered and will not be universally applied.

Specifying element widths in % instead of pixel sizes also helps in dynamic resizing of elements across different browsers. For example, let's say you want to create an HTML table with three columns. If we specify the table width and its column widths in pixels, it would render differently in terms of sizes and positioning on different browsers. If you want the table width and positioning to change automatically for different browser screens and for the three columns to be equal in terms of size and spacing, you could very easily specify a table width of 100% and then column widths of 33% each.

Absolute positioning

You should avoid using absolute positioning of elements because not every browser can read it. Content on Web pages with absolute positioning can sometimes become jumbled - or even overlap - in browsers that don't support it. Prefer using fixed positioning or relative positioning depending upon your personal choice.

Relative positioning reflows the content automatically when the browser is resized. Fixed positioning also reflows the content when window is resized because it has a direct relation with the browser window. Absolute positioning precisely places images and text irrespective of the window being resized or not. As a result, relative or fixed positioning can give a more elegant appearance for some applications, even in browsers that do support absolute positioning.