Unexpected CSS3pie issue

I have shifted between using CSS3pie and not over the past year from http://css3pie.com. I really appreciate all the work that's gone into it. Sometimes it just doesn't work for me. This morning, I started to look at why it was not working on my portableCMS. I started to gradually remove elements and discovered that if I removed the colour from my body background ie from:
background:#FFFFFF url(images/bodyBackground.png) repeat-x;
to
background:url(images/bodyBackground.png) repeat-x;
I got partial site of my rounded corners etc.

Then I found this blog post. http://www.jakobloekkemadsen.com/2010/10/how-to-make-css3pie-work/
So I put, position:relative; in the CSS call to my selector which used PIE.htc and hey presto!

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; }

portableCMS

My updates have not been as frequent or as detailed lately because I've been writing a CMS which I have so far name portableCMS. So far I have been able to:

• Create a set of configuration files
• Create a method of providing CSS to the correct devices
• Hold editable content data without the need for a database
• Minimise the requirement for developers to code beyond the HTML body if required
• Provide a method of creating plugins
• Provide the opportunity to enhance the CMS with external Functional PHP, OOP PHP, jQuery and JavaScript sources

At the moment I am working on delivering real-time data.