Small Safari Issue...

[glopal]

The website is now fully operational in IE678, firefox, and chrome. But I noticed the content div isnt right in safari.FIREFOXSAFARICSS

body{	margin: 0;	padding: 0;	background-color:#E8E8E8;	text-align:center;}#bg{	width: 100%;	position: absolute;	top: 0;	left: 0;	z-index:1;	height:40%;}#container{	font-size:95%;	background-color:#e4eaf2;	background-image:url('../images/navBG.gif');	background-repeat:repeat-y;	margin-left: auto;	margin-right: auto;	margin-top:10px;	width:80%;	position:relative;	min-width:650px;	max-width:1120px;	text-align: left;	border: 2px solid #000;	z-index:2;}#banner{	position:relative;	background-image:url('../images/banner.jpg');	background-repeat:no-repeat; 	background-position:right;	overflow:hidden;	margin:0;	padding:0;	height:172px;}#banner a.logo{	display: block; 	overflow: hidden; 	width: 100%;}#topmenu{	height:20px;	position: relative;	padding:0 7px 0 7px;	margin:0;	margin-top:-22px;	float:right;	background-color:#000097;	color:#fff;	font-family: Tahoma,Arial,sans-serif;	border-bottom:2px solid black;}#topmenu a{	color: white;	text-decoration: none;}#topmenu a:hover{	text-decoration:underline;}#topmenu a:visited{	color: white;}#textsize a{	color: black;	text-decoration: none;	font-weight:bold;}#textsize a:hover{	text-decoration:underline;}#textsize a:visited{	color: black;}#content{	padding-top: 20px;	overflow:hidden;	margin: 0 30px 30px 200px;	height:1%; /*Fixes Dimensional Bug in IE6*/}#content p,ul,div,span{	margin-top:8px;	font-family: Tahoma,Arial,sans-serif; }#content h4{	font-family: Tahoma,Arial,sans-serif; 	color:#FFF;	background-color:#000097;	text-align:left;	margin:0;	padding-left:8px;	padding-right:8px;	height:20px;	display:inline;	}#content h2{	font-family: Tahoma,Arial,sans-serif; 	color:#000097;	text-align:center;	border-bottom: 1px solid #000097;	border-top: 1px solid #000097;	margin-top:0px;}#content .pane1{	margin:0px;	padding:1px 0px;	float:left;	width:47%;	margin-right:3%;	height:1%; /*Fixes Dimensional Bug in IE6*/}#content .pane2{		padding:1px 0px;	margin:0px 0px 0px 50%;	height:1%; /*Fixes Dimensional Bug in IE6*/	}#content .clearBoth{	clear:both;}#content .clearLeft{	clear:left;}#content .clearRight{	clear:right;}.bordered{	border:1px solid #000097;	margin:0px;	padding:10px;	margin-bottom:20px;}.bordered h4{	display:block;	margin: -10px -10px;}.thickborder{	border:4px solid #000097;	margin:0px;	margin-bottom:20px;	padding:5px;}.right{	text-align:right;}.center{	text-align:center;}#new{	font-weight:bold;	color:red;	display:none;}#nav{	float: left;	position:relative;	z-index:20;	width: 180px;	margin: 10px;	display: inline; /*IE6 Double Margin bug fix*/	padding-top: 10px;	padding-bottom: 10px;}#footer {	margin:0;	padding:0;	height:55px;	width:100%;	position:relative;	clear:both;	background:#cc9;	border-top: 2px solid #000;}#footer #left{	margin:0;	padding:0;	position:absolute;	left:0;	top:2px;}#footer #right{	margin:0;	padding:0;	padding-right:10px;	position:absolute;	right:0;	top:50%;	margin-top:-0.25em;}#footer p{	font-family:Tahoma,Geneva,Kalimati,sans-serif;	font-size:10px;	color:#202020;	margin:0;}div.img{  margin:10px;  margin-bottom:20px;  height: auto;  width: auto;  text-align: center;}div.img.r{	float: right;}div.img.l{	float: left;}div.img.c{	margin-left: auto;	margin-right: auto;}div.img img{  display: inline;  margin: 3px;  border: 1px solid #e4eaf2;}div.img a:hover img {border: 1px solid #000097;}div.desc{  font-family: Tahoma,Arial,sans-serif;   text-align: center;  font-size:10px;  margin: 2px;}a img{	border:0;}/* Nested Vertical Menu */.sidebarmenu{	zoom:1;}.sidebarmenu ul{margin: 0;padding: 0;list-style-type: none;font: bold 13px Verdana;width: 160px; /* Main Menu Item widths */border-top: 1px solid #778;background-color: #778;}.sidebarmenu ul li{position: relative;border-bottom: 2px solid #778; /*MUST KEEP to prevent padding effect in IE6*/}/* Top level menu links style */.sidebarmenu ul li a{display: block;width: 145px;color: white;text-decoration: none;padding: 6px;border-right: 2px solid #778;border-left: 1px solid #778;}.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{background-color: #2d49c4; /*012D58background of tabs (default state)*/ }.sidebarmenu ul li ul a:link, .sidebarmenu ul li ul a:visited, .sidebarmenu ul li ul a:active{background-color: #000097; /*012D58background of tabs (default state)*/}.sidebarmenu ul li a:visited{color: white;}.sidebarmenu ul li a:hover{background-color: black;}.sidebarmenu ul li ul a:hover{background-color: black;}/*Sub level menu items */.sidebarmenu ul li ul{position: absolute;width: 160px; /*Sub Menu Items width */top: -1px;display:none;}.sidebarmenu a.subfolderstyle{background:url('../images/right.gif') no-repeat 97% 50%;}

HTML

<!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>	<title>Golden Links Lodge - Employment Opportunities</title>	<!--META TAGS-->	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />	<meta name="description" content="Golden Links Lodge is an 88-bed accredited not-for-profit Personal Care Home in the St. Vital area of Winnipeg, Manitoba." />	<meta name="keywords" content="golden links lodge,personal care home,PCH,winnipeg,manitoba,odd fellows" />	<meta http-equiv="imagetoolbar" content="no" />	<link rel="shortcut icon" href="/images/favicon.ico">	<link rel = "stylesheet" type = "text/css" href = "/css/style.css" />	<!--[if IE 7]><link rel = "stylesheet" type = "text/css" href = "/css/ie7bgFix.css" /><![endif]-->	<!--Credits: Dynamic Drive CSS Library - Nested Menu	URL: http://www.dynamicdrive.com/style/ -->	<script src="/js/nestedmenu.js" type="text/javascript"></script>	<script src="/js/stats.js" type="text/javascript"></script>	<style type = "text/css">.c{text-align:center;}</style>	<style type = "text/css">	#content .pane1	{		width:57%;		margin-right:3%;	}	#content .pane2	{		margin:0 0 0 60%;	}	</style></head><body><!--[if ! IE 7]><!-->	<div>	<img id="bg" src="/images/bg.jpg" alt = ""/>	</div><!--<![endif]--><div id="container"><!-- START OF CONTAINER -->	<div id = "banner">		<a class = "logo" href = "/"><!--[if !lte IE 6]><!--><img src="/images/cornerLogo.png" alt = "Golden Links Lodge"/><!--<![endif]--><!--[if lte IE 6]><img src="/images/cornerLogo.gif" alt = "Golden Links Lodge"/><![endif]--></a><div id = "topmenu">		<a href="/volunteers.shtml">Volunteers</a> | <a href="/employment.shtml">Employment</a> | <a href="/donations.shtml">Donations</a> | <a href="/location.shtml">Location</a> | <a href="/contactus.shtml">Contact Us</a>		</div>	</div>	<div id="nav">		<div class="sidebarmenu">			<ul id="sidebarmenu1">				<li><a href="/">Home</a></li>				<li><a href="/about">About Us</a>					<ul>					<li><a href="/about/history.shtml">History</a></li>					<li><a href="/about/philosophy.shtml">Philosophy</a></li>					</ul>				</li>				<li><a href="/programs">Programs</a>					<ul>					<li><a href="/programs/personalcare.shtml">Personal Care</a></li>					<li><a href="/programs/respite.shtml">Respite Care</a></li>					<li><a href="/programs/adultdayprogram.shtml">Adult Day Program</a></li>					<li><a href="/programs/snu.shtml">Special Needs Unit</a></li>					</ul>				</li>				<li><a href="/services">Services</a>					<ul>					<li><a href="/services/recreation.shtml">Recreation</a></li>					<li><a href="/services/dietary.shtml">Dietary</a></li>					<li><a href="/services/spiritualcare.shtml">Spiritual Care</a></li>					<li><a href="/services/goldenlocks.shtml">Golden Locks Hair Salon</a></li>					</ul>				</li>				<li><a href="/facility.shtml">Facility</a></li>				<li><a href="/accreditation.shtml">Accreditation</a></li>				<li><a href="/archive.shtml">Newsletters</a></li>				<li><a href="/faq.shtml">Frequently Asked Questions</a></li>				<li><a href="/links.shtml">Links</a></li>			</ul>		</div>	</div>	<span id = "textsize"><a href = "/zoom.shtml">Text too small? Click here.</a></span>	<div id="content"><!-- START OF CONTENT -->	<h2>EMPLOYMENT OPPORTUNITIES</h2>	<p>	We are currently accepting applications for casual RNs and LPNs.	</p><div class = "pane1"><h4 id = "top">AVAILABLE POSITIONS</h4><ul>	<li><i>None at this time</i></li></ul></div><div class = "pane2"><h4>EMPLOYMENT APPLICATION</h4><div class = "bordered center"><a href = "forms/EmploymentApplication.pdf">Download</a></div></div><div class = "clearLeft"><br/></div>	</div><!-- END OF CONTENT -->	<div id="footer">		<div id = "left">					</div>		<div id = "right">			<p>Copyright© Golden Links Lodge</p>		</div>	</div></div><!-- END OF CONTAINER --></body></html>

[Ingolme]

It looks as if the #content container had an assigned width, margin, or was set to be displayed as an inline block.If I could see the page I might be able to understand it better.

[glopal]

It looks as if the #content container had an assigned width, margin, or was set to be displayed as an inline block.If I could see the page I might be able to understand it better.

Its live.www.goldenlinks.mb.ca

[Ingolme]

Removing "overflow: hidden" from the #content selector seems to solve the problem.

[glopal]

Removing "overflow: hidden" from the #content selector seems to solve the problem.

Hey, thanks for taking a look. Unfortunately... the content div needs overflow:hidden. The content div has divs in it that clears floats. And with out the overflow:hidden, those divs clear the #nav div.http://www.brunildo.org/test/clear.htmlThe above site describes alternate solutions to this probelm, but after looking at the page in browsershots.org, I dont see one that is fully cross browser.