Ethan Marcotte now blogs at Unstoppable Robot Ninja.

Weblog entry:

CSS only mostly stupid.

If you’re not interested in a little geek blather, please tune in tomorrow — I talk a little too much about coding in this one.

Still here?

Matt Haughey posted a slight problem with the new background image replacement techniques being bandied about recently — specifically, when applying either the so-called LIR or MoronicBajebus methods to a non-header element (such as div), IE5 on the Macintosh misbehaves itself. Rather than obeying the overflow: hidden declaration, it displays the text to be hidden.

The workaround seems to lie in explicitly declaring the clipping of the element — whereas most browsers will accept Stuart Langridge’s image-replacement syntax:

#ex1 {
  background-image: url(ex1.gif);
  background-repeat: no-repeat;
  overflow: hidden;
  padding: 133px 0 0 0;
  width: 243px;
  height: 0 !important;
  height /**/:133px;
}

Mac IE5 needs you to set the box’s visible clipping area explicitly:

#ex1 {
  background-image: url(ex1.gif);
  background-repeat: no-repeat;
  clip: rect(0, 243px, 133px, 0);
  overflow: hidden;
  padding: 133px 0 0 0;
  width: 243px;
  height: 0 !important;
  height /**/:133px;
}

Redundant, to be sure, but it seems to get Mac IE5 to play nicely. I’ve posted a demo page that works on IE6, Opera 7 and Firebird on Windows, and Safari 1.0 and IE5 on the Macintosh — if I’ve broken anything in any other CSS-aware browser, please let me know.

Hope this helps those excellent image replacement techniques maintain the respect they’ve garnered in recent weeks.

Comments

Hooray, technical difficulties.

There’s a WordPress issue that’s currently preventing old comments from displaying correctly. Sorry for the inconvenience, but hopefully we’ll be back online soon.