Design Bugs

One of the major problems with designing a website is cross platform and cross browser support. I have been designing my website to meet W3C standards by using a mixture of HTML, XHTML, and CSS. Most modern browsers created within the last 2 years (e.g. Firefox, Opera, and Safari) support most of the standards set by the W3C.

I have aimed my website for use on browsers made within the last 3 years (for example Microsoft Internet Explorer 6/7, Mozilla Firefox 1/2, Opera 8/9 and Safari 1) and all current mobile phones/portable PDAs created within the last 2/3 years using XHTML and WAP (for mobile devices). Some browsers, however fail to render certain parts of the website correctly. Currently there is a issue with IE6 rendering an extra bottom border for image/Podcast module boxes.

These issues are usually fixed by using browser hacks, this works by using newer CSS standards that are not supported in older browsers. For example in CSS this is a perfectly legitimate CSS statement:

CSS:
  1. html>body #rss-container {margin-bottom: 1em;}

This is understood in pretty much every modern browser except IE6, which doesn't understand the element>child selection (e.g. html>body), so IE6 will ignore this CSS setting and default to whatever was set previously (e.g. just the #rss-container setting). Most of these problems are corrected by trial and error and extensive testing in different browser versions (by using Parallels Desktop, which allows virtual machines to be setup and used at the same time on my Mac Mini).

Leave a Reply

You must be logged in to post a comment.