Last night, I experienced a strange behavior in IE8 as I saw two noticeably different layouts of a page that's being hosted on separate servers. On my local web server, the header markup looked as expected with its left aligned logo and right aligned and stacked utility links, all of which displayed on a centered page. On a staging web server and a production web server, the header markup was completely invisible on the page, as it was positioned 152px higher than the page.
I understand that the ".header .hog" selector CSS code below is a hack. It was a quick fix for changes that needed to get deployed immediately. Rather than analyzing how to improve this code, I'm more interested in knowing the cause(s) of these presentation differences in IE8. A few question that I have are:
- Could the markup have different encoding? If so, what is the best way in determining this possibility? And, which setting, if any, in IIS7 is responsible for encoding output?
- Could permissions be the cause of this problem?
- Is there a feature in IIS7 that determines whether or not the markup is strictly interpreted?
- Is there a difference between the Layout Engines of IE8 on Vista and IE8 on XP?
My markup code is as follows:
<body>
<div class="content">
<div class="header">
<h1 id="logo"><img src="/img/logo.jpg" /></h1>
<div class="hog">
<a class="see">Text</a>
<div class="more">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="utility-links">
<a>link1</a>|
<a>link2</a>|
<a>link3</a>|
<a>link4</a>
</div>
<div class="clear"></div>
</div>
</div>
</body>
My CSS code is as follows:
* {
border:none;
line-height:normal;
margin:0;
outline:none;
padding:0;
text-decoration:none;
}
body{
background:#70133F;
color:#000000;
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size:12px;
margin:0 auto;
}
.clear{
clear:both;
font-size:0;
height:0;
line-height:0;
margin:0;
padding:0;
}
.content{
background:#FFFFFF;
margin:0 auto;
width:970px;
}
.header{
height:160px;
}
.header #logo{
float:left;
font-size:0;
height:124px;
margin:25px 0 0 18px;
width:204px;
}
.header .util-links {
color:#E83F00;
font:bold 12px;
float:right;
margin:135px 15px 0 0;
text-align:right;
text-transform:uppercase;
}
.header .util-links a {
padding:0 10px;
}
.header .hog {
height:3px;
position:relative;
margin-top:-152px;
text-align:right;
width:945px;
}
.header .hog a.see-holiday {
color:#E83F00;
font:bold 12px;
text-transform:uppercase;
height:40px;
width:254px;
}
.header .hog .guidelines {
display:none;
margin-left:524px;
text-align:left;
width:428px;
}
Thanks for the help. Happy Thanksgiving, everyone!
John