CSS effects only appearing after window resize in IE8

Question

I am coding a basic website and using CSS3PIE to enable rounded edged and gradient effects in IE8. My problem is when I use javascript to import a portion of code (my nav bar). If I load the page in IE8, the effects do not display. Only when I resize the page do the effects appear. This does not happen if the code is inline in the document.

Here is my nav bar code:

    <table class="Nav_Bar">
    <tr>
        <td class="Nav_Bar_L1">
        Heading 1</td>

    <tr>
        <td class="Nav_Bar_L2">
            SubHeading 1</td>

    <tr>
        <td class="Nav_Bar_L3">
            SubSubHeading 1</td>

    <tr>
        <td class="Nav_Bar_L1">
            Heading 2</td>

    <tr>
        <td class="Nav_Bar_L2">
            SubHeading 2</td>

    <tr>
        <td class="Nav_Bar_L3">
            SubSubHeading 2</td>

</table>

and my javascript call:

<script type="text/javascript" language="javascript" src="includes/nav_bar.js">
</script>

and my CSS:

.Nav_Bar {
cellspacing: 5px;
}

.Nav_Bar_L1 {
font-size: 14px;
font-family: Helvetica, Arial, sans serif;
width: 198px;
padding: 5px 0px 5px 20px;
background: -moz-linear-gradient(top, #669900, #FFFFFF);
background: -webkit-gradient(linear, left top, left bottom, from(#669900), to(#FFFFFF));
font-weight: bold;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

.Nav_Bar_L2 {
font-size: 14px;
font-family: Helvetica, Arial, sans serif;
padding: 5px 0px 5px 30px;
background: -moz-linear-gradient(top, #99CCFF, #FFFFFF);
background: -webkit-gradient(linear, left top, left bottom, from(#99CCFF), to(#FFFFFF));
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

.Nav_Bar_L3 {
font-size: 14px;
font-family: Helvetica, Arial, sans serif;
padding: 5px 0px 5px 40px;
background: -moz-linear-gradient(top, #CCCCCC, #FFFFFF);
background: -webkit-gradient(linear, left top, left bottom, from(#CCCCCC), to(#FFFFFF));
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

and my IE-specific CSS:

.Nav_Bar_L1 {
    border-radius: 5px;
    -pie-background: linear-gradient(#669900, #FFFFFF);
    behavior: url(PIE/PIE.htc);
}

.Nav_Bar_L2 {
    border-radius: 5px;
    -pie-background: linear-gradient(#99CCFF, #FFFFFF);
    behavior: url(PIE/PIE.htc);
}

.Nav_Bar_L3 {
    border-radius: 5px;
    -pie-background: linear-gradient(#CCCCCC, #FFFFFF);
    behavior: url(PIE/PIE.htc);
}

and finally my javascript file:

document.write('<table class="Nav_Bar">             ');
document.write('    <tr>                            ');
document.write('        <td class="Nav_Bar_L1">     ');
document.write('        Heading 1</td>              ');
document.write('                                    ');
document.write('    <tr>                            ');
document.write('        <td class="Nav_Bar_L2">     ');
document.write('            SubHeading 1</td>       ');
document.write('                                    ');
document.write('    <tr>                            ');
document.write('        <td class="Nav_Bar_L3">     ');
document.write('            SubSubHeading 1</td>    ');
document.write('                                    ');
document.write('    <tr>                            ');
document.write('        <td class="Nav_Bar_L1">     ');
document.write('            Heading 2</td>          ');
document.write('                                    ');
document.write('    <tr>                            ');
document.write('        <td class="Nav_Bar_L2">     ');
document.write('            SubHeading 2</td>       ');
document.write('                                    ');
document.write('    <tr>                            ');
document.write('        <td class="Nav_Bar_L3">     ');
document.write('            SubSubHeading 2</td>    ');
document.write('                                    ');
document.write('</table>                            ');

Again, the problem only persists when I import the code with javascript.

Any ideas?

EDIT: Perhaps if you can't supply a solution you could supply another method of including chunks of code in multiple pages? I've looked at PhP and SSI but the server I work on doesn't support it and I can't change that :/

EDIT: I am using Visual Lightbox to include a gallery in the one page. That page does not display this problem however the others with just text as content do. Maybe that helps?

EDIT: OK I have managed to fix the problem although I really don't know why it works. If I load the jquery script in the header section, the CSS effects load just fine. I find that really weird. Anyone have any thoughts?

<script src="path/jquery.min.js" type="text/javascript"></script>

Answer 1

A main problem when you are using PIE is that it usually need a position:relative; on your element and also on the parent because the VML get position:absolute; . I'm not sure if it work that good with position:relative;.

I hope this helps to understand PIE a bit more.