IE decides to render two different appearances on two different pages for my client's navigation bar and login block. They include the same header.php file, and the IE stylesheet is called after the main. I'm stumped, the markup is the same but the homepage isn't rendering all of the header styles it should be rendering, whereas the other pages are. The same CSS files are included. Works beautifully in Gecko / Webkit. I made a temporary fix for the nav, but the login form is uncontrollable.

 

Home page: http://www.skinmagento.com/turnpage/online-interactive-publications/index.php

An Inner page: http://www.skinmagento.com/turnpage/online-interactive-publications/blog

 

PHP / XHTML:

<div id="header">

<div id="phone">(877) 808-TURN (8876)</div>
<div id="logo"><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('template_url') ?>/images/logo.jpg" alt="Turn-Page" /></a></div>
<div id="navcontainer">

<ul id="nav">
<li><a href="products_overview.php">Products</a>
<ul>	
<li><a href="<?php bloginfo('siteurl')?>/products_basic_features.php" class="fade">Basic Features</a></li>
<li><a href="<?php bloginfo('siteurl')?>/products_advanced_features.php" class="fade">Advanced Features</a></li>
<li><a href="<?php bloginfo('siteurl')?>/products_statistics.php" class="fade">Statistics</a></li>
<li><a href="<?php bloginfo('siteurl')?>/products_market.php" class="fade">Market</a></li>
</ul>
</li>
<? wp_list_pages('title_li=&depth=1&include=104, 5, 7, 9, 11, 13'); ?>
</ul>

</div><!-- nav -->
<div id="login">
<form action="http://digital.turn-page.com/users/login" method="post">
<p class="loginpara">
<label for="user" class="overlabel" id="labeluser">Username:</label>
<input type="text" id="user" name="data[user][username]" />
</p>
<p>
<label for="pass" class="overlabel" id="labelpass">Password:</label>
<input type="password" id="pass" name="data[user][password]" />
</p>

<input type="image" id="theloginbtn" value="submit" alt="Login" src="<?php bloginfo('template_url')?>/images/loginbtn.jpg"  />
</form>
</div>
</div><!-- header -->

 

CSS:

#header {width: 100%; height: 74px; margin: 0; text-align: left; margin-bottom: 5px; position: relative;}
#header #logo {float: left}

#nav {height: 30px; width: 458px; float: left; margin: 25px 5px 0 0; }
#nav ul {float: left; padding-top: 0; margin-top: 5px; padding-left: 5px;}

#nav li {
display: inline; 
float: left; 
margin-left: 3px; 
height: 16px; 
text-align: center; 
font-size: 1em; 
background: url('images/nav-bg.jpg') repeat-x top; 
border: 1px solid #aaa; 
width: 47px; 
padding: 9px 5px; 
text-align: center;}

#nav li a {
display: block; 
height: 100%; 
width: 100%;
font-size: 1em; 
color: #6d6d6d; 
font-weight: bold;}

#nav li ul {
display: block; 
position: absolute; 
left: -999px; 
margin-top: -30px; 
width: 13em; 
height: auto; 
margin-left: 0px; 
padding: 2px 2px 15px; 
z-index: 999;}

#nav li:hover ul, #nav li.sfhover ul {
z-index: 999;
left: auto; 
top: 82px;
background-color: #eee; 
border: 1px solid #ddd;}

#nav li li {border: none; 
float: none; 
margin: 0 0 0 4px; 
display: block; 
padding: 2px; 
height: 15px; 
background-image: none;
color: black;
z-index: 999; 
width: 100%; 
list-style-type: none;}

#nav li li a {font-weight: normal; color: #efe09c; font-size: 1.2em; text-align: left; display: block; background-image: none; width: 100%; height: 100%; color: black; cursor: pointer;z-index: 999;}

#login {
float: left; 
height: 31px; 
background: url('images/login-bg.jpg') repeat-x;
border: 1px solid #aaa; width: 218px; 
padding: 0 10px 8px 0; 
text-align: right; 
margin-top: 24px; 
position: relative;}

#login form input {
width: 70px; 
height: 15px; 
display: block; 
float: left; 
margin: 6px 4px 0 7px;}
#login form input[type="image"] {width: 23px !important; height: 23px;}
#login p {position: relative;}
#login p label#labeluser {left: 15px; top: 6px}
#login p label#labelpass {left: 100px; top: 6px}

 

IE-only styles:

#nav {height: 30px; width: 478px; float: left; margin: 25px 1px 0 0; }
#nav li {width: auto !important; width: 40px; padding: 9px 8px;}
#nav li.page-item-7, #nav li.page-item-11 {width: 70px;}

#login {padding-left: 5px; width: 210px; margin-right: 0; height: 30px;}
#login form input {float: left; display: block; padding-top: 5px; margin-top: 15px; height: 12px}
#login form input#theloginbtn {width: 23px; height: 23px; float: left; display: inline;}
#login p label#labeluser {left: -170px; top: 12px}
#login p label#labelpass {left: -70px; top: 12px}

 

Thanks!

Very simple! When everything seems to be the same with CSS or markup, look elsewhere for the problem.

 

The first place I looked was the doctype, thinking that it might be missing or incomplete, but it is correct.

 

However, the index (home) page has this above the doctype:-

<!--

Template Name: Homepage

-->

 

IE doesn't like anything there (it disables the doctype and IE worksd in quirks mode) and the blog page doesn't have it, so I deleted it and the index page showed properly (delete any line space above the doctype as well).

 

Put that comment below the doctype.

Very simple! When everything seems to be the same with CSS or markup, look elsewhere for the problem.

 

The first place I looked was the doctype, thinking that it might be missing or incomplete, but it is correct.

 

However, the index (home) page has this above the doctype:-

<!--

Template Name: Homepage

-->

 

IE doesn't like anything there (it disables the doctype and IE worksd in quirks mode) and the blog page doesn't have it, so I deleted it and the index page showed properly (delete any line space above the doctype as well).

 

Put that comment below the doctype.

 

Oh wow, I would have never thought of that! Switched it to below the doctype and it's working smoothly. Thanks a million!