IE8 trouble (z-index, positioning...)

ds_bespoke · 10-16-2012, 02:30 PM

I'm having some trouble getting my website to display properly in Internet Explorer.
Here's my site in Firefox. Everything looks exactly like I want it.

My site actually displays two different way in IE8. Positioning is wrong for multiple divs. The dropdown menu (which has a z-index of 999) is underneath the next div's background and the list items are sized independently. When it first loads, everything is shifted all the way to the left of the screen.

However when the page is refreshed, everything is centered but there's still problems.

This is the HTML

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
	<title>Bespoke Hospitality Group</title>
	<link rel="stylesheet" type="text/css" href="main.css" title="Default Styles" media="screen">
</head>
<body>
	<div class="header">
		<a href="index.html"><img src="logoBHG.jpeg" alt="logo"></a>
	</div>
	
	<div class="menu">
		<ul id="nav">
			<li>
				<a href="index.html">Home</a>
			</li>
		
			<li>
				<a href="about.html">About Us</a>
				
				<ul class="dropdown">
					<li><a href="about/gregory-roberts.html">Gregory Roberts</a></li>
					<li><a href="about/philip-santini.html">Philip Santini</a></li>
				</ul>
			</li>
			
			<li>
				<a href="services.html">Services</a>
		
				<ul class="dropdown">
					<li><a href="services/home-and-estate.html">Home and Estate Management</a></li>
					<li><a href="services/housekeeping.html">Housekeeping and Property Management</a></li>
					<li><a href="services/staff-oversight.html">Staff Oversight</a></li>
					<li><a href="services/secondary-home.html">Secondary Home Arrangements</a></li>
					<li><a href="services/event-planning.html">Event Planning and On-site Execution</a></li>
					<li><a href="services/property-management.html">Property Management</a></li>
				</ul>
		
			</li>
			
			<li>
				<a href="contact.html">Contact</a>
			</li>
			
			<li>
				<a href="acknowledgments.html">Acknowledgments</a>
			</li>
		</ul>
	</div>
	
	<div class="content" id="home">
		
	</div>
	
	<div class="lower">
		<div class="left">
			<p>Welcome!</p>		
		</div>
		
		<div class="right">
			<p>Bespoke Hospitality Group (BHG) is a hospitality management company offering a full range of customizable services
			in Home and Estate Management, Housekeeping and Property Maintenance, Staff Oversight, Secondary Home Arrangements, 
			Event Planning and On-site Execution, and Property Management.</p>		
		</div>
	
	</div>	
	
	<div class="footer">
		<p>Bespoke Hospitality Group &copy 2012 | <a href="privacy.html">Privacy Policy</a></p>
	</div>
	
</body>
</html>

And this is the CSS

Code:

/********************GLOBAL PROPERTIES************************/
body {
	width: 930px;
	margin-left: auto;
	margin-right: auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8125em;
}

img {
	border: none;
}

/***********************DROPDOWN MENU**************************/
.header {
	margin-bottom: 10px;
}

.menu {
	width: 100%;
	height: 56px;
	margin-bottom: 20px;
	font-size: 0.8125em;
	float: left;
	background-color: #242021;
}

#nav {
	position: relative;
	top: -11px;
	left: -40px;
}

.menu li {
	list-style: none outside none;
	float: left;
	margin-right: 0px;
	position: relative;
	font-size: 15px;
	line-height: 1.2307em;
	text-transform: uppercase;
	padding: 14px 20px 14px 19px;
	background-color: #242021;
}

.menu li:hover {
	background-color: #66bec8;
}

.menu a {
	display: inline-block;
	padding: 5px;
	width: 100%;
	outline: medium none;
	text-decoration: none;
	color: #fff;
}

.menu a:hover {
	text-decoration: none;
}

.menu ul {
	position: absolute;
	left: -9999px;
}
.menu li:hover ul {
	left: -40px;
	top: 54px;
}

.dropdown a {
	white-space: nowrap;
}

.dropdown li {
	padding:0.5em;
	width: 100%;
	font-size: 12px;
	z-index: 2;
}

/*************************MAIN BODY******************************/
.content {
	width: 100%;
	height: 450px;
	border-top: 1px solid white;
	position: relative;
	top: 70px;
	z-index: 1;
}

/**********************BACKGROUND IMAGES*************************/
#home {background-image: url('homeBG.JPG');}	/*default*/

/*************************INDEX BOTTOM DIV************************/
.lower {
	width: 100%;
	height: 90px;
	background-color: #242021;
	position: relative;
	top: 70px;
}

.left {
	width: 20%;
	height: 100%;
	float: left;
	border-right: 2px solid white;
}

.left p {
	color: #c8e4e8;
	text-align: center;
	font-size: 30px;
}

.right {
	width: 77%;
	float: left;
	color: white;
	padding-left: 20px;
	padding-top: 6px;
}

/*************************GLOBAL FOOTER*****************************/
.footer {
	width: 100%;
	height: 20px;
	margin-top: 20px;
	position: relative;
	top: 70px;
}

.footer p {
	position: relative;
	top: -10px;
	padding-left: 20px;
	color: black;
}

.footer a {
	color: black;
	text-decoration: underline;
}

I need help. I can't figure out what's causing IE to display my page this way.

ds_bespoke · 10-16-2012, 04:35 PM

Fixed problem using clumsy <!--[if gte IE 7]> comment in header. Really wanted to avoid this but had no choice. When page first loads, it is still shifted left. After refresh or if I click on a link, everything is centered thereafter. Any ideas what's going on here.

jamaks · 10-16-2012, 05:37 PM

Hi, you could make it a bit more stable by wrapping the page within a container division and then minimising the effect of the viewport in older versions of IE by removing any margin or padding.

Code:

body {font-family: Arial, Helvetica, sans-serif;font-size: 0.8125em;text-align:center;}
*{margin:0;padding:0;border:0;}
#wrapper{width:930px;margin:auto;overflow:auto;}

The wrapper division opening tag comes immediately after the body opening tag and is closed immediately before the closing body tag. Since your text align is now centered by default you can add in the instruction to left align when required. ie

Code:

.right p{text-align:left;}

Hope this guides you in the right direction. Jim