Category Archives: Things You Can’t Do In IE6

SVG Graphics

stelt of http://svg.startpagina.nl says:

As IE doesn’t support SVG natively and all other browsers do, i like your initiative. –stelt

Not sure what SVG is? Wikipedia to the rescue!

Scalable Vector Graphics (SVG) is a family of specifications of XML-based file format for describing two-dimensional vector graphics, both static and dynamic (interactive or animated).

The SVG specification is an open standard that has been under development by the World Wide Web Consortium (W3C) since 1999. SVG images and their behaviours are defined in XML text files. This means that they can be searched, indexed, scripted and, if required, compressed. –Wikipedia

You can read what the W3C says about SVG.

Coincidentally, SVG was initially released a month after IE6, so I posted this to both categories.

min/max-width/height

Daniel Luz of http://mernen.com/ says:

For “Things You Can’t Do In IE6″, I’d like to suggest an article about min/max-width. I find it to be a quite useful feature, and IE7 already supports it, so it could be another nice argument. –Daniel Luz

These four CSS properties (min-width, min-height, max-width, max-height) do pretty much what you expect (in modern browsers): set an element’s minimum and maximum width and height).

:first-line

You can’t select the first line of a block element with CSS in IE6. You can do this in all other current browsers.

For example:

blockquote.firstline-example p:first-line{
font-weight:bold;
}

Looks like:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Attribute Selectors

You can’t use some handy CSS selectors like:

  1. input[type=”text”] for selecting text input elements or
  2. abbr[title] for selecting all <abbr> tags with a title attribute or
  3. a[href$=”.pdf”] for all links that point to pdf files

div#column and div[id=”column”] are equivalent selectors, but one doesn’t work in IE6. Handy for when you want to apply a style for everything else.

24 ways has an article from 2005 that talks about some nifty things you can do with attribute selectors.

Transparent PNGs

Okay sure. 8-Bit PNG transparency works, but I’m talking about doing more transparency than what GIF has to offer, so it doesn’t quite cut it.

But 24-Bit PNG? Now, this has something web designers can appreciate: Alpha blending. 256 levels of transparency.

You can’t do this in Internet Explorer 6 without some javascript or using the AlphaImageLoader filter.

There are a few sites out there using PNG’s to great effect. There’s no need for me compile a list, as it’s been done a few times, but if you’re using it feel free to link up in the comments.