Fixed header not fixed in ie8

HTML & CSS
1

Hi,

I’ve tried searching online for a solution and I’ve checked my Doctype is declared but I still can’t get the header to remain in fixed position in ie8. It works fine in FF, Opera, Safari, etc.

I want the header and footer to remain in place while the rest of the page scrolls, but the whole thing scrolls upward.

I’ve tried different Doctypes but no change. Your help would really be appreciated.

The markup:

<?php
/**
 * Theme header
 *
 * Displays all of the <head> section and everything up until hr under the mainnav
 *
 */
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
 
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php
	/*
	 * Print the <title> tag based on what is being viewed.
	 */
	global $page, $paged;
 
	wp_title( '|', true, 'right' );
 
	// Add the blog name.
	bloginfo( 'name' );
 
	// Add the blog description for the home/front page.
	$site_description = get_bloginfo( 'description', 'display' );
	if ( $site_description && ( is_home() || is_front_page() ) )
		echo " | $site_description";
 
	// Add a page number if necessary:
	if ( $paged >= 2 || $page >= 2 )
		echo ' | ' . sprintf( __( 'Page %s', 'name' ), max( $paged, $page ) );
 
	?></title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="<?php if ( is_single() ) {
										single_post_title('',true);
									} else {
										bloginfo('name'); echo " - "; bloginfo('description'); 
									}
									?>" />
 
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<?php
 
	if ( is_singular() && get_option( 'thread_comments' ) )
		wp_enqueue_script( 'comment-reply' );
?>
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
<!--<![endif]-->
 
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="wp-content/themes/default/ie.css" />
<![endif]-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:700' rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="wp-content/themes/default/site-files/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
 
<!--
 
  Some javascript
 
-->
<?php wp_head(); ?>
</head>
 
<body>
 
 
<!-- Start Wrapper -->
 
<div id="wrapper">
 
<!-- Start fixed -->
 
<div id="fixed">
 
<!-- Start Head -->
 
<div id="head-div">
 
 
 
<img src="wp-content/themes/default/site-images/logo.png" alt=" " border="0" id="logo" />
 
<div id="social-buts">
 
<img src="wp-content/themes/default/site-images/facebook.png" alt=" " border="0" />
 
<img src="wp-content/themes/default/site-images/flickr.png" alt=" " border="0" />
 
<img src="wp-content/themes/default/site-images/vimeo.png" alt=" " border="0" />
 
<img src="wp-content/themes/default/site-images/deviantart.png" alt=" " border="0" />
 
<img src="wp-content/themes/default/site-images/rss.png" alt=" " border="0" />
 
</div>
 
 
<p><span class="tag">WORDPRESS SITE</span><br />
<span class="description">FIRST WORDPRESS SITE</span></p>
 
 
 
<hr />
 
</div>
 
<!-- End Head here -->
 
 
<!-- Start Main Nav -->
 
<div id="mainnav">
 
<ul id="menu" class="dropdown">
	<li><a href="index.html">Home</a></li>
	<li><a href="about.html">About Me</a></li>
	<li><a href="icons.html">Icons</a></li>
	<li><a href="#">Drops</a>
		<ul class="drop">
			<li class="sub">A sub head</li>
			<li><a href="#">Drop one</a></li>
			<li class="sub">Another sub</li>
			<li><a href="#">Drop two</a></li>
 
			<li><a href="./">Drop three</a></li>
		</ul></li>
	<li><a href="#">Contact</a></li>
	<li><a href="blog.html">Blog</a></li>
</ul>
 
	</div>
<!-- End Main Nav -->
<div class="fixed-hr" /></div>
</div>
<!-- End fixed -->
 
<!--  End Header -->
 
<!--  Start page -->
<div id="page">
 
 
<!-- Start Side Nav -->
<div id="side-nav">
 
	<h2>Categories</h2>
		<ul id="filter">
			<li><a href="#port-all">All</a></li>
			<li><a href="#port-photo">Photography</a></li>
			<li><a href="#port-ani">Animation</a></li>
			<li><a href="#port-graphic">Graphic design</a></li>
			<li><a href="#port-web">Web design</a></li>
			<li><a href="#port-logo">Logo Design</a></li>
			<li><a href="#port-clothing">Clothing</a></li>
			<li><a href="#port-print">Print</a></li>
		</ul>
</div>
 
<!-- End Side Nav  -->
 
<!-- Start Portfolio links -->
 
<div id="portfolio">
 
 
		<ul id="port-list">
			<li class="photography"><a class="full_image" id="title-out" 
title="First portfolio image."
 href="site-images/portfolio/photography/fullpic1.png"><img src="site-images/pic1.png" alt=" " border="0" /></a></li>
 
			<li class="photography"><a class="full_image" id="title-in" 
title="portfolio image."
 href="site-images/portfolio/photography/fullpic2.png"><img src="site-images/pic2.png" alt="title-in" border="0" /></a></li>
 
			<li class="animation"><a class="full_image" id="title-over" 
title="portfolio image."
 href="site-images/portfolio/animation/fullpic1.png"><img src="site-images/pic1.png" alt="title-over" border="0" /></a></li>
 
			<li class="animation"><a rel="scroll" class="full_image" 
		title="portfolio image."
		href="site-images/portfolio/animation/fullpic2.png"><img src="site-images/pic2.png" alt=" " border="0" /></a></li>
			<li class="graphic-design"><a rel="scroll" class="full_image" title="portfolio image."
href="site-images/portfolio/graphic-design/fullpic1.png"><img src="site-images/pic1.png" alt=" " border="0" /></a></li>
			<li class="graphic-design"><a rel="scroll" class="full_image" title="portfolio image."
href="site-images/portfolio/graphic-design/fullpic2.png"><img src="site-images/pic2.png" alt=" " border="0" /></a></li>
			<li class="web-design"><a rel="scroll" class="full_image" title="portfolio image."
href="site-images/portfolio/web-design/fullpic1.png"><img src="site-images/pic1.png" alt=" " border="0" /></a></li>
			<li class="web-design"><a rel="scroll" class="full_image" title="portfolio image.."
href="site-images/portfolio/web-design/fullpic2.png"><img src="site-images/pic2.png" alt=" " border="0" /></a></li>
			<li class="empty"><a id="youtube" title="You tube video" href="#">
<img src="#" border="0" alt="you tube video" /></a></li>
 
	<li class="empty"><a id="swf" href="#" title="">
<img src="site-images/swf.png" alt=" " border="0" /></a></li>
		</ul>
</div>
 
<!-- End Portfolio links -->
 
</div>
<!-- End page -->
 
<!-- Start Footer -->
<!-- Start footer -->
 
<div id="footer-home">
<hr class="foot-hr" />
<p id="copyright-home">2011 <span class="bold">ADORNO</span> theme. Left Brain Activity</p>
<p id="host">HOSTED BY: <a href="#">Themeforest.com</a></p>
<hr />
 
</div>	
 
<!-- End footer -->	
 
</div>
<!-- End Wrapper -->
 
<?php wp_footer(); ?>
</body>
</html>

The css:


	{
	margin:				0;
	padding				:0;
	}
 
body
	{background-color:	#fffdf5;
	padding:			0 20px;
	font-family:		Arial, Georgia, 'sans serif';
	font-size:			12px;
	color:				#746b62;
	text-align:			center;
	height:100%;
	overflow:scroll;
	}
 
#wrapper
	{
	width:				965px;
	height:				100%;		
	margin-left:		auto;	
	margin-right:		auto;
	text-align:			left;
	}
 
/* -- Fixed -- */
 
#fixed
	{width:				965px;
	position:			fixed;
	background-color:	#fffdf5;
	z-index:			10;
	margin-top:			-10px;
	padding-top:		20px;}
 
.fixed-hr
	{width:				86%;
	float:				right;
	margin-right:		8px;
	position:			relative;
	top:				7px;}
 
/* -- Head -- */
 
.tag
	{font-family:		'Open Sans', 'Arial Black', Arial, 'sans serif';
	font-size:			12px;
	color:				#746b62;}
 
.description
	{font-family:		Arial, Georgia, 'sans serif';
	font-size:			10px;
	color:				#746b62;}
 
hr
	{border:			0;
	border-top:			solid 1px #746b62;
	clear:				right;
	}
 
#social-buts
	{float:				right;
	position:			relative;
	top:				60px;}
 
/* -- End Head -- */
 
/* -- Main Nav -- */
 
#menu
	{
	margin:				0;
	padding:			0;
	list-style:			none;
	float:				right;
}
 
#menu li {
	float:				left;
	position:			relative;
	margin-right:		20px;
	border-left:		dotted 1px #746b62;
	padding-left:		20px;
}
 
#menu li:first-child
	{
	border-left:		none;
	} 
 
#menu li:last-child
	{
	margin-right:		0;
	} 
 
#menu a {
	display:			block;
	height:				20px;
	text-decoration:	none;
	color:				#746b62;
	position:			relative;
	top:				2px;
}
 
 
#menu a:active {
	text-decoration:	none;
	}
#menu a:hover {
	text-decoration:	underline;
	}
/* -- End Main Nav -- */
 
 
/* -- Dropdown -- */
 
 
ul.dropdown ul {
	visibility: 		hidden;
	position: 			absolute;
	top: 				100%;
	left: 				0;
	z-index: 			15;
	width:	 			100%;
}
 
ul.dropdown li:hover > ul {
	visibility: 		visible;
}
 
 
ul.dropdown ul {
	list-style: 		none;
	margin: 			0;
	padding: 			10px 0 0;
	background-color:	#fffdf5;
	width:				120px;
}
 
 
ul.dropdown ul li {
	padding:			0;
	margin: 			0;
	width:	 			90%;
	height:				30px;}
 
#menu li li {
	border:				none;
	}
 
.sub
	{font-weight:		bold;}
 
/* End Dropdown -- */
 
/* Side Nav */
 
#page
	{position:			absolute;
	top:				150px;
	width:				962px;
	}
 
#side-nav
	{float:				left;
	width:				100px;
	position:			fixed;
	top:				160px;}
 
h2
	{color:				#5598a1;}
 
#filter
	{list-style-type:	none;
	Padding:			0;}
 
 
 
#filter a 
	{color:				#746b62;
	text-decoration:	none;
	}
 
 
#filter a:active 
{
	text-decoration:	none;
	}
#filter a:hover {
	text-decoration:	underline;
	}
/* -- End Side Nav -- */
 
/* -- Portfolio -- */
 
#portfolio
	{width:				840px;
	border:				none;
	float:				right;
	margin-left:		20px;
	margin-bottom:		150px;
	}
 
#port-list	
	{list-style-type:	none;
	padding:			0;
	margin-top:			0;
	}
 
#port-list li
	{float:				left;
	display:			block;
	width:				200px;
	height:				250px;
	background-color:	#000000;
	margin:				0 5px 15px 5px;}
 
 
#port-list li img
	{position:			relative;
	left:				10px;		
	top:				15px;
	width:				180px;
	height:				200px;}
 
#port-list li .empty
	{background-color:	#746b62;}
 
#port-list li:hover
	{background-color:	#ebe9ed;}
 
/* -- End Portfolio -- */
 
/* -- Footer -- */
 
#footer-home
	{width:				965px;
	height:				100%;
	position:			fixed;
	top:				399px;
	background-color:	#fffdf5;
	z-index:			10;
	}
 
#footer
	{clear:				both;
	padding:			40px 0 20px;}
 
.foot-hr
	{width:				86%;
	float:				right;
	margin-right:		8px;
	position:			relative;
	bottom:				6px;}
 
#footer p
	{margin-top:		0;}
 
#copyright-home
	{float:				left;
	margin-left:		120px;}
 
#copyright
	{float:				left;
	}
 
#host
	{float:				right;
	font-size:			14px;}
 
#host a:link
	{color:				#746b62;
	font-weight:		bold;
	text-decoration:	none;}
 
#host a:active
	{text-decoration:	none;}
 
#host a:hover
	{text-decoration:	underline;}

IE specific code:

#social-buts
	{
	position:			relative;
	top:				22px;}
 
 
#head-div p
	{
	margin-bottom:		0;}
 
hr
	{
	border:				none;
	border-top:			solid 0.5 #746b62;}
 
 
.fixed-hr
	{float:				right;
	position:			relative;
	left:				143px;
	width:				85%;}
 
#menu li
	{list-style:		none;
	width:				80px;
	margin:				0;
	display:			inline;}
 
 
ul.dropdown  li ul
	{visibility:hidden;}
 
ul.dropdown  li:hover ul
	{visibility:visible;}
 
#page
	{margin-top:		35px;}
 
h1
	{font-size:			26px;
	margin-bottom:		0;}
h2
	{color:				#5598a1;
	font-size:			20px;
	margin-top:			15px;
	margin-bottom:		0;}
 
#side-nav
	{width:				100px;}
#filter
	{
	margin:0;}
 
#portfolio
	{width:				860px;
	margin:				10px 0 0;
	padding:			0;
	}
 
#port-list li
	{margin:			0 2px 15px;}

As you can see it’s for a wordpress theme and the markup should be 3 files (header.php, page-home.php and footer.php), but I have merged them into for the sake of the post.

Thanks in advance.

Liz.

2

Hi guys,

Thanks so much for your help. I tried ‘view source’ and <!-- Start Header –>
was showing up above the Doctype. (<!-- Start Header –>
is the first line of page-home.php).

So all is working fine now.

Thanks again.
Liz.

3

Or, better yet: when you look at your page, View Source and you’ll be able to see for yourself if there is something before the Doctype. You can copy that and paste it here as well. Then we can also see the real HTML being outputted.

4

Strip it all and just enough to make it fixed. Verify that it works in IE. Then add each piece of the page back in one by one until you find the culprit.

5

Hi,

Thanks for the responses. I removed the php before the doctype but no change. I also tried removing a few unnecessary php lines from the head tag.
Do you know what else could be causing it to go into quirks mode?

6

Yes if you have any comments or unparsed php code above the doctype then IE8 will revert to quirks mode and in quirks mode it doesn’t understand fixed positioning.

7

Just a quick update, I tried a static html version of the page and the fixed position works fine. So it seems something with the wordpress/php is interfering with it.

Any suggestions?

Thanks.

8

Well, one thing I noticed is that you have a PHP tag before the doctype. That could make that the browsers are sent into quirks mode, in which mode IE can act very differently from the standards-compliant browsers.

9

No it’s not online yet. I’m still testing on wamp.

10

Liz,

Do you have matters online? That would make it much easier for us to help. For one thing, the PHP output becomes clear, which can make all the difference, and it’s easier to see which element has which ID or class and which are (in)correctly nested elements.

11

It still sounds like you are tripping quirks mode. Run the page in Firefox and check with the weddevtoolbar under page information and check what mode you are running in which may help narrow the problem down.

Otherwise do as Eric suggests with minimal test cases.

Or put in online for us and we will fix it in minutes :slight_smile:

12

Thanks for your input deathshadow60, I’ll take a look through the code.

We all have to start somewhere.

13

I’ll just list what I’m seeing for issues – some of these could be causing your problems, some may not but should be fixed anyways.

  1. STOP opening and closing PHP willy-nilly like that. It’s called echo – use it.

  2. lose ALL the ID conditional nonsense for stylesheets – if you ‘have’ to do that there is something fundamentally flawed with your CSS and/or layout.

  3. Remove most of your comments/ and/or move them to where they will NOT trip IE rendering bugs; if comments end up between floats or apo/fixpo elements they can cause content to dissapear, render twice, or have oddball top paddings in IE and some versions of Firefox. I’ve yet to see the behavior in 4.x+, but with Mozilla you never know when a code regression will tell your layout “gee, you sure got a purty mouth…”

  4. Try using a MODERN doctype instead of being in transition from 1997 to 1998.

Admittedly though, this appears to be a turdpress template, and given what it vomits up for invalid HTML you might be better off sticking with tranny – and any of it’s half-assed idiotic output could be messing with you given that the people who wrote wordpress don’t know enough HTML or CSS to code their way out of a piss soaked paper bag with a hole in the bottom.

Which is why as mentioned, we’d really need to see it live somewhere so we can see the FULL output of the page to diagnose it any further.