My layout is fine in Firefox, but totally messed up in IE. How do I fix this?!

  • Resolved jeffwenberg

    (@jeffwenberg)


    15 years, 1 month ago

    the website is https://www.jeffwenberg.com. In firefox everything looks great and is lined up perfectly. In IE everything is all jacked up. My menu bar is right through the middle of the header, and the main content is pushed way down the page, and the right sidebar isn’t aligned right. I have no idea how to fix this. Any ideas? This is probably very basic to a lot of you, but I don’t have a ton of knowledge in this area. Please help! Thanks in advance!

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

  • Hey Jeff,

    IE is notorious for playing nasty with CSS. If you google ‘CSS Internet Explorer bugs’ or something similar you should find some good info. Also, try googling ‘float based layouts’ – I had a quick peek at your CSS and it appears that many elements within your design have not been floated, which may be causing some of the problems. From what I’ve read about CSS, it’s generally a good idea to float every element.

    IE is difficult to work with CSS wise, but the major problem is that it looks like you edited header.php in your theme and removed the doctype declaration as well as other preliminary code that tells browsers what to do with the page. That in particular throws IE for a loop. Your validation report shows the errors. Did you write the theme from scratch or adapt another theme?

    Thread Starter jeffwenberg

    (@jeffwenberg)

    I adapted another theme, and could have definitely deleted that not knowing what it was. Is there anyway to fix it? Thanks so much for taking a look for me!

    Try and get a fresh copy of the theme you adapted and compare header.php files between that and what you’ve got now. The original theme’s header.php has the standard wordpress code, but also may include code that you need for the theme in particlaur.

    Thread Starter jeffwenberg

    (@jeffwenberg)

    Thanks! I’ll definitely look into that. Thanks so much for your time thus far. It’s greatly appreciated!

    Sure; post back on what you find out.

    Thread Starter jeffwenberg

    (@jeffwenberg)

    I looked and I didn’t seem to find anything that differed. I actually repasted the code from the original in and it didn’t do anything. Any other ideas? I’m so lost.

    Paste your header.php here using the code button so it formats OK.

    Thread Starter jeffwenberg

    (@jeffwenberg)

    <head>

<title>The Official Home of Jeff Wenberg & The Mighty Others

</title>

<meta http-equiv="Content-Type" content="The Official Homepage of Jeff Wenberg & The Mighty Others. Music, Tour Dates, Store, Downloadable Music, Photos" />
<meta name="keywords" content="aj mills, blues rock music, bruce mccabe, independent music, jeff wenberg & the mighty others, jeff wenberg nashville, live rock music, nashville rock bands, nashville rock music, original rock music, rock and roll music, rock music in nashville, rock music nashville,the black crowes, the black crows, aerosmith, lenny kravitz, jeff weinberg, jeff wenburg, jeff weinburg, Tales From 1875, Right From The Start, Jeff Wenberg Nashville Tn, Live band nashville>" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>
<?php
if (is_home()) {
	echo bloginfo('name'); echo ": "; echo bloginfo('description');
} elseif (is_404()) {
	echo '404 Not Found';
} elseif (is_category()) {
	echo 'Topics:'; wp_title('');
} elseif (is_search()) {
	echo 'Search Results';
} elseif (is_day() || is_month() || is_year() ) {
	echo 'Archives:'; wp_title('');
} else {
	echo wp_title('');
	$subtitle = get_post_meta($post->ID, 'Subtitle', $single = true);
	if($subtitle !== '') { echo ': ' . $subtitle; }
} ?>
</title>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="robots" content="all" />
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<meta http-equiv="author" content="Jeff Wenberg" />
<meta http-equiv="contact" content="https://www.jeffwenberg.com/contact/" />
<meta name="copyright" content="Copyright (c) 2009-<?php echo date("Y",time()); ?> Jeff Wenberg  All Rights Reserved." />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<?php
/***Do not Edit it***/
wp_head();
	global $options;
	foreach ($options as $value)
	{
		if (get_settings( $value['id'] ) === FALSE)
		{
			$$value['id'] = $value['std'];
		}
		else
		{
			$$value['id'] = get_settings( $value['id'] );
		}
	} 

	global $link_privacy,$link_terms;
	$link_privacy=$mt_ice_link_privacy;
	$link_terms=$mt_ice_link_terms;
/*** End of Do not Edit Restriction***/
?>
</head>
<body>
<div id="content">
<div id="back">
<!-- header begins -->
<div id="header">
	<div id="logo">
                <h1><a href="<?php bloginfo('url'); ?>"><?php echo bloginfo('name'); ?></a></h1>
		<h2><?php bloginfo('description'); ?></h2>

	</div>
         <div id="menu">
		<?php include (TEMPLATEPATH . '/main-nav.php'); ?>
	</div>
</div>
<!-- header ends -->

    You got ahead of yourself adding meta into the header.php. WordPress adds all default meta automatically; if you want more, use a plugin like All in one SEO. You can add some meta yourself, but check your page source and your page validation to make sure you’re doing it right.

    This is what header.php should look like:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>
<?php
if (is_home()) {
	echo bloginfo('name'); echo ": "; echo bloginfo('description');
} elseif (is_404()) {
	echo '404 Not Found';
} elseif (is_category()) {
	echo 'Topics:'; wp_title('');
} elseif (is_search()) {
	echo 'Search Results';
} elseif (is_day() || is_month() || is_year() ) {
	echo 'Archives:'; wp_title('');
} else {
	echo wp_title('');
	$subtitle = get_post_meta($post->ID, 'Subtitle', $single = true);
	if($subtitle !== '') { echo ': ' . $subtitle; }
} ?>
</title>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<?php
/***Do not Edit it***/
wp_head();
	global $options;
	foreach ($options as $value)
	{
		if (get_settings( $value['id'] ) === FALSE)
		{
			$$value['id'] = $value['std'];
		}
		else
		{
			$$value['id'] = get_settings( $value['id'] );
		}
	} 

	global $link_privacy,$link_terms;
	$link_privacy=$mt_ice_link_privacy;
	$link_terms=$mt_ice_link_terms;
/*** End of Do not Edit Restriction***/
?>
</head>
<body>
<div id="content">
<div id="back">
<!-- header begins -->
<div id="header">
	<div id="logo">
                <h1><a href="<?php bloginfo('url'); ?>"><?php echo bloginfo('name'); ?></a></h1>
		<h2><?php bloginfo('description'); ?></h2>

	</div>
         <div id="menu">
		<?php include (TEMPLATEPATH . '/main-nav.php'); ?>
	</div>
</div>
<!-- header ends -->
    Thread Starter jeffwenberg

    (@jeffwenberg)

    should I just copy the above and repaste that in the header? What about the Title and all that stuff?

    This block of code:

    <title>
<?php
if (is_home()) {
	echo bloginfo('name'); echo ": "; echo bloginfo('description');
} elseif (is_404()) {
	echo '404 Not Found';
} elseif (is_category()) {
	echo 'Topics:'; wp_title('');
} elseif (is_search()) {
	echo 'Search Results';
} elseif (is_day() || is_month() || is_year() ) {
	echo 'Archives:'; wp_title('');
} else {
	echo wp_title('');
	$subtitle = get_post_meta($post->ID, 'Subtitle', $single = true);
	if($subtitle !== '') { echo ': ' . $subtitle; }
} ?>
</title>

    pulls the title directly from your settings in WordPress. Adding your title manually – and anything else – will screw things up.

    Use the full code that I pasted above an hour ago for header.php.

    Thread Starter jeffwenberg

    (@jeffwenberg)

    Sweet! That did it. Thank you so much for taking the time to walk me through this! If you’re interested in some good tunes, I’ll send you a link to download my newest disc as a thank you for helping me. If not, I greatly appreciate your help! Thanks so much!

    Cool. Glad to get it all to work right.

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘My layout is fine in Firefox, but totally messed up in IE. How do I fix this?!’ is closed to new replies.