As you may be aware the CSS property min-height unfortunately doesn’t work in IE6, however if you add the following hack after the attribute:

height:auto !important;
height: (the min height value);

You’ll be able to get it to work, an example would be:

.classname {
min-height:200px;
height:auto !important;
height:200px;
}

I’ve read a lot of blog posts lately from developers commenting on the messy way Adobe Dreamweaver inserts code into a build, stating its unformatted (nested elements aren’t indented) and not as clean as it would be if the page was hand coded. A quick tip to clean up a page built in Dreamweaver is to go to Commands > Apply Source Formatting, this will automatically format the code for you.

All web developers have to take into consideration Internet Explorer 6 at some point during a build, catering for the browser requires extra development and will therefore increase the time and money spent on a project, which can deter some. However as most clients will want their site to provide the same experience to as many users as possible, you can’t afford to ignore it. In this post I’m going to detail some of the methods I use to deal with one of the most troublesome browsers out there.

IE Tester

http://my-debugbar.com/wiki/IETester/HomePage

This is a test browser that emulates the following IE browsers: IE 5.5, 6, 7 and 8, which I use for testing builds. Unfortunately this testing browser is only available on Windows based machines, however it does run on the three major operating systems; XP, Vista and 7. Their is an alternative option called multiple Internet Explorers which found here http://tredosoft.com/Multiple_IE this allows you to install multiple versions of the IE browser on your PC however unlike IE tester it only works on Windows XP.

Due to the tabbed layout of IE tester, allowing you to render the different browser versions in the same window on different tabs I prefer this option. IE Tester isn’t fool proof, and I would always recommend finding a PC running a version IE 6 as it’s default browser over it, however it gives you a good indication of general IE6 errors such as the double margin bug.

CSS browser selector

http://rafael.adm.br/css_browser_selector/

This is a piece of javascript which gives you the ability to write specific CSS code for each operating system and each browser. Allowing you to specify IE6 specific styles without the use of conditional comments, this is how I deal with those tricky bugs which cannot be solved with additional lines of css such as display: inline.

It is also worth noting that it may be possible to ignore the browser completely, I recommend looking at a site’s analytics before starting a new design/build. For example my website only got 60 visits from users using IE6 last month whereas I had 3,501 visitors using Firefox, this had led me to drop support for IE6 on my site.

Firstly what are ems?

Ems are a unit of measurement in the field of typography, equal to the point size of the current font. This unit is not defined in terms of any specific typeface, and therefore is the same for all fonts at the given point size.

What are the benefits of ems?

The main benefit of ems is keeping the text consistent across all the major browsers when the user increases/decreases the size of the text on a web page.

How I use ems

Now before you start to use ems in your builds its important to note that my default 1 em = 16 pixels.

I have noticed that various programmers have there own methods to make their CSS ready for ems, personally I do the following:

Create a “html” tag make the font size 100%, I then create a “body” tag with the font size as 1 em this solves the notorious font re-sizing issues that IE6 users experience. Now my body tag has a value of 1 em, and remember 1 em = 16 pixels. From this I can now work out the em values that the rest of my text should have.

As I’ve never been one for maths, I tend to use a em calculator, one can be found here, others are out there, this saves you having to work out the value through using the em formula, alternatively you can look at a em conversion table such as the one found here. When using a em calculator you have to start by specifying the body value, which as stated above I’m going to have as 16 pixels (1 em). Once this value is specified we can then branch off it by creating a new nodes, in which we can enter a new value such as 14 pixels. When entering a new pixel value into a node you will be given in return the relevant em value, which in the case of 14 pixels will be 0.88 em.