Mads Kristensen

My personal blog about everything tech

In the world of web developing there are many uncertain elements, but one thing you can always count on is the different rendering of HTML and CSS in the various browsers. A serious web craftsman tests for inconsistencies in Firefox, IE, Safari and Opera and makes the appropriate adjustments. That’s just something you have to do, even if your mark-up is W3C standards compliant.

Today, I came across an article describing the Gecko’s “Almost Standards” mode, which in essence says that the Gecko engine (the rendering engine used in Firefox, Mozilla and Netscape) has a mode somewhere between the Quirks and Standards mode. This “Almost standards” mode is triggered when the DOCTYPE isn’t strict. That means it is triggered by the default DOCTYPE in ASP.NET 2.0 which is XHTML transitional.

I had to try it out to believe it, and sure enough, there is a difference. This newfound knowledge will make it a little easier to make a website look good in all major browsers when the DOCTYPE is strict, because the rendering will be in Standards mode in all the browsers. It doesn’t matter if you do HTML or XHTML as long as the DOCTYPE is strict.

Here are the HTML and XHTML strict DOCTYPE definitions.

HTML 4.01
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

XHTML 1.0
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Strict //EN" "http://www.w3.org/TR/html4/strict.dtd">


Update April 20th: Opara 8.5 has something similar to "Almost Standards" mode. I haven't been able to find any documentation, but I did some tests.

If you design or tests websites, then you have to make sure they work in different screen resolutions. You have to change the size of the browser window or maybe even change the screen resolution. There are tools that let you resize the window to different predefined sizes, like the Internet Explorer Developer Toolbar or the Web Accessibility Toolbar.

If you don’t want to install a toolbar or some other program to resize your screen, you can do something very simple but really useful and customizable. Add any page to your favourites (bookmarks in Firefox) and place it in the Links folder in IE or the Bookmark Toolbar in Firefox. Then right-click the new favourite and change the location to javascript:window.resizeTo(1024,768); and rename it to 1024x768.

The link toolbar with resize buttons

The link toolbar with resize buttons in their own folder

You can then add another favourite and call it 800x600 or whatever screen size you want. It’s quick, simple and easy to customize.