Website not displaying with Mozilla Firefox


I have written an HTML/CSS website that I have modified from a CSS Template site that I was given.

I have checked it against Chrome, Opera, Safari and it works fine.

The problem is that when it comes to firefox it only displays the logo and some very basic navigation stuff.

I was hoping someone with more web programming experience could take a look and let me know what might be going wrong.

I hate to ask such a general question but I really have no idea what is going on. You can find the website here:

Thank you in advance for your help or pointers!

<?php require('./blog/wp-blog-header.php'); ?>
<!DOCTYPE html>

<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js" lang="en" id="index"> <![endif]-->

    <!-- Analytics -->
    <?php include_once( "php/analytics.php" ); ?>

    <base href="" /> 
    <title>Home \\ Mat Roscoe</title>

    <!-- SEO Information -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="This website provides current information on the research and work of Matthew Roscoe">
    <meta name="author" content="Matthew Roscoe, Graduate Student,">

    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <link rel="shortcut icon" type="image/png" href="favicon.png">

    <!-- CSS Style Sheets -->
    <link href=',400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/style.css">

    <!--[if lt IE 9]>
    <script src=""></script>

<!-- Prompt IE 7 users to install Chrome Frame -->
<!--[if lt IE 8]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="">Upgrade to a different browser</a> or <a href="">install Google Chrome Frame</a> to experience this site.</p><![endif]-->

<div class="container">
    <script src="js/header.js" onload="header();"></script>

    <div class="home-page main">
       <section class="grid-wrap" >
          <header class="grid col-full">
            <p class="fleft">Home</p>
            <a href="about.php" class="arrow fright">more info</a>

        <div class="grid col-one-half mq2-col-full">
                Robotics <br>
                A.I. <br>
                Computer Vision <br>
                Space Exploration

            <p align="justify">
                 I am a graduate student studying <a href="">3D Vision Systems</a>
                 and <a href="">Artificial Intelligence</a> in robotic platforms. 
                 My goal is to work in space exploration robotics in the near future. 
            <p align="justify">
                My current interests are focused around 3D object representation that has been afforded to us thanks to new RGB-D sensors. I am also investigating ways to learn about objects on the fly. 
                You can learn more about the project I am working on either through my <a href="#">Publications Page</a> or through my <a href="#"> Projects Page </a>. 

        <div class="slider grid col-one-half mq2-col-full">
            <div class="flexslider">
                <div class="slides">
                    global $post;
                    $args = array( 'posts_per_page' => 5 );
                    $myposts = get_posts( $args );
                    foreach( $myposts as $post ) :  setup_postdata($post); ?>
                    <div class="slide">
                            <?php $args = array(
                               'post_type' => 'attachment',
                               'numberposts' => -1,
                               'post_status' => null,
                               'post_parent' => $post->ID

                              $attachments = get_posts( $args );
                                 if ( $attachments ) 
                                       //echo wp_get_attachment_image( $attachment->ID, 'full' );
                                       $image_attributes = wp_get_attachment_image_src( $attachments[1]->ID, 'full' ); ?>
                                       <img class="front" src="<?php echo $image_attributes[0]; ?>" width="400px" height="370px">
                                 <?php } ?>
                                <h5><?php the_title(); ?></h5>
                                <?php the_excerpt(); ?>
                                <p class="readmore"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">Continue Reading &raquo;</a></p>              </div>
                    <?php endforeach; ?>
</div> <!--main-->
    <?php include("php/footer.php"); ?>

<!-- Javascript - jQuery -->
<script src=""></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')</script>

<!--[if (gte IE 6)&(lte IE 8)]>
<script src="js/selectivizr.js"></script>

<script src="js/jquery.flexslider-min.js"></script>
<script src="js/scripts.js"></script>

<script type="text/javascript">
var clicky_site_ids = clicky_site_ids || [];
(function() {
  var s = document.createElement('script');
  s.type = 'text/javascript';
  s.async = true;
  s.src = '//';
  ( document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0] ).appendChild( s );
<noscript><p><img alt="Clicky" width="1" height="1" src="//" /></p></noscript>
Problem courtesy of: badrobit


I found the issue with my site. The problem was that I was using Javascript in order to create the navigation menus and I had this tied into a faulty call to an onload() even that never actually happened. Once I changed form the Javascript to a much more concise PHP version the problem went away and I have no had any issues viewing the site using Firefox.

I want to post the answer separately from the others as it was different enough but if it were not for everyone looking at my code for me and making suggestions I never would have even caught the error. Thank you all for your assistance in getting me up and running on another browser!


Solution courtesy of: badrobit


I think the problem is with your conditional comments for outputting the <html> tag. Firstly, they only seem to target Internet Explorer and I see no case where a <html> tag would be output for normal browsers. Secondly, the final conditional comment seems faulty:

<!--[if gt IE 8]><!--> <html class="no-js" lang="en" id="index"> <!--<![endif]-->

should probably be

<!--[if gt IE 8]> <html class="no-js" lang="en" id="index"> <![endif]-->

That said, I'm not sure why it is working in for example Chrome. I guess it may well be because of Chrome reacting differently to the broken conditional comment and applying the <html> tag within, while Firefox does not.

Also, try adding a final conditional comment simply looking like this:

<!--[if !IE]><html><![endif]--> 

to target non-IE browsers and see if that helps.

Discussion courtesy of: Peter Herdenborg

did you check the error console? (Ctrl+Shift+J) - Tools webdeveloper Erro console. I see a bunch of items there.

Discussion courtesy of: schar

This recipe can be found in it's original form on Stack Over Flow.