Saturday, August 07, 2010

Works great in Opera, Firefox, Safari, and Chrome - looks awful in IE

Realizing that an HTML tag was really just a placeholder for some css code was a 'Eureka' moment for me years ago. So while doing some maintenance on my web site today I wanted to style all the elements semantically with css code backing them, not with "<p class='quote'> ... </p>", but with "<quote> ... </quote>". This would be like a Domain Specific Language written in css,
quote {
  display: block;
  margin: 2em 0.5em 0 0.5em; 
  padding: 0.5em;
  text-align: left;
  background: #bbbbff; 
  border:1px solid black;
author {
  display: block;
  margin: 0 0.5em; 
  padding: 0.1em 1em 0.1em 0;
  text-align: right;
  border:1px solid black;

so, in the HTML it looks like this,
Everyone thinks of changing the world, 
but no one thinks of changing himself.
 Leo Tolstoy
Sadly, this works in all my major browsers, and the iPhone, but alas, not in IE.

No comments: