2

I'm having problems with the rendering of the Bootstrap 3.0.3 progress bar in IE8. I think border-radius is not working and i don't know why. This is how the bar looks like:

enter image description here

I'm using CSS3PIE 1.0.

.compatibilidad-IE is defined in my CSS file and the path is relative to de HTML file. I know this class is working well because y have applied it to other DOM elements in the same HTML and they are rendered as expected.

This is the style class definition:

.compatibilidad-IE {
    behavior: url(pie/PIE.htc);
}

This is my HTML:

<div style="width:200px;">
    <div class="progress compatibilidad-IE" >
        <div class="progress-bar  compatibilidad-IE"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
            <span class="sr-only">45% Complete</span>
        </div>
    </div>
</div>

I hope you can help me!

Thanks.

Community
  • 1
  • 1
Fernando Prieto
  • 520
  • 1
  • 6
  • 19
  • `border-radius` does not work in IE. Are you sure that PIE.htc is in the right place? –  Jan 09 '14 at 02:46
  • Absolutely! I have in the same HTML many `` and ` – Fernando Prieto Jan 09 '14 at 02:49
  • If you use developer tools to inspect the progress bar what other classes (or elements) come before .progress or .compatibilidad-IE? – Nathan Mar 21 '14 at 12:03

1 Answers1

-1

Put your PIE.htc in the root of your webpages.

Use this code:

.compatibilidad-IE {
    position: relative;
    zoom: 1;
    behavior: url(/PIE.htc);
}

Or if you have PIE.htc in your js folder use:

behavior: url(/js/PIE.htc);

This is because you need an absolute path.