WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Using PIE.htc for IE CSS3 Support doesn't work (23 posts)

  1. seeurope
    Member
    Posted 1 year ago #

    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.

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

  3. seeurope
    Member
    Posted 1 year ago #

    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.

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

  5. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

  6. seeurope
    Member
    Posted 1 year ago #

    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.

  7. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  8. seeurope
    Member
    Posted 1 year ago #

    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.

  9. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  10. seeurope
    Member
    Posted 1 year ago #

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

  11. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  12. seeurope
    Member
    Posted 1 year ago #

    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

  13. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

  14. Andrew
    Forum Moderator
    Posted 1 year ago #

    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;
    }
  15. seeurope
    Member
    Posted 1 year ago #

    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.

  16. seeurope
    Member
    Posted 1 year ago #

    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.

  17. seeurope
    Member
    Posted 1 year ago #

    I added the clause which uses RobotoCondensed as font-family on a couple of more places of style (both in style.css at the bottom and in ie.css at the bottom), and now it appears in Firebug Lite, but it's still not being used on the screen.

  18. Andrew
    Forum Moderator
    Posted 1 year ago #

    font is simply not shown in firebug. Instead, the default line from style css is applied:

    Possibly you have some invalid markup or CSS.
    Check the validity of your markup: http://validator.w3.org
    Check the validity of your CSS: http://jigsaw.w3.org/css-validator/

  19. seeurope
    Member
    Posted 1 year ago #

    After a long series of trial and error I found out the reason IE9 was displaying the font in some places and not in others. It seems when I use an embedded font I shouldn't use the keyword "normal" for font-weight when using the shorthand "font:" property. So:

    font: 15px 'RobotoCondensed' !important; works, and
    font: 15px normal 'RobotoCondensed' !important; doesn't

    Of course this only applies to IE, normal browsers don't care about the keyword.

  20. seeurope
    Member
    Posted 1 year ago #

    Here you can confirm that the font declaration is being read, and the font is still not being applied on screen when in IE8 mode: http://eventinvestment.eu/wp-content/themes/eventinvestment/fonts-test/screen01.jpg

    This one really has me confused.

  21. seeurope
    Member
    Posted 1 year ago #

    Fixed, by myself :)

    I googled "@font-face ie8 not working" and reached this page at stackoverflow: http://stackoverflow.com/questions/7582401/css-font-face-not-working-in-ie8

    I saw the solution and suspected the font wasn't working because the second line in its code (the one about the .eot) was missing from my code. Added "src: url('fonts/RobotoCondensed-Light.eot');" so my font-face clause is looking like this:

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

    Now the font displays under IE8 mode and even under IE7 mode.

  22. Andrew
    Forum Moderator
    Posted 1 year ago #

    Really good work!
    Possibly in the future you may want to use a font-face generator like FontSquirrel's to generate the different browser hacks too :)

  23. seeurope
    Member
    Posted 1 year ago #

    I was using that (last week we had a 40-post topic about it: http://wordpress.org/support/topic/fonts-included-with-font-face-are-not-rendered/page/2?replies=44#post-4045532) until I found out that fontsquirrel strips my font files of their Cyrillic glyphs. After a couple of days of wondering if my font files weren't loading, finding that they are, but the glyphs aren't there and I get my font right only in Latin script was quite a revelation. :)

    I removed the woff and svg lines from my font-face declaration but I don't know why I removed the first .eot declaration as well. :)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags