Skip to content

new CSS for IE6 (kinda)

Old content alert!

Thanks very much for visiting my blog. Always happy to have people read my stuff but just thought I should point out this post is years old. If it's about technical stuff there is a possibility that it is no longer relevant, if it's a bug report/fix I'm hoping that it should now have been fixed.

Of course if this is what you're looking for and it does work then great, just don't say I didn't warn you...

When attending a “future of CSS” talk at barcamplondon5 I pointed out that a few of the things mentioned as being availiable in IE7 where actually available in IE6. Much amazement was created and people asked why these things weren’t that well known. To be honest I don’t know why but in an effort to raise better awareness I am writing this blog post!

So with no further or do here are a couple of CSS properties you may never have thought of using due to IE6 compatibility problems….

:first-letter

Do you think that creating book style initial caps on your paragraphs? Well :first-letter is the thing for you! It’s a doddle to add this style to any paragraph, div, span – anything containing text!


p {
  font-weight: bold;
  font-size: 85%;
}
p:first-letter {
  font-style: italic;
  color: red;
  font-size: 100%;
}

:first-line

Very similar to :first-letter (thought probably not as useful) :first-line will render the first line of a block element different to the rest. Expand and contract the size of the element and the first-line changes to fit the text – can lead to style inconsistencies if you want specific words styled differently mind…


p { 
  font-size: 85%;
}
p:first-line {
  font-size: 100%;
  font-weight: bold;
}

So there you go – if you were unaware of these properties here are a couple more strings to add to your CSS bow – and they really do work in IE6 (I promise :>)