Support » Fixing WordPress » Toolbox Theme not rendering in safari (and others)

  • stueadie

    (@stueadie)


    Hiya,

    Can’t figure out why my site will not render at all in Safari. It looks perfect in firefox. It doesn’t pick up the css at all in safari.
    I’m using the latest toolbox theme. http://www.ukemullum.com/

Viewing 15 replies - 1 through 15 (of 20 total)
  • Jonas Grumby

    (@ss_minnow)


    You should fix your doctype and you have a whole bunch of conditional browser code such as

    <!DOCTYPE html>
    <!--[if IE 6]>
    <html id="ie6" dir="ltr" lang="en-US">
    <![endif]-->

    Not sure why that’s there, but you could try taking it all out. Make a backup first in case you have to put it back.

    Note that it is all for IE, and there is no “else” to create a default for cases where none of the “if” conditions are met. I’m not convinced that it’s even valid code. The whole problem might be that you havent declared a doctype. Should be something like:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
    <head>
    Peter Wooster

    (@pkwooster)


    I use toolbox and themes derived from it all the time, and I develop on a Mac using Safari as my primary browser. The doc type is correct. it should be simply html for html5. The IE conditional should look like

    <!DOCTYPE html>
    <!--[if IE 6]>
    <html id="ie6" dir="ltr" lang="en-US">
    <![endif]-->
    <!--[if IE 7]>
    <html id="ie7" dir="ltr" lang="en-US">
    <![endif]-->
    <!--[if IE 8]>
    <html id="ie8" dir="ltr" lang="en-US">
    <![endif]-->
    <!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
    <html dir="ltr" lang="en-US">
    <!--<![endif]-->

    This includes an id that lets CSS customize for various IE sins. note that the last html line applies to IE9 and all non-IE browsers.

    Which version of Safari are you using, does the site work in Chrome?

    Peter Wooster

    (@pkwooster)


    I just tried it in Safari and Chrome and it doesn’t work in either, so it’s a webkit issue.

    /peter

    stueadie

    (@stueadie)


    safari is 5.1.1

    stueadie

    (@stueadie)


    sorry what does that mean? Webkit issue

    Peter Wooster

    (@pkwooster)


    Webkit is the engine under both Safari and Chrome. I just took a look at the styles seen on some of your code and it is using some of the styles from the toolbox. e.g.. page is getting its color from line 22 of style.css.

    /peter

    Peter Wooster

    (@pkwooster)


    I just checked IE and it works in IE9, including IE8 mode, but not IE7 mode. IE7 mode looks just line Safari.

    stueadie

    (@stueadie)


    I have hacked into style.css. Should I have been using a differnet styles doc? Would you be interested in seeing the style sheet?

    Peter Wooster

    (@pkwooster)


    There is a double quote in line 46

    .entry-content" {
        width: 555px;
    }

    webkit is known to be strict about stuff like that. Try removing it.

    Peter Wooster

    (@pkwooster)


    You can use the Safari Web Inspector to view any style sheet on the web, it’s very handy.

    stueadie

    (@stueadie)


    I removed it and it stopped working in firefox as well. I’ll check out web inspector.

    Peter Wooster

    (@pkwooster)


    I usually add my changes at the end of style.css or build a child theme based on toolbox. That way syntax errors don’t kill any of the original code.

    I suspect there is another syntax error, possibly the closing quote. But it’s good that it is now consistent. The Firefox Firebug plugin is also very good at finding this sort of thing, possibly even better than Web Inspector.

    Do you use an IDE that automatically closes quotes? I use NEtbeans and it’s a real nuisance sometimes.

    Peter Wooster

    (@pkwooster)


    the widget-area style wasn’t closed

    #main .widget-area {
        float: right;
        overflow: hidden;
        width: 220px;
    }  /* this was missing */

    It showed up immediately in Netbeans.

    stueadie

    (@stueadie)


    NO I don’t use an IDE. I usually just edit stuff online. Bad practice I know. I do use firebug though.

    No closing quote quote I can find. Guess I’m going to have to go back to the original css and add my hacks one at a time.

    Peter Wooster

    (@pkwooster)


    I never edit online, Netbeans also found another error, the braces are missingl in:

    #access ul:hover > a,
        background-image: url(http://www.ukemullum.com/sub_bg.png);
        color:#ff6633;
    )

    With that and the other brace fixed the IDE says it’s good to go

    /peter

Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘Toolbox Theme not rendering in safari (and others)’ is closed to new replies.