Two lessons learned about IE from the coal face

Yesterday was a difficult day. It's my own fault. I should have started testing my portableCMS in IE earlier. I came across 2 problems which took more time than I was prepared for in debugging. 

So here is tip number 1. Don't even think of trying to refer to JavaScript constants in your jQuery calls. It's just not worth the hassle.

Tip number 2. As well as referring to a html5 reset, (I use http://html5resetcss.googlecode.com/files/html5-reset.css), add your own HTML 4 reset. Mine is listed below. You will still have problems, but less.

*

{

    margin:0;

    padding:0;

    border:0;

    outline:0;

    font-size:100%;

    vertical-align:baseline;

    background:transparent;

}

body

{

    font-family:Sans-serif;

    font-size:1em;    

}

h1, h2, h3, h4, h5, h6

{

    margin:0;

    padding:0;

    font-weight:normal;

}

p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea

{

    margin:0;

    padding:0;

}

blockquote

{

    margin:1.25em;

    padding:1.25em

}

q

{

   font-style:italic;

}

acronym, abbr

{

   cursor:help; 

}

small

{

    font-size:.85em;

}

big

{

    font-size:1.2em;

}

a, a:link, a:visited, a:active, a:hover

{

    text-decoration:none;

}

table

{

    margin:0;

    padding:0;

    border:none;

}

form

{

    margin:0;

    padding:0;

    display:inline;

}

label

{

    cursor:pointer;

}

.clear { clear:both; }

.floatLeft { float:left; }

.floatRight { float:right; }

.textLeft { text-align:left; }

.textRight { text-align:right; }

.textCenter { text-align:center; }

.textJustify { text-align:justify; }

.blockCenter { display:block; margin-left:auto; margin-right:auto; }

.bold { font-weight:bold; }

.italic { font-style:italic; }

.underline { text-decoration:underline; }

.noindent { margin-left:0; padding-left:0; }

.nomargin { margin:0; }

.nopadding { padding:0; }

.nobullet { list-style:none; list-style-image:none; }