dslreports logo

It stinks. There are still a lot of people out there using Version 4 browsers. Mostly Netscape Navigator version 4 (NN4), on creaky old Windows and Macintosh systems. As web designers, we wish they would just go away. It's tough to make things work in the version 4 browsers and still build a "web standards" site with Cascading Style Sheets (CSS).

If you think cross-browser support means the maintenance headaches of multiple CSS files, you may have another option. This article shows you techniques you can use to make your site adjust to the browser bugs, all within one CSS stylesheet, all without Javascript or server side browser detection.

If you are commited to version 4, then you can use some styles, but you can't use others. You had better stick to the HTML 4.01 Transitional standard, and use Tables for the major pieces of your layout. NN4 can also use div and span to apply styles and uncomplicated layout. That's about it.

IE 6.0 and Gecko

Most of your audience is going to be using IE, and most of them will use 6.0. So the first step is getting things to look right in IE 6.0. Because the Gecko based browsers (Firefox, Firebird, Mozilla, Netscape 7) are very close to standards compliant, they should be next on your list of supported browsers.

Make it Pixel Perfect, just like you want it. Look at every page with IE 6 and Firefox, and you are covered. Make sure your HTML validates.

Most people can stop right there. But there are a lot of IE 5.5 people out there still. You should support them, and they will probably be your #2 browser (right after IE 6.0).

IE 5.5

IE 5.5 has the horrible box model problem. In most layouts you really care about the width, and the height is dictated by the content. With 5.5 the margin and padding is taken from the inside of the box dimensions. With ever other browser in the universe (including IE 6) the padding and margin are taken on the outside of the box dimensions.

This means that with 5.5, you have to adjust the width of ANYTHING with padding or margin, and the current way to do this is the "voice-family" hack. The voice-family hack uglys up the CSS, but it's operation is beautiful.
.box {
  padding: 5px;
  margin: 0;
  width: 100px;                /* for ie5 */
  voice-family: "\"}\"";
  voice-family: inherit;
  width: 90px;                /* for compliant browsers */
  }
  html>body .box { width: 90px }  /* for opera */
 

]]>We want a box that is 90px wide, with 5 px padding on each side.  First we set the width wider for 5.5, to include the 5px padding. The first voice-family confuses the IE 5.5 parser, rendering trash which it ignores until it sees the next } which resets his parser. For all other browsers, the voice family is reset back to its inheritied value, then the correct 90px width is set. The last line is called the "be nice to Opera" rule. It resets the width back to 90px for Opera 5 which is confused by the voice-family hack (like IE 5.5) but "gets" the box model (like all the other browsers do). Newer browsers (and hopefully all future browsers) will support the html> selector and they will also use the correct (90px) width.

IE 5.5 also has its own idea of what the font-size keywords scale your font to. What in IE 5.5 is "small" is the size of "medium" everywhere else. So, if you use font sizes by keywords (as many people do), you will also find yourself using the voice-family hack to set the font size for 5.5. This page has an excellent explanation: »diveintoaccessibility.or ··· zes.html

What a mess. But from here on it gets easier.

Safari and Konqueror

With the Mac, Safari usually takes a small bit of stylesheet changes, mostly having to do with Safari (and Konqueror) collapsing blocks when they shouldn't. Addition of a few display: blocks and setting widths on blocks floated next to each other seems to help.

IE 5.2

IE 5.2/Mac is the last release for the Mac of IE, and it's idea of the box model is somewhere between 5.5 (wrong) and 6.0 (mostly right). It just blows the width of certain text lines, and has other bugs which can cause other rendering issues for 5.2. 

Fortunately we have a CSS hack for that, which makes the style a bit uglier (avert your eyes for the voice-family plus 5.2 hack)
.box {
  padding: 5px;
  margin: 0;
  width: 110px;                / * for ie5.2 Mac */
  /* \*/
  overflow: hidden;
  width: 100px; 
  voice-family: "\"}\"";
  voice-family: inherit;
  width: 90px ;  
  /* */
  }
  html>body .box { width: 90px }  /* 5.2 mac doesn't see  */
 

]]>First we set the width to a value that makes things look right under IE 5.2. The odd looking comment screws up 5.2: because it doesn't end the comment on that line 5.2 ignores all the rules until it sees the next */. All other browsers end the comment on that same line (comment ending characters are never quoted with backslash). Between the comments, you can set things that will not apply to 5.2, like overflow: hidden (which causes entire links to disappear in 5.2).

NN4

So the last thing you want to try to get going is NN4. They are lucky to see anything other than unstyled text. You can give them colors, but some rudiumentry elements like background images are beyond NN4's capability. 

So let's say you used tables for layout, but your page looks odd because the page has margins on NN4. There's another flavor of the comment hack just for NN4. 

To make a borderless page on anything but NN4 you just set margin: 0; this doesn't work in NN4. What does work is setting the margins to exactly -10 pixels. To make this come out the easy way just use the "NN4 comment confusion hack", which looks like this.
body
{
  margin: -10px 0px 0px -10px;
/*/*/
  margin: 0;
/* */
}
 

]]>
How it works is that that NN4 gets confused by the first comment line. It doesn't think the first comment line ends. NN4 treats everything from the first comment until the next */ as a comment. All other browsers see this as code between two comments. So the margin is set up for NN4, then reset to 0 for all other browsers.

If you don't want to mess around trying to get NN4 to work, just enclose most of your styles between the goofy-looking NN4 comments. If your markup is clean, NN4 users will get a site that still works, but looks unstyled. Don't worry, in most cases they will never notice. After all, they are probably using an antique computer.


Feedback received on this FAQ entry:
  • I tried the hacks and they work beautifully. Thank you. Nora Reed nora@fighterpigeon.com

    2008-11-18 00:53:30



Expand got feedback?

by big greg See Profile
last modified: 2005-06-10 07:20:48