Problem with IE

**BTC** · Apr 11, 2011 05:41

I'm rebuilding this a website for a local club and I have encountered some problems with IE. The site looks good in Firefox (except the navigation bar). When I visit in IE, the right column overlaps the left column?

Also I cannot figure out how to center the navigation bar in the left column in firefox?

Any help is appreciated!!

Link:
Windsor Yacht Club

HTML

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<meta http-equiv="imagetoolbar" content="no" />
	<meta http-equiv="Content-Language" content="en" />
	<title>Windsor Yacht Club</title>
	<meta name="description" content="The Windsor Yacht Club is the friendliest Little Yacht Club on the Great Lakes." />
	<meta name="keywords" content="windsor yacht club, yacht club, club, windsor, great lakes, boat, boat, dining" />

	<link rel="stylesheet" type="text/css" href="css/style.css" media="screen,projection,tv" />
	<link rel="stylesheet" type="text/css" href="css/screen.css" media="screen,projection,tv" />
	<!--[if IE]><link rel="stylehseet" type="text/css" href="css/ie.css" /><![endif]-->
</head>

<body>
	<div id="Parent">
		<div id="Parent_Left">
			<div id="Parent_Left_Content">
				<p><img src="graphics/wyc.jpg" alt="The Windsor Yacht Club" width="130" height="130" /></p>
				<p class="slogan">The Friendliest Little<br />Yacht Club on the<br />Great Lakes</p>
				<hr class="left_column" />
				
				<!-- Navigation Bar --><ul id="nav">
				<li><a href="#">HOME</a></li>
				<li><a href="#">CLUB INFORMATION</a></li>
				<li><a href="#">DINING</a></li>
				<li><a href="#">RACE</a></li>
				<li><a href="#">VISITORS</a></li>
				<li><a href="#">MEMBERSHIP</a></li>
				<li><a href="#">CLUB EVENTS</a></li>
				<li><a href="#">HERITAGE</a></li>
				<li><a href="#">CONTACT US</a></li>
				</ul><!-- End Navigation Bar -->
				<hr class="left_column" />
				
				<div class="directions">
				<p><span>Latitude:</span> 42 20 29 N</p>
				<p><span>Longitude:</span> 82 56 00 W</p><br />
				<p><span>Phone:</span> (519) 945-1863</p><br />
				<address>9000 Riverside Drive East<br />Windsor, Ontario, Canada<br />N8S 1H1</address>
				</div>
				<br />
			</div>
		</div>

		<div id="Parent_Right"><div class="footer_border"><div id="Corner_Left"><div id="Corner_Right">
			<div id="Parent_Right_Content">
				<h1>Windsor Yacht Club</h1>
				<hr class="header" /><br />
				<p><img src="graphics/wycwater.jpg" alt="Windsor Yacht Club from Water" /></p><br />
				<p>Established in 1937 and having been completely renovated in the early 2001, the Club is located at the mouth of the Detroit River. With Peche Island providing a scenic background and Lake St Clair minutes away, WYC is a gathering place for avid boaters. It is also one of Windsor's most prestigious social venues with a spectacluar bar and patio and an outstanding galley. Enjoying a reputation for warm hospitality, world-class boating and outstanding dining, Club members and guests value and respect this tradition of the Friendliest little yacht club on the Great Lakes</p><br /><br />
				<h2>What's New</h2>
				<ul id="whatsnew">
					<li><a href="#">Upcoming Events</a></li>
					<li><a href="#">Daily Specials</a></li>
					<li><a href="#">Take Out Menu</a></li>
				</ul>
				<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />	
			</div>
		</div></div></div><div id="Footer">Copyright &copy; 2010 - Windsor Yacht Club - All rights reserved - Designed by Joshua Jorgensen</div></div>
	</div>
</body>
</html>

CSS

Code:

/* Universal Styles */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}
img,fieldset{border:none}
a{cursor:pointer}

/* Document Structure */
	html{height:100%; cursor:default}
	body{background:#ffffff; cursor:default; height:100%; verdana,kalimati,sans-serif; color:#000}

	#Parent{width:960px}

	#Parent_Left{background:#003366; position:fixed; display:table; float:left; width:200px; height:100%}
	#Parent_Left_Content{text-align:center; display:table-cell; vertical-align:top; padding:10px 10px}

	#Parent_Right{float:right; position:relative; width:750px; border-top:#003366 solid 50px; border-right:#003366 solid 10px}
	#Parent_Right_Content{margin:0px 10px 100px 10px; padding:50px 25px; z-index:1; text-align:left}
	
	#Footer{font:12px "Trebuchet MS", sans-serif; line-height:20px}
	
	/* Corner Images */
	#Corner_Left{background:transparent url(../graphics/cl.jpg) no-repeat top left}
	#Corner_Right{background:transparent url(../graphics/cr.jpg) no-repeat top right}
	
	/* Lines & Borders */
	hr.header{line-height:20px; border-bottom:groove 1px #0C005F}
	hr.left_column {border-bottom:groove 1px D8D8D8; margin:15px 0px}
	div.footer_border{border-bottom:#003366 solid 10px}
	
	/* Directions */
	div.directions {margin-bottom:20px; color:#D8D8D8; text-align:left}
	div.directions span {font-weight:bold; color:#fff}
	div.directions address{font:15px 'Arial',Helvetica,sans-serif}

/* Text */
	h1{font:bold italic 23pt/19pt 'Georgia',serif; color:#0C005F; margin:0px 0px 20px 0px}
	h2{font:20pt/16pt 'Georgia',serif; color:000; margin:0px 0px 30px 0px}
	h3{font:18pt/15pt 'Georgia',serif; color:#003366; margin:0px 0px 20px 0px}
	
	.slogan {color:#fff; font-style:italic}
	
/* Links */
	#whatsnew, #whatsnew ul{
		width:100%; 
		margin:0; padding:0; 
		list-style-type:none; list-style-position:outside; 
		position:relative; 
		line-height:25px;
	}
	#whatsnew li{display:inline; margin-right:25px}
	#whatsnew a{
		background:#0C005F;
		text-align:center; text-decoration:none;
		padding:7px;  
		color:#fff; 
		border:#A3C1FF solid 3px
		-webkit-border-radius:3px;
		-moz-border-radius:3px;
		border-radius:3px;
		-webkit-box-shadow:#666 0px 2px 3px;
		-moz-box-shadow:#666 0px 2px 3px;
	}
	#whatsnew a:visited{color:#fff}
	#whatsnew a:hover{background:#FDD017; color:#003366}

CSS - IE

Code:

/* Document Structure */
	html{height:100%}
	body{background:#ffffff; cursor:default; height:100%; verdana,kalimati,sans-serif; color:#000}

	#Parent{width:960px}

	#Parent_Left{background:#003366; position:fixed; display:table; float:left; width:200px; height:100%}
	#Parent_Left_Content{display:table-cell; text-align:center; vertical-align:top; padding:10px 10px}

	#Parent_Right{float:right; position:relative; width:750px; border-top:#003366 solid 50px; border-right:#003366 solid 10px}
	#Parent_Right_Content{margin:0px 10px 100px 10px; padding:50px 25px; z-index:1; text-align:left}
	
	#footer{font:12px "Trebuchet MS", sans-serif; line-height:20px}

/* Links */
	#whatsnew, #whatsnew ul{
		width:100%; 
		margin:0; padding:0; 
		list-style-type:none; list-style-position:outside; 
		position:relative; 
		line-height:25px;
	}
	#whatsnew li{display:inline; margin-right:25px}
	#whatsnew a{
		background:#0C005F;
		text-align:center; text-decoration:none;
		padding:7px;  
		color:#fff; 
		border:#A3C1FF solid 3px
		border-radius:3px;
		box-shadow:#666 0px 2px 3px;
		behavior:url(css/PIE.htc);
	}
	#whatsnew a:visited{color:#fff}
	#whatsnew a:hover{background:#FDD017; color:#003366}

User Tag List

Thread: Problem with IE

Thread Tools

Display

Threaded View

Problem with IE

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions