800×600 has been the standard browser screen size for years; however, only 8% of the population still use this resolution. 1024×768 and larger now represent over 90% of the Internet. With this in mind, it’s time to start developing websites with 1024×768 in mind. However, that doesn’t mean that a person actually has this much room to view their pages, and many people with better resolutions don’t have their browser maximized.

With a couple of standard browser plugins installed, here is what I found for the two current browsers, IE7 & FF2.

1024×768
Internet Explorer Version 7 - 1003×517 usable space.
Firefox Version 2.0.0.6 - 999×546 usable space.

1280×1024
Internet Explorer 7 - 1259×773
Firefox 2.0.0.6 - 1263×810

Therefore, above the fold browser space for the majority of today’s browsers is 999×517.

When I have my headphones on and am listening to music, it’s really annoying to hear that little clicking sound everytime I click on something in Internet Explorer.

If this is annoying to you too, here is how to turn it off:

Go to Start > Settings > Control Panel > Sounds and Audio devices

Click the ’sounds’ tab. In the window, scroll down to ‘Windows Explorer’ and in the sub menu, highlight ‘Start navigation’

Click on the drop down box below where it says ‘Start’, ‘Windows Start’, or ‘Windows XP start’ (or something similar depending on your operating system) and choose ‘(none)’ instead. Click ‘Apply’, then click OK, and close the Control Panel.

That annoying clicking sound is now a thing of the past.

I recently redesigned my photography website, The Lens Flare. I had Internet Explorer 7 and Firefox 2 installed, and thus wrote the site to make it work with those browsers. Once I had it working on those 2 browsers, I tried it on IE6 and the template was horribly screwed up. Here, I’ll explain what I had to change to make it look good in the 2 current browsers and IE6.

Apparently, IE6 has a bug people have dubbed the double padding bug or double margin bug. The problem can usually be fixed by using the CSS option: “display:inline” on your DIVs that have the double spacing problem. This fixed most of the spacing issues, but it didn’t fix them all.

To fix the last spacing problem, I had to resort to an Internet Explorer Kludge called conditional comments to include a separate CSS file when IE6 is loaded.

To do this, you put the following code after your other CSS files in your HEAD tag:

<!--[if IE 6]><link rel=”style sheet” href=”ie6.css” type=”text/css” media=”all” /><![endif]-->

This loads the ie6.css file when somebody is using IE6.

The main CSS file has the following directions for the col2 div:

.col2 {
width:338px;
position:relative; float:left;
margin:0px 0px 0px 5px; padding:0px;
display:inline;
}

The ie6.css file overrides col2 with the following directives:

.col2 {
width:338px;
margin:0px; padding:0px;
display:inline;
}

In IE6, floating the div to the left and adding a margin on the left side messed things up. From what I can tell, it started the location of the div in a slightly different place than IE7 and Firefox does and therefore has to be positioned differently to appear in the same place on the screen.

Also, another trick I learned while dealing with IE6’s limitations was a handly CSS tidbit called: “overflow:hidden”.

There are several places in my layout where I have a 2 pixel tall div with a background color to act as a horizontal rule. For example, this gray line:

.gray-line {
position:relative;
width:99%;
height:2px;
background-color:#ddd;
margin:0px; padding:0px;
overflow:hidden;
}

However, without the overflow:hidden aspect, IE6 renders a line about 5-8 pixels tall.

Lastly, “background-repeat: no-repeat” solved one last IE6 problem. Since it seems to use different heights for things, in places where I’m using a background image, the image would start to repeat itself again for about 2-3 pixels. Setting this directive on those areas solved that problem. Combine that with overflow:hidden and we’re good to go.