0

I'm working on a very very simple theme, it's only a one page site.

I'm off for holiday tomorrow morning and I've been asked to set this site live last night. Well, everything was going great until I opened IE (I've tested the html in IE before I developed the theme) - for some reason IE triggered Quirks Mode and everything looked like a mess. I viewed source in IE and apparently there's some extra space before the doctype.

Then I checked the site in chrome dev tools and looks like my header stuff went inside the body element?

enter image description here

I had similar problem before but I've fixed it by removing ?> in my functions.php and all the include files. This doesn't seem to work here.

Here's the code:

header.php

<!DOCTYPE html>
<!--[if lt IE 6]>     <html class="no-js ie lt-ie9 lt-ie8 lt-ie7 lt-ie6" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 6]>        <html class="no-js ie ie6 lt-ie9 lt-ie8 lt-ie7" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 7]>        <html class="no-js ie ie7 lt-ie9 lt-ie8" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 8]>        <html class="no-js ie ie8 lt-ie9" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 9]>        <html class="no-js ie ie9" <?php language_attributes(); ?>> <![endif]-->
<!--[if IEMobile]>    <html class="no-js iemobile" <?php language_attributes(); ?>> <![endif]--> 
<!--[if gt IE 9]><!--><html class="no-js" <?php language_attributes(); ?>> <!--<![endif]-->

    <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width" />
    <!--[if IE 6]>
    <script src="/js/third-party/pngfix.js"></script>
    <script>
        DD_belatedPNG.fix('.logo a');
    </script>
    <![endif]-->
    <script src="<?php bloginfo('template_directory'); ?>/js/third-party/modernizr.min.js"></script>
    <link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,700,800" rel="stylesheet">
    <link href="<?php bloginfo('template_directory'); ?>/style.css" rel="stylesheet" />
    <?php wp_head(); ?>
</head>
<body>
    <header class="site-header">
        <div class="wrapper">
            <h1 class="logo">
                <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
            </h1>
            <nav class="main-nav">
                <ul class="special-nav">
                    <!--<li class="distinct free-trial-launcher"><a href="#">Free Trial</a></li>-->
                    <li><a href="//admin.brandview.com/login/retailview">Login</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <section class="site-feature">
        <div class="wrapper"></div>
    </section>

index.php / page.php (pretty much the same, except there's no heading or date in page.php)

<?php get_header(); ?>
    <section class="site-content wrapper">
        <?php if ( have_posts() ) :
                  while ( have_posts() ) :
                      the_post(); ?>

        <?php the_content(); ?>

        <?php endwhile;
              else: ?>

        <p>Sorry, no posts matched your criteria.</p>

        <?php endif; ?>
    </section>
<?php get_footer(); ?>

footer.php

    <footer class="site-footer">
        <div class="footer-nav wrapper">
            <nav class="contact-details">
                <h3>Contact Details</h3>
                <p class="footer-nav-label">Telephone:</p>
                <ul>
                    <li>
                        <a href="tel:0844 357 9970">0844 357 9970</a>
                    </li>
                </ul>
                <p class="footer-nav-label">Email:</p>
                <ul>
                    <li>
                        <a href="mailto:[email protected]">[email protected]</a>
                    </li>
                </ul>
            </nav>
            <nav>
                <h3 class="invisible">Learn More</h3>
                <ul>
                    <li>
                        <a href="http://www.retaildatallc.com">Learn more about Retail Data</a>
                    </li>
                    <li>
                        <a href="http://www.brandview.com">Learn more about Brand View</a>
                    </li>
                </ul>
            </nav>
        </div>
        <div class="copyrights">
            <p class="wrapper">Retail View &reg; is a registered trademark. &copy; Retail View 2013.</p>
        </div>
    </footer>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>window.jQuery || document.write("<script src=\"<?php bloginfo('template_directory'); ?>/js/third-party/jquery.min.js\"><\/script>")</script>
    <script src="//code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script>
    <script src="<?php bloginfo('template_directory'); ?>/js/main.js"></script>
    <?php wp_footer(); ?>
    <script> 
        RV.init();

        RV.Elements = RV.Elements || {};

        RV.Elements.tplpath = "<?php echo get_template_directory_uri(); ?>";
    </script>
</body>
</html>

functions.php

<?php
    require_once('lib/shortcodes.php');
    require_once('lib/filters.php');

    // ==================================================
    // Register Menus
    // ==================================================
    register_nav_menus( 
        array( 
            'primary'               => 'Primary Navigation'
        )
    ); 

    // Add post thumbnails (feature image)
    add_theme_support( 'post-thumbnails' ); ?>

filters.php

<?php
    // ==================================================
    // Hide Admin Bar
    // ==================================================
    add_filter( 'show_admin_bar', '__return_false' );

    // ==================================================
    // Body Class Modification
    // ==================================================

    function custom_classes($classes) {
        global $wp_query;

        // if there is no parent ID and it"s not a single post page, category page, or 404 page, give it
        // a class of "parent-page"
        if( $wp_query->post->post_parent < 1  && !is_single() && !is_archive() && !is_404() ) {
            $classes[] = "parent-page";
        };

        // if the page/post has a parent, it"s a child, give it a class of its parent name
        if($wp_query->post->post_parent > 0 ) {
            $parent_title = get_the_title($wp_query->post->post_parent);
            $parent_title = preg_replace("#\s#","-", $parent_title);
            $parent_title = strtolower($parent_title);
            $classes[] = "parent-pagename-".$parent_title;
        };

        // add a class = to the name of post or page
        $classes[] = $wp_query->queried_object->post_name;

        return array_unique($classes);
    };

    add_filter( 'body_class', 'custom_classes' );


    // ==================================================
    // Search blog posts only
    // stackoverflow.com/questions/4198842/wordpress-search-function-to-only-search-posts#answer-9885744
    // ==================================================

    function SearchFilter($query) {
        if ($query->is_search) {
            $query->set('post_type', 'post');
        }
        return $query;
    }

    add_filter('pre_get_posts','SearchFilter');

and shortcodes.php

<?php
    // ==================================================
    // Clean Shortcode
    // ==================================================

    function parse_shortcode_content( $content ) {

        /* Parse nested shortcodes and add formatting. */
        $content = trim( do_shortcode( shortcode_unautop( $content ) ) );

        /* Remove '' from the start of the string. */
        if ( substr( $content, 0, 4 ) == '' )
            $content = substr( $content, 4 );

        /* Remove '' from the end of the string. */
        if ( substr( $content, -3, 3 ) == '' )
            $content = substr( $content, 0, -3 );

        /* Remove any instances of ''. */
        $content = str_replace( array( '<p></p>' ), '', $content );
        $content = str_replace( array( '<p>  </p>' ), '', $content );

        return $content;
    }

    // move wpautop filter to AFTER shortcode is processed

    remove_filter( 'the_content', 'wpautop' );

    add_filter( 'the_content', 'wpautop' , 99);

    add_filter( 'the_content', 'shortcode_unautop',100 );


    // ==================================================
    // Columns
    // ==================================================

    function create_column($atts, $content = null) {
        extract(shortcode_atts(
            array(
                'size'  => 'third',
                'class' => ''
            ), $atts
        ));

        $class = $class == 'first' ? 'first-column' : '';

        $output = '<div class="column ' . $size . ' ' . $class . '">' . $content . '</div>';

        return $output;
    }

    add_shortcode("column", "create_column");


    // ==================================================
    // Pop up Window
    // ==================================================

    function popup_window($atts, $content = null) {
        extract(shortcode_atts(
            array(
                'id'  => null
            ), $atts
        ));

        $output = '<div class="pop-up group" data-window-id="' . $id . '">
                            ' . do_shortcode($content) . '
                          </div>';

        return $output;
    }

    add_shortcode("window", "popup_window");


    // ==================================================
    // Vimeo
    // ==================================================

    function insert_video($atts) {
        extract(shortcode_atts(
            array(
                'id'        => '0',
                'align'     => 'right',
                'width'     => '400',
                'height'    => '230'
            ), $atts
        ));

        $align = $align != 'left' && $align != 'right' && $align != 'center' ? 'right' : $align;

        $output = '<iframe src="//player.vimeo.com/video/' . $id . '?api=1?player_id=bvvideo&amp;callback=?" width="' . $width . '" height="' . $height . '" class="video-frame align-' . $align . '" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>';

        return $output;
    }

    add_shortcode("vimeo", "insert_video");

I can also send a .zip theme if that helps.

One thing that I've noticed, when you remove the functions and the header, Wordpress inserts some default html and there's no trailing white space or other bugs so I guess it can have something to do with these 2 files?

I've spent a night trying to sort it out but I can't... The only reason I gave up and posted here is because I need to set this live before I go on my holiday (my flight is in couple of hours).

EDIT #1:

I've just looked at the raw html on the resources tham (chrome dev tools):

enter image description here

Improve this question
2
  • Please add debug information to your question to make answers possible. There might be a suppressed error, for example $wp_query->queried_object->post_name is not always set.
    – fuxia ♦
    Commented Jul 13, 2013 at 13:14
  • I've changed define('WP_DEBUG', false); to true but still no errors.. Although thanks, I've been trying to enable errors for ages! :)
    – Adaz
    Commented Jul 13, 2013 at 13:34

2 Answers 2

Reset to default
1

This looks strange for me:

<!--[if gt IE 9]><!--><html class="no-js" <?php language_attributes(); ?>> <!--<![endif]-->

You are opening (<!--) more comments then you close and aren't nested comments forbidden in html?

Improve this answer
6
  • Thanks but according to Paul Irish it's fine paulirish.com/2008/…
    – Adaz
    Commented Jul 13, 2013 at 13:28
  • Ah ok, you learn something new every day. :-)
    – s1lv3r
    Commented Jul 13, 2013 at 13:30
  • The page says: "It doesn’t validate in html4 but is fine in html5. Deal with it." What version of IE are we looking at?
    – s1lv3r
    Commented Jul 13, 2013 at 13:32
  • IE6+ but that doesn't really matter as Modernizr takes care of html5 support.. It really does my head in..
    – Adaz
    Commented Jul 13, 2013 at 13:37
  • hmmm ... maybe I'm all on the wrong way now; but as far as I know the rendering mode is determined before any Javascript is parsed. So I don't see how Modernizr could possibly affect IE going into quirks mode. Also as a next step I would suggest you save the outputted source to index.html (in your wp root dir) remove the space and see if this will really solve the actual problem. I guess you already did check it to be valid html5 via w3c?
    – s1lv3r
    Commented Jul 13, 2013 at 13:49
1

Thanks guys for your suggestions, I appreciate that. After long hours I finally got the solution...

When you look at my edit #1, I've posted a screenshot where there's a dot before the doctype so I started Googling and this is what I've found:

https://stackoverflow.com/questions/15339108/period-before-doctype

I was a bit skeptical at first but I'll never forget that relief when I refreshed the page.

Improve this answer
1
  • 1
    Crazy. Maybe UTF-8 BOM or some other strange problem ... glad it work's now. :-)
    – s1lv3r
    Commented Jul 13, 2013 at 14:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.