Welcome Safari Users

In a welcome surprise, my referrer stats recently revealed that Master Designers John Oxton and Jon Hicks have generously decided to link to my latest Installment: Stagecraft.

Unfortunately, my Installments system has been suffering from a Safari bug for a while. Now, with the sudden surge of new traffic, I figured it was time to take action, and things should be fixed. Safari users will get the whole essential experience…

The bug, which was discussed in the comments of another post a while back, means that deep links to named Flash anchors such as


would infinitely refresh the page if seen using Safari. On the other hand, a plain link such as


would work just fine. I’ve encountered no other browsers with this behaviour.

Named Flash Anchors

When I initially built the installments system, I had 2 simple goals:

  1. Ability to link directly to each image in an installment of 5
  2. Allow music to play uninterrupted while looking at the 5 pictures
  3. As the sharp reader will notice, this is a pickle. On one hand, it’s easy to let music play uninterrupted if the music is being played in a permanent frame. On the other hand, this pretty much kills the ability to have different URLs for main content.
  4. The solution, which I remember being very proud of, was to use the new Flash 6 feature called named anchors. It worked wonderfully, and I described the process in a detailed tutorial.
  5. A good month later, that very tutorial would reveal the first reports of the problem. Since then, I’ve tried to ignore the problem due to other things of higher importance. That is, until today.

The Problem with Anchors

While Safari users will no longer experience infinite loops, they won’t get the whole experience either. In order to “fix” the problem, I’ve quite simply disabled the JavaScript that updates the URL with anchors, on the entire Mac platform. Unfortunately I’m unable to specifically target Safari when in Flash, so Firefox and other browsers will also get the axed usability.

In the end, URLs such as /installments/2005/05/#5 will still work for Mac users, but the anchors will no longer update to represent the active page, when the page is navigated.

Whether the problem is with Safari, or Safari’s handling of the JavaScript involved remains to be seen. I hope to be able to fix it in the future. For now: Welcome Safari users!

(This link would prevoiusly refresh infinitely for Safari users)

Showing CSS to IE only (The Underscore Hack) [Update]

This page details an inline CSS hack for Internet Explorer 6 on Windows. You can also find an extended version of this hack that works for Internet Explorer 6, 7 and 8.

The best idea, however, would be to serve a separate stylesheet for each browser you’re hacking to.

Recently, I stumbled upon (via Mr. van Kesteren) the best CSS “hack” you’ll ever use in CSS sites.

It allows you to show CSS to Internet Explorer only, omitting Mozilla, Safari and Opera.

This is different from conditional comments in the following way:

  • It allows you to write conditional CSS directly in your stylesheet file, and doesn’t require inline styles
  • It works for IE 5.0, 5.5 and 6.0
  • It’s a hack
  • It’s very simple to work with.

The hack is called the “Underscore Hack”, and apparently it’s been around for a while. For the benefit of those of us who didn’t know about it, I’m posting it here:

body {
    background: green; /* show to Mozilla/Safari/Opera */
    _background: red; /* show to IE */


Sample Page

View sample page, including CSS

More Information on CSS filtering

John Serris has done an indepth write-up on various other methods of filtering CSS. It is definitely worth a visit:

Managing CSS Hacks

Making IE Specific CSS or Code (Conditional Comments)

This page details the generally most accepted solution to serving up custom stylesheets for versions of Internet Explorer. As such, using conditional comments is arguably the most recommended way to “hack”.

You can also find inline CSS hacks for Internet Explorer 6, 7 and 8.

While it is a pain to develop for archaic browsers, Internet Explorer on Windows platforms support a fairly straight-forward and simple method, that’s not even a hack.

As a webdesigner, it is quite a challenge to design and build a site that is supposed to attract many viewers on many platforms. I can’t just choose to design for the latest and greatest. Decisions on what one wants support, must be made, and the design should ideally “degrade gracefully” on unsupported browsers.

Please note, these tricks are for Windows Internet Explorer only.

Showing CSS For Newer Than Internet Explorer 7

This is probably the most common use case. You want to show a specific stylesheet for Internet Explorer 7 and newer. See also how to handle IE8.

<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="ie7plus.css" />

Showing CSS For Older Than Internet Explorer 6

In case you need a stylesheet specifically for IEs older than Internet Explorer 6.

<!--[if lt IE 6]>
<link rel="stylesheet" type="text/css" media="screen" href="ie5.css" />

Showing CSS For All Versions Of Internet Explorer (Only)

If you just want to attach a stylesheet, or display a chunk of code to all versions of Internet Explorer, you can use this code:

<!--[if IE]><!-->
<link rel="stylesheet" type="text/css" media="screen" href="ie.css" />

Hiding CSS From Internet Explorer

This is useful, for instance, if you want to serve a stylesheet free version of your site to IE6 users.

<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" media="screen" href="notie.css" />

There are many more of these “out-commenting” tricks for you to refine your stylesheets. For a complete list, I have to redirect you to this document on conditional comments.

IE Invisible Text/Text Dropout bug, a.k.a. “Peek-a-boo Bug”

Internet Explorer 5.5 and 6 has a problem with rendering text in DIVs with ‘float’ applied.

The text seemingly appears at random. Upon first load it may very well be visible, only to disappear the next second. A click on a link, or minimizing the window may make the text become invisible, or even visible again. There is no system in what triggers the bug.

I have investigated, and found the cause and solution…

The cause

The bug is related to IE handling of nested DIVs. Other, web-standards compliant browsers such as Mozilla Firefox or Safari, have no trouble.


IE With The Bug


The text is invisible seemingly at random.

Firefox has no trouble rendering the text


Note, the rounded corners is a Firefox only feature, and has nothing to do with the bug.

IE with the bug fixed


The text is visible at all times, as it should be. Additionally, a bottom-margin bug has been fixed.

The Solution

Seemingly, specifying a height for the DIV fixes the problem completely!

Let’s assume the problematic text resides inside the following DIV:

Problematic text and content here

Add the following code to your “post” class in your stylesheet:

.post {
	height: 1%;

The result is a page that renders exactly as it’s supposed to.

The fix may cause problems elsewhere on your website, so you may have to make a new unique class for the problematic content only.

There are several solutions to the problem. I have chosen to post here, the solution that works best for me. If it doesn’t fix the problem for you, explore the links at the bottom of this article.


An indepth explanation and demonstration of the bug, complete with several solutions to the problem.

Unnecessary Horizontal Scrollbar in IE Popups or Frames XHTML Bug

Internet Explorer 6.0 for Windows, and Internet Explorer 5.0 for Mac has a bug that provides a horizontal scrollbar to pages residing in frames or popup windows, even when no horizontal scrollbar is needed. The cause is a flawed interpretation of the XHTML 1.0 transitional doctype.

Here are some solutions to the problem.

To fix the problem, you may select the solution that fits you best.

Solution 1:

Paste the following code in your stylesheet:

html {
	overflow-y: scroll;

This forces the vertical scroller to be enabled by default, thus, for some reason, eliminating IE’s need for a horisontal one.


  • Fixes the problem completely, allowing you to keep your XHTML doctype intact


  • Forces the vertical scroller, even when it’s not needed. Be careful not to attach the stylesheet to, for instance, a frameset index.

Solution 2:

Paste the following code in your stylesheet:

html {
	overflow-x: hidden;
	overflow-y: auto;

This hides the horisontal scrollbar, and sets the vertical scrollbar to only be enabled when necessary.


  • Visually fixes the problem
  • Doesn’t force a vertical scroller when it is not needed


  • Simply hides the horisontal scroller, doesn’t actually fix the problem. Thus, you may have content that will actually be located outside the page, where normally a horisontal scroller would be needed. It will be forcefully hidden.

Solution 3:

Paste the following code in your stylesheet:

body {
	margin-right: -15px;
	margin-bottom: -15px;

This adds a negative vertical and horisontal margin, the exact amount that IE adds, thus eliminating the artificial need for a scrollbar.


  • Visually fixes the problem
  • Doesn’t force a vertical scrollbar


  • Doesn’t allow you to utilize the fill horisontal screen real estate, due to the “artificially created” 15px margin

I personally use, and would recommend, solution 1.

Forcing scrollbars

The techniques used to “fix” the bug in question, can also be used for other purposes. With CSS, you can forcefully show or hide both vertical and horisontal scrollbars in both Mozilla Firefox and Internet Explorer.

Forcefully enabling scrollbars:

html {
	overflow: scroll;

Forcefully disabling scrollbars:

html {
	overflow: hidden;

Hiding the horizontal scrollbar in IE:

html {
	overflow-x: hidden;

Hiding the vertical scrollbar in IE:

html {
	overflow-y: hidden;

Forcing the horizontal scrollbar in IE:

html {
	overflow-x: scroll;

Forcing the vertical scrollbar in IE:

html {
	overflow-y: scroll;<

Forcing the horizontal scrollbar in Mozilla:

html {

Note: This forces the horisontal scrollbar ONLY. This means even if a vertical scrollbar is necessary, it won’t appear.

Forcing the vertical scrollbar in Mozilla:

html {

Note: This forces the vertical scrollbar ONLY. This means even if a horisontal scrollbar is necessary, it won’t appear.


Thanks to Nikolaas De Geyndt’s excellent document, for providing some of the solutions.