Support » Themes and Templates » Using PIE.htc for IE CSS3 Support doesn't work

  • Resolved seeurope

    (@seeurope)


    I’m using this method to get CSS3 border-radius under IE7/IE8: http://css3pie.com/documentation/getting-started/

    Although I’m specifying the path to the .htc file correctly, as evident from the fact my included font files are being loaded, no CSS3 border-radius is applied when viewing the site under IE7/IE8.

    Before testing, I have disabled all CSS3 support-adding plugins and cleared IE’s cache. The same .htc file works perfectly when using it in a static html file, not wordpress.
    My wp site: http://eventinvestment.eu/

    Please help.

Viewing 15 replies - 1 through 15 (of 22 total)
  • Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    seeurope

    (@seeurope)

    Hi Andrew,

    I’ve already tried this plugn, per your suggestion a week ago 🙂

    It seems to work on first glance, but after I switch back to IE9 Browser mode, after testing in IE7 or IE8 browser mode, and then go back to IE7/IE8 its effects are not applied until I clear my cache (simply pressing shift+refresh doesn’t work) and load the page in IE7/IE8 mode again. The whole sequence looks like this:

    1. Pres F12 on the keyboard to bring up IE’s code inspector.
    2. Select “Browser Mode: IE7” or “IE8”
    3. Cleare IE9’s cache
    4. Open the site. It loads with border-radius applied.
    5. Change to “Browser Mode: IE9” or “IE9 Compatibility View”, doesn’t matter which.
    6. Change back to IE7 or IE8. Result: no border-radius until you clear your cache and repeat from Step 1.

    I admit the average user wouldn’t go switching between modes like I do when testing, but I’m not completely sure that’s the only way to disable the plugin’s effects.

    I’ll try browsing around the site after I’ve gotten it to run with CSS3 enabled under IE7/IE8 mode and see if it breaks after some page loads.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    I don’t understand your concern, Internet Explorer’s modes are for developers, not users. You are developing for people who are actually using Internet Explorer 7 or 8, not for people with IE9 that are switching browser modes in its developer tools.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    I admit the average user wouldn’t go switching between modes like I do when testing, but I’m not completely sure that’s the only way to disable the plugin’s effects.

    I’ll try browsing around the site after I’ve gotten it to run with CSS3 enabled under IE7/IE8 mode and see if it breaks after some page loads.

    Doy! Didn’t read your other part.

    seeurope

    (@seeurope)

    After browsing around, I think it’s ok but I meet with another problem now – IE7/IE8 won’t load my imported font. In IE9 mode the font is displayed fine, although only in the upper menu, not in the footer menu where It’s also supposed to be used.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    What is, or are, the font extension type(s)?

    seeurope

    (@seeurope)

    Here is the font-face clause:

    @font-face {
        font-family: 'RobotoCondensed';
        src: url('fonts/RobotoCondensed-Light.eot?#iefix') format('embedded-opentype'),
             url('fonts/RobotoCondensed-Light.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    I’ve used caniuse.com to verify which versions of IE need which formats and .eot seems to be fine with versions 7-9.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Have you checked the font’s demo website in IE7/8 to see whether its an underlying issue with the font?

    seeurope

    (@seeurope)

    Just did. The font is visible under said versions of IE when viewed in Google Web Fonts.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Have you tried deactivating plugins to explore whether any could be responsible for the fault?

    seeurope

    (@seeurope)

    My only active plugin is “IE CSS3 Support”. Confirmed the font works under these browsers, by checking fontsquirrel’s demo page. (http://eventinvestment.eu/wp-content/themes/eventinvestment/fonts-test/robotocondensed-regular-demo.html) Which gives me the idea to test the site under IE7/8 with latin symbols instead of Cyrillic.

    Edit: I checked with latin symbols. The font still isn’t used under IE7/IE8

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Try using IE9’s developer tools to do a spot the difference between the CSS applied to the elements that have working fonts, and the elements that don’t.


    Edit: Oops, misunderstood the issue. The font’s don’t work at all in IE7/8. Got it.

    If you’re testing in IE7/8 (not through IE9), I recommend using Firebug Lite.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    You could also use a more accurate URL, just in case your fonts are trying to load in another directory (and therefore failing to load).
    E.g,

    @font-face {
        font-family: 'RobotoCondensed';
        src: url('/wp-content/themes/yourThemeName/fonts/RobotoCondensed-Light.eot?#iefix') format('embedded-opentype'),
             url('/wp-content/themes/yourThemeName/fonts/RobotoCondensed-Light.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    seeurope

    (@seeurope)

    No elements have working fonts in IE7/8. Only some do, only in IE9. I’ll try out Firebug Lite.

    If the address is wrong how come the same font files load under IE9? Doesn’t hurt to try anyway.

    seeurope

    (@seeurope)

    Checking with firebug lite (just under IE8 for now) revealed interesting results – the css clause that says the upper menu (which I inspected) should use the imported font is simply not shown in firebug. Instead, the default line from style css is applied:

    body.custom-font-enabled {
      font-family:Verdana, "Open Sans", Helvetica, Arial, sans-serif;
    }

    This is different than what IE’s code inspector showed. It showed RobotoCondensed is being applied.

Viewing 15 replies - 1 through 15 (of 22 total)
  • The topic ‘Using PIE.htc for IE CSS3 Support doesn't work’ is closed to new replies.