WordPress.org

Ready to get started?Download WordPress

Forums

Toolbox Theme not rendering in safari (and others) (21 posts)

  1. stueadie
    Member
    Posted 2 years ago #

    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/

  2. Jonas Grumby
    Member
    Posted 2 years ago #

    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>
  3. Peter Wooster
    Member
    Posted 2 years ago #

    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?

  4. Peter Wooster
    Member
    Posted 2 years ago #

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

    /peter

  5. stueadie
    Member
    Posted 2 years ago #

    safari is 5.1.1

  6. stueadie
    Member
    Posted 2 years ago #

    sorry what does that mean? Webkit issue

  7. Peter Wooster
    Member
    Posted 2 years ago #

    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

  8. Peter Wooster
    Member
    Posted 2 years ago #

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

  9. stueadie
    Member
    Posted 2 years ago #

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

  10. Peter Wooster
    Member
    Posted 2 years ago #

    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.

  11. Peter Wooster
    Member
    Posted 2 years ago #

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

  12. stueadie
    Member
    Posted 2 years ago #

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

  13. Peter Wooster
    Member
    Posted 2 years ago #

    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.

  14. Peter Wooster
    Member
    Posted 2 years ago #

    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.

  15. stueadie
    Member
    Posted 2 years ago #

    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.

  16. Peter Wooster
    Member
    Posted 2 years ago #

    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

  17. stueadie
    Member
    Posted 2 years ago #

    Thank you so much Peter. It's all go. Hop you have a great New Year (it's new years eve where I am) All the very best and thanks for the helpful advice.

  18. Peter Wooster
    Member
    Posted 2 years ago #

    You're very welcome and the best in the New Year. I could see from your site that you are Australian, I'm Canadian.

    If you decide to go the IDE route, I recommend Netbeans, it's free and cross platform since it's written in Java. It works very well for Java, Javascript, PHP, CSS and HTML among others.

    /peter

  19. stueadie
    Member
    Posted 2 years ago #

    I will check it out. Thanks again.

  20. nilay89
    Member
    Posted 1 year ago #

    what is conditional css code for chrome like that
    <!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/style.css" />
    <![endif]-->

  21. jimbo40010
    Member
    Posted 1 year ago #

    Anybody having rendering problems may want to update their HTML5 shiv and use Peter's code that he mentioned the script can be found here. I was having problems with IE8 (no problem with safari, firefox) Updating the html5.js and adding the code that he mentions fixed the problem. Thanks Peter! Hope this helps somebody.

Topic Closed

This topic has been closed to new replies.

About this Topic