Problem with alignment in IE

  • Hi all. I am new to WordPress and come from the design side so I am still learning (slowly) about coding and php functionality.

    I used a template (Solid from bitpub at themeforest) to develop this site and made some modifications to customize it. I am 95% there and have it looking great in all browsers, except IE. I know there are other posts and resolutions, but I can’t figure out how to resolve the alignment issue I am getting with IE. I did not paste any content from Word, I read that can cause issues. Again, I am very new to this. I have run the site through the verification and notice that I have some errors, but I am not sure how to fix them or where to find the lines that need to be fixed. I have WP installed on the hosting server in a subfolder and therefore don’t have Dreamweaver linked up to edit.

    Any help would greatly be appreciated. I am hoping to do some more sites and become a contributor as I learn more, but for now, I have to fake it until I make it!

    Here is my site:

    https://askbluestone.com/wp1

    Thanks,
    Tim

Viewing 7 replies - 1 through 7 (of 7 total)

  • Remove this style block at the very beginning of your header.php..

    <style type="text/css">
.home.page.page-id-43.page-template.page-template-showcase-php #wrap #content {
	background-color: #FEFEFE;
}
</style>

    place it inside the <head></head> tag.

    raby

    Thread Starter adtkb

    (@adtkb)

    Raby – Thanks for the quick response! As I look at the header.php file, this is what I see:

    <?php
	global $doctype;
	global $class;
	?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" />
<style type="text/css">
/*<![CDATA[*/
.home.page.page-id-43.page-template.page-template-showcase-php #wrap #content {
        background-color: #FEFEFE;
}
/*]]>*/
</style>
<!--[if lt IE 7 ]> <html class="ie6" xmlns="https://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" > <![endif]-->
<!--[if IE 7 ]>    <html class="ie7" xmlns="https://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" > <![endif]-->
<!--[if IE 8 ]>    <html class="ie8" xmlns="https://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" > <![endif]-->
<!--[if IE 9 ]>    <html class="ie9" xmlns="https://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" > <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>- askbluestone.com</title>
	<!-- //////// Favicon ////////  -->
	<link href="<?php echo get_template_directory_uri(_layout/images/favicon.ico); ?>/favicon.ico" rel="shortcut icon" type="image/x-icon" />

	<script type="text/javascript">
		var themePath = '<?php echo get_template_directory_uri(); ?>';
		var themeCufon = '<?php echo get_option( EWF_SETUP_THNAME.'_cufon', 'true'); ?>';
		var themeSliderTimeout = <?php echo get_option( EWF_SETUP_THNAME.'_slider_timeout', '5000'); ?>;

		var msg_newsletter_error = '<?php echo __('please enter a valid email...', EWF_SETUP_THEME_DOMAIN); ?>';
		var msg_newsletter_label = '<?php echo __('subscribe to newsletter...', EWF_SETUP_THEME_DOMAIN); ?>';

	</script>

	<?php wp_head(); ?>
</head>

    It seems that style block IS inside the <head></head> tag.

    I did try to pull it out and remove it completely as well, with no success.

    I wonder if it isn;t an issue with the “wrap” measurement or the content within the wrap as the footer has the same alignment issue.

    I also tried adding this to the very first line of the header.php document:

    <!DOCTYPE html>

    But it displayed on the site, so I don;t think that was right.

    Thanks again for the help. Any other suggestions?

    sorry I think I confused you as to where to delete the line I mentioned above. those lines are actually not hardcoded but echoed out by your global variable ($class) located inside your header.php at the beginning:

    <?php
    global $doctype;
    global $class;
?>

    this declaration is what outputs the <style></style> tag I viewed from your home page’s source. this is the line that you need to get rid of.

    I also mentioned adding the Doctype declaration a while ago coz when I debugged your site I didn’t see that appear in my browser. This is needed by IE if you want to use the margin:0 auto which centers your content.

    try that and let me know.

    Thread Starter adtkb

    (@adtkb)

    Thanks again, but no luck.

    Here is the header.php as I have it now (through the end of the </head> tag.

    <head>
<!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" />
<style type="text/css">
/*<![CDATA[*/
.home.page.page-id-43.page-template.page-template-showcase-php #wrap #content {
        background-color: #FEFEFE;
}
/*]]>*/
</style>
<!--[if lt IE 7 ]> <html class="ie6" xmlns="https://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" > <![endif]-->
<!--[if IE 7 ]>    <html class="ie7" xmlns="https://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" > <![endif]-->
<!--[if IE 8 ]>    <html class="ie8" xmlns="https://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" > <![endif]-->
<!--[if IE 9 ]>    <html class="ie9" xmlns="https://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" > <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>- askbluestone.com</title>
	<!-- //////// Favicon ////////  -->
	<link href="<?php echo get_template_directory_uri(_layout/images/favicon.ico); ?>/favicon.ico" rel="shortcut icon" type="image/x-icon" />

	<script type="text/javascript">
		var themePath = '<?php echo get_template_directory_uri(); ?>';
		var themeCufon = '<?php echo get_option( EWF_SETUP_THNAME.'_cufon', 'true'); ?>';
		var themeSliderTimeout = <?php echo get_option( EWF_SETUP_THNAME.'_slider_timeout', '5000'); ?>;

		var msg_newsletter_error = '<?php echo __('please enter a valid email...', EWF_SETUP_THEME_DOMAIN); ?>';
		var msg_newsletter_label = '<?php echo __('subscribe to newsletter...', EWF_SETUP_THEME_DOMAIN); ?>';

	</script>

	<?php wp_head(); ?>
</head>

    I tried it both like that and with the <head> tag starting before the <style> tag.

    Thanks for working with me on this. This is really the last piece to get this site live.

    Nope, not like that but like this:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--[if lt IE 7 ]> <html class="ie6" xmlns="https://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" > <![endif]-->
<!--[if IE 7 ]>    <html class="ie7" xmlns="https://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" > <![endif]-->
<!--[if IE 8 ]>    <html class="ie8" xmlns="https://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" > <![endif]-->
<!--[if IE 9 ]>    <html class="ie9" xmlns="https://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" > <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><!--<![endif]-->
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" />
<title>- askbluestone.com</title>
<!-- //////// Favicon ////////  -->
<link href="<?php echo get_template_directory_uri(_layout/images/favicon.ico); ?>/favicon.ico" rel="shortcut icon" type="image/x-icon" />

<style type="text/css">
/*<![CDATA[*/
.home.page.page-id-43.page-template.page-template-showcase-php #wrap #content {
        background-color: #FEFEFE;
}
/*]]>*/
</style>

	<script type="text/javascript">
		var themePath = '<?php echo get_template_directory_uri(); ?>';
		var themeCufon = '<?php echo get_option( EWF_SETUP_THNAME.'_cufon', 'true'); ?>';
		var themeSliderTimeout = <?php echo get_option( EWF_SETUP_THNAME.'_slider_timeout', '5000'); ?>;

		var msg_newsletter_error = '<?php echo __('please enter a valid email...', EWF_SETUP_THEME_DOMAIN); ?>';
		var msg_newsletter_label = '<?php echo __('subscribe to newsletter...', EWF_SETUP_THEME_DOMAIN); ?>';

	</script>
<?php wp_head(); ?>
</head>

    Here is a quick tutorial about Doctypes – https://www.w3schools.com/tags/tag_doctype.asp

    -raby

    Thread Starter adtkb

    (@adtkb)

    Raby,

    Thanks so much for the help. That worked! I noticed though that this bit of code is messing it up. It has to do with the “wrap” classification. I fI include this code after the <head> tag, the site still looks perfect in all browsers except IE. If I remove it, the alignment is correct in IE and other browsers, but there is no “wrap” section and the background image.

    Any suggestions on this one?

    <body <?php body_class($class); ?>>
	<div id="wrap">

		<noscript>
			<link href="<?php echo get_template_directory_uri(); ?>/style-nojs.css" rel="stylesheet" type="text/css" />
			<div class="nojs-warning"><strong><?php _e('JavaScript seems to be Disabled!', EWF_SETUP_THEME_DOMAIN); ?></strong> <?php  _e('Some of the website features are unavailable unless JavaScript is enabled.', EWF_SETUP_THEME_DOMAIN); ?></div>
		</noscript>

    the link tag
    <link href="<?php echo get_template_directory_uri(); ?>/style-nojs.css" rel="stylesheet" type="text/css" />
    is not allowed here.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Problem with alignment in IE’ is closed to new replies.