The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Programming Fundamentals" Dec 02 - 2:00 PM Eastern

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;

    #about_text .para{

    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

    # May 4, 2013 at 1:48 pm

    Which one of these did you use?

    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.

    # May 4, 2013 at 1:51 pm

    I used

    #about_text .headline

    # 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?

    # 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.

    # May 4, 2013 at 2:06 pm

    the font is from google fonts

    # 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

    # 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?

    # 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 ( 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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed