Grow your CSS skills. Land your dream job.

font, color etc not working in IE8

  • DLR
    # May 4, 2013 at 1:44 pm

    Hi All, I’m having some trouble with IE8 and below. the following css;

    #about_text .headline {
    font-family:’Chelsea Market’, cursive;
    font-size:1.1em;
    font-weight:normal;
    color:#FC941A;
    }

    #about_text .para{
    text-align:justify;
    font-size:0.75em;
    }

    is working fine in Chrome, Firefox, Safari and IE9, but not in IE8 or compatibility mode.
    Any ideas appreciated.

    # May 4, 2013 at 1:45 pm

    post in codepen.io

    # May 4, 2013 at 1:48 pm

    Which one of these did you use?

    about_text.headline
    about_text .headline
    .about_text.headline
    .about_text .headline
    #about_text.headline
    #about_text .headline

    Asking because what you have up there is not right (no period or # before “about_text”).

    Regardless it would be better to give us a link to your site so we can see it in context.

    DLR
    # May 4, 2013 at 1:51 pm

    I used

    #about_text .headline

    DLR
    # May 4, 2013 at 1:52 pm

    Sorry, don’t understand why, but the # is getting dropped from #about_text when I post the comment.

    # May 4, 2013 at 1:53 pm

    We’d need to see the live page (or Codepen)

    # May 4, 2013 at 1:59 pm

    And what element is that CSS being applied to.

    Is this done using a CMS because the markup is really odd?

    # May 4, 2013 at 2:04 pm

    Are you using a EOT font for IE8 support?

    DLR
    # May 4, 2013 at 2:06 pm

    If it looks like a hack, that is because I am using a hosted shopping cart and I am adding code to customise its appearance. That css is being applied to the main text on that page.

    DLR
    # May 4, 2013 at 2:06 pm

    the font is from google fonts

    DLR
    # May 4, 2013 at 2:10 pm

    sorry, gave you link to wrong page, (though I have the same problem on the page I did give link to), correct page is http://ticktockbox.com.au/g/1241607/about-tick-tock.html

    # May 4, 2013 at 2:53 pm

    I don’t know if it’s related but there is a div with a class of `CustomPage` a few parent levels up that has Verdana applied to it.

    # May 4, 2013 at 5:16 pm

    That markup kills kittens… table inside table, inside more table… still not enough tables… wait, I found the 5th? nested table, maybe more. Fubar is what’s coming to my mind but I don’t think it comes close. And everything in a form? Okay enough ranting.

    How was Tick Tock Box Born?

    There is no `h` element. Only `h1`…`h6`. IE won’t style it, other browsers will (just like ‘unknown’ HTML5 elements).

    By the way… 19 tables?

    DLR
    # May 4, 2013 at 8:47 pm

    Thanks CrocoDillon (and everyone else who contributed) you hit the nail on the head with the h element – changed it to

    and works perfectly now.
    As for the many tables, I am using a ready made template provided by the shopping cart/web hosting outfit I am using (ashop.com). The tables are theirs, not mine. I am new at this. Thanks again.

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".