I.E 9 issues- Customizing Home Page

  • Resolved cbroman77

    (@cbroman77)


    10 years, 11 months ago

    I am a newbie to WordPress learning php so I don’t have a good overall grasp yet–much of this feels like a blind crawl right now, but I will see if I can at least describe my issue:

    I am using the childtheme twenty twelve to build a custom site that has a ‘wide-screen’ format. What I want to do is make the home page custom so I am using the template for the home page to hard-code background images. I thought I was being clever by omitting the get_header() function call in the front page template page and replacing with the copied code from inside the header.php file so that I could manipulate things only in the header portion for the home page (basically a work-around so the content will not be put inside the wrapper div and constrained to 960px width) This worked beautifully in Chrome and Firefox, however I.E. 9 shows a broken mess with no wordpress toolbar, nav menu or footer. Screenshot for reference:
    https://www.dropbox.com/s/mejkdnsz0rfknv0/IE9ScreenShot.jpg

    This is how it is supposed to look:
    https://www.dropbox.com/s/mxx5kntns2muzgu/ChromeScreenShot.jpg

    I feel I am doing something perhaps unnecessarily convoluted simply to escape the wrapper div that constrains the page content. I don’t want anything unstable or that might look weird in older browsers, etc.

    oh and here is the code pasted from my front page template that is causing such havoc in IE (not sure this will be readable):

    [ Moderator note: please wrap code in backticks or use the code button. ]

    <?php
/**
 * Template Name: Front Page Template
 *
 * Description: A page template that provides a key component of WordPress as a CMS
 * by meeting the need for a carefully crafted introductory page. The front page template
 * in Twenty Twelve consists of a page content area for adding text, images, video --
 * anything you'd like -- followed by front-page-only widgets in one or two columns.
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
?>

<!--copied from header php 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>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab|Wellfleet|Sanchez' rel='stylesheet' type='text/css'>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="https://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>

<div class="bkgdPng">

<body <?php body_class(); ?>>

<div class="center">
<div class="bkgdBook">
<header id="masthead" class="site-header" role="banner">

<?php $header_image = get_header_image();
		if ( ! empty( $header_image ) ) : ?>
			<a>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>

<hgroup>
			<h1 class="site-title"><a>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
		</hgroup>

<br style="clear: both;">

		<?php endif; ?>
	</header><!-- #masthead -->
</div> <!--end .bkgdBook -->
</div> <!--end center -->

<nav id="site-navigation" class="main-navigation" role="navigation">
			<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
			<a href="#content">"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
		</nav><!-- #site-navigation -->
<div class="dropShadow">
</div>

<!--end copied content from header php file -->

<!--graphics that I am trying to add to home page -->

<div class="HomePageHeaderImage">
<div class="Anchor">
<img src="https://theceacademy.com/wp-content/uploads/2014/04/Continuing-Education-Academy.png">
</div>
</div>

<!--end of graphics --> 

<div id="page" class="heed site">

	<div id="main" class="wrapper">

</div><!--end .bkgdPng -->

	<div id="primary" class="site-content homePage">
		<div id="content" role="main">

			<?php while ( have_posts() ) : the_post(); ?>
				<?php if ( has_post_thumbnail() ) : ?>
					<div class="entry-page-image">
						<?php the_post_thumbnail(); ?>
					</div><!-- .entry-page-image -->
				<?php endif; ?>

				<?php get_template_part( 'content', 'page' ); ?>

			<?php endwhile; // end of the loop. ?>

		</div><!-- #content -->
	</div><!-- #primary -->

<?php get_sidebar( 'front' ); ?>
<?php get_footer(); ?>
Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter cbroman77

    (@cbroman77)

    I didn’t provide links to the page itself b/c the site is not officially live yet.

    Thread Starter cbroman77

    (@cbroman77)

    AHA! I validated my code at https://validator.w3.org/

    and turns out you can’t put a comment before the doctype declaration or IE will go into quirks mode and that’s why it looks all messed up. I took out the seemingly innocuous comment and it looks the same in IE as Chrome and Firefox.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘I.E 9 issues- Customizing Home Page’ is closed to new replies.