Blog Displays Perfectly in Chrome, Firefox but not in IE

[ACRDepos]

Hello,
Our page has a blog, which I recently went through and edited to match our comapny's website. Unfortunately, during the transition, the new blog design didn't pick up the styles as it does in Chrome and Firefox. Normally, I'd be able to troublehsoot this one, but I'm at a loss.
http://www.acrdepos.com/wordpress/

[Taywin]

Please explain how the difference it looks in IE and others. Dumping the page to others to take a look and debug the whole thing from scratch is not a nice way to ask others to voluntarily help you for nothing in return.

[Hemanth Malli]

Hi,
Please provide the detailed information about that because in IE your site is not opening if you are updating your company profile or you took any back up and restart the site.If you inform this details i will help you.

[ACRDepos]

Alright this is going to be one "doozy" of a post, but it will explain everything.

So this is how the site displays in Internet Explorer (Primarily IE 9):

[IMG]http://i.imgur.com/P026uPc.jpg[/IMG]

And this is how it displays when it's viewed in Google Chrome / Firefox:

[IMG]http://i.imgur.com/7EmqENY.jpg[/IMG]

The basis for this code is integrated through a Wordpress Blog.

In order for the code to be fully understood, there are several lines pages that integrate the page into one. The actual Wordpress Blog that was integrated was integrated through a child theme via the Twewnty Twelve model.

If you're not familar on how themes work in Wordpress, I'll give you the rundown. Wordpress blogs integrate their looks through a few PHP pages. The main elements are: index.php, single.php, header.php and footer.php. Index, obviously is the main page, single.php dispalys a single wordpress post and header and footer integrate the header and footer of the page. You'll also notice that inside of the code are instances where I will call different parts of actual body.

So here's the code for index.php:

<!-- begin the index file -->
<?php get_header(); ?>
<div id="wrapper">
<!-- Section One-->
<div id="section_one">

<div id="section_one_threequarters">

<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', get_post_format() ); ?>
<?php endwhile; ?>
<?php twentytwelve_content_nav( 'nav-below' ); ?>
<?php else : ?>

<article id="post-0" class="post no-results not-found">
  <?php if ( current_user_can( 'edit_posts' ) ) :
// Show a different message to a logged-in user who can add posts.
      ?>
  <header class="entry-header">
    <h1 class="entry-title">
      <?php _e( 'No posts to display', 'twentytwelve' ); ?>
    </h1>
  </header>
  <div class="entry-content">
    <p><?php printf( __( 'Ready to publish your first post? <a href="%s">Get started here</a>.', 'twentytwelve' ), admin_url( 'post-new.php' ) ); ?></p>
  </div>
  <!-- .entry-content -->

  <?php else :
// Show the default message to everyone else.
      ?>
  <header class="entry-header">
    <h1 class="entry-title">
      <?php _e( 'Nothing Found', 'twentytwelve' ); ?>
    </h1>
  </header>
  <div class="entry-content">
    <p>
      <?php _e( 'Apologies, but no results were found. Perhaps searching will help find a related post.', 'twentytwelve' ); ?>
    </p>
    <?php get_search_form(); ?>
  </div>
  <!-- .entry-content -->
  <?php endif; // end current_user_can() check ?>
</article>
<!-- #post-0 -->

<?php endif; // end have_posts() check ?>

<br>
<a href='#' onClick="history.go(-1);return false"><img src="http://www.acrdepos.com/img/buttons/BackButton.png" alt="Go Back"></a>

</div>

<div id="section_one_onequarter">

<?php get_sidebar(); ?>

<a href="http://www.acrdepos.com/scheduling/schedule-a-deposition.php"><img src="http://www.acrdepos.com/img/buttons/ScheduleDeposition.png" alt="Schedule a Deposition"></a><br>
<a href="http://www.acrdepos.com/scheduling/schedule-a-video-conference.php"><img src="http://www.acrdepos.com/img/buttons/ScheduleVideoConference.png" alt="Schedule a Video Conference"></a>

</div>

</div>
<?php get_footer(); ?>
<!-- end the index file -->

Here's single.php:

<!-- begin single.php -->
<?php get_header(); ?>
<div id="wrapper">
<!-- Section One-->
<div id="section_one">

<div id="section_one_threequarters">

<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', get_post_format() ); ?>

<nav class="nav-single">
  <h3 class="assistive-text">
    <?php _e( 'Post navigation', 'twentytwelve' ); ?>
  </h3>
  <span class="nav-previous">
  <?php previous_post_link( '%link', '<span class="meta-nav">' . _x( '&larr;', 'Previous post link', 'twentytwelve' ) . '</span> %title' ); ?>
  </span> <span class="nav-next">
  <?php next_post_link( '%link', '%title <span class="meta-nav">' . _x( '&rarr;', 'Next post link', 'twentytwelve' ) . '</span>' ); ?>
  </span>
  </nav>
<!-- .nav-single -->

<?php comments_template( '', true ); ?>
<?php endwhile; // end of the loop. ?>

<br>
<a href='#' onClick="history.go(-1);return false"><img src="http://www.acrdepos.com/img/buttons/BackButton.png" alt="Go Back"></a>

</div>

<div id="section_one_onequarter">

<?php get_sidebar(); ?>

<a href="http://www.acrdepos.com/scheduling/schedule-a-deposition.php"><img src="http://www.acrdepos.com/img/buttons/ScheduleDeposition.png" alt="Schedule a Deposition"></a><br>
<a href="http://www.acrdepos.com/scheduling/schedule-a-video-conference.php"><img src="http://www.acrdepos.com/img/buttons/ScheduleVideoConference.png" alt="Schedule a Video Conference"></a>

</div>

</div>
<?php get_footer(); ?>
<!-- end single.php -->

Here's the code for the header:

<!-- begin the header file -->

<!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body>



<div id="messagebar">
<?php get_template_part( 'site_files/site_messagebar' ); ?>
</div>

<div id="topheader">
<?php get_template_part( 'site_files/site_topheader' ); ?>
</div>

<!-- Open Header for Nav and Contact Info -->
<div id="header">
<?php get_template_part( 'site_files/site_navigation' ); ?>
</div>

<!-- end the header file -->

And here's the code for the Footer.php:

<!-- begin the footer file -->

<!-- Section Three -->
<div id="section_three">
<?php get_template_part( 'site_files/site_footer' ); ?>
</div>


<!-- Section Four (Footer) -->
<div id="section_four">
<?php get_template_part( 'site_files/site_subfooter' ); ?>
</div>


</div>

<?php wp_footer(); ?>
</body>
</html>

<!-- end the footer file -->

In each of these instances, you'll notice a code being called from site_files. Here are the site files. This time I won't post the actual code:

http://www.acrdepos.com/wordpress/wp-content/themes/mytheme/site_files/site_footer.php

http://www.acrdepos.com/wordpress/wp-content/themes/mytheme/site_files/site_subfooter.php

http://www.acrdepos.com/wordpress/wp-content/themes/mytheme/site_files/site_messagebar.php

http://www.acrdepos.com/wordpress/wp-content/themes/mytheme/site_files/site_navigation.php

http://www.acrdepos.com/wordpress/wp-content/themes/mytheme/site_files/site_topheader.php

While I've given you the core structure of the code, the answer probably relies in the CSS, which I'll provide here:

http://www.acrdepos.com/wordpress/wp-content/themes/mytheme/style.css

http://www.acrdepos.com/wordpress/wp-content/themes/twentytwelve/style.css

http://www.acrdepos.com/css/structure.css

If you're wondering how the CSS can be imported into my theme that I've integrated, the mytheme/style.css imports twewnty twelve's style.css, but anything in structure.css will override twewnty twelve's style.css.

Let know if you have any questions. -phew-

[Taywin]

OK, so you want to add/modify CSS in the existing wordpress theme, not directly change in your php file? If so, do you have an access to the wordpress controller?

Let me check your existing CSS...

[Taywin]

After digging around, it seems to be IE9 rendering bugs (aside from its own software bugs). One suggested a fix here. Also, sometimes declaring a specific width for the area of centering display may help.

[ACRDepos]

That definitely did the trick - thanks! But now the issue relies in what the user end will see. Will this be a consistent problem for people running IE9 or lower?

[fastrecruitment]

Well, one approach to cross-browser compatibility is to install multiple browsers on your computer, such as Internet Explorer, FireFox, Safari, and Opera. But there is one big flaw in method: browsers behave differently depending on version and platform. This means that you’d need to install all versions of each browser on your computer to determine cross-browser compatibility… Clearly, this is unreasonable. So, how can you test your site?

Fortunately, there are free tools which can capture a website and let you preview screenshots of your site in each browser.
Free Website Checkers

There are a wide variety of tools that you can use to view your website in multiple browsers. However, we suggest you use a service called BrowserShots. This services enables you to choose platform (Windows, Mac OS, Linux, BSD), resolution, browsers (and versions), as well as a host of other settings. And best of all, its free.
I recommend that you set the default margin and padding (and possibly the border) of all elements to zero. Most browsers automatically use 0 as the default value for padding and margins, however, some browsers have default values of 5 or 10 pixels. To set the default value to all elements, add the following code to your stylesheet, above any style content:

If you are not using stylesheets, simply add the following between your head tags, above any style content:

*{margin:0;padding:0;}

[ACRDepos]

Thanks for your advice everyone. I was able to figure out the solution to the problem. It actually states in Taywin's link, that you'll need to include:

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>

into the head of your document. You'd think that when importing the file into the header.php file of your document would be enough, but that's not the case. Instead I've gone to the index.php and single.php (there will be others you'll need to import them into also), but the line goes right above the line:

<?php get_header(); ?>

Why this only works likes this - I don't know.