Display problem with IE6

Hi,
I would like to have this page display properly in IE6 – for me it just falls apart too much, that and (I know this is just wrong :rolleyes:) but I do know a fair number of people who still use 6. It’s good in 7, 8, Opera, Safari, Chrome and FF – please correct me if I have any of those wrong --. ( haven’t looked at IE9, so if someone has …) At one point I had 6 working OK but it isn’t right now.
I can make it display correctly by using

	     #trials #aside {
		     width: 497px;
		     _width: 508px;
		     position: relative;
		     background-color: gold;
	     }

but don’t like using a hack. There has to be another way.

the actual page is here:
http://meadowcreekhome.net/trials

I’ve been using WordPress, but don’t think that this is the problem??? :confused:

Here is the key CSS that I’m using to the page middle:

	#trials .page-name {
		background-color: yellow; 
		height: 248px;
		float: right;
		width: 248px;
	}
 	#trials .photo {
		background-image: url(/wp-content/uploads/2011/11/buffalo-fall03.jpg);
		background-repeat: no-repeat;
		height: 248px;
		float: right;
		width: 248px;
	}
	#trials #aside {
		width: 497px;
		_width: 508px;
		position: relative;
		background-color: gold;
	}

Here is the whole of the CSS


	* { margin: 0; padding: 0; }
		article, aside, figure, footer, header, nav, section {
		display: block;	
	}
	body {
		font: Arial, Helvetica, sans-serif;
		background-color: #c7b18b;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 14px;
	}
	#border-wrapper {
		background-color: #fff;
		width: 798px;
		position: relative; 
		margin: 0 auto;
		min-height: 456px; /* changed min-height from 500px */
	}
	#page-wrap {
		background-color: #cfbd9c; /* light tan */
		margin: 20px auto;
		margin-bottom: 0;
		padding-bottom: 0;
		width: 800px;
		position: relative;
		border: 8px solid #cfbd9c;
	}
	#nav {
		background-color: #fff;	
		float: right;
		width: 149px;
		padding: 135px 0 20px 77px;
		line-height: 2;
		font-size: 14px;
		color: #000;
	}
	#nav ul li {
		list-style: none;
	}
	#aside {
		width: 497px;
		position: relative;
		background-color: #cfbd9c;
	}
	.entry {
		min-height: 250px;
	}
	.photo {
		width: 247px;
		float: left;
		height: 240px;
	}
	.page-name {
		background-color: #876FA2;	
		height: 248px;
		float: right;
		width: 248px;
	}
	.content {
		width: 340px;
		position: relative;
		margin-top: 0px; 
		min-height: 250px;
	}
	.content p {
		margin: 14px 20px 14px 10px; 
		padding: 10px;
	}	
	#logo {	
		width: 170px;
		top: 200px;
		left: 385px;
		position: absolute;
		height: 108px;
		z-index: 1000;
		display: block;
		border: 6px solid #fff;
	}
	#logo-home {
		background-color: #fff;	
		width: 270px;
		top: 195px;
		left: 325px;
		position: absolute;
		height: 108px; 
		z-index: 1000;
		display: block;
		border: 6px solid #fff;
	}
	.clearfix:after {
		content: ".";
		clear: both;
		visibility: hidden;
		line-height: 0;
		height: 21px; 
	}
	#footer {
		margin: 0 auto;	
		width: 800px;
		margin: 0 auto;
	}
	h1#logo-title  {
		font-family: Corbel, Arial, Helvitca, sans-serif;
		font-size: 1.40em;
	}
	h2.page-title {
		padding: 7px 0 7px 10px;
		margin: 2px 0 0 2px;
		color: #000;
		font-size: 16px;
		letter-spacing: 4px;
		display: block;
		background-color: #fff;
		zoom: 1;
		filter: alpha(opacity=85);
		opacity: 0.85;
		width: 229px;
		text-align: center;
		border-left: 2px solid #000;
		border-right: 2px solid #000;
	}
	.entry h2 {
		color: #585673;
		padding: 5px;
		margin: 5px;
	}
	.page-name p {
		text-align: center;
		margin-top: 40px;
		padding-top: 40px;
		font-size: 3em;
	}
	#footer p.name-phone {
		float: left;
		font-style: italic;
	}
	#footer p.email-address {
		float: right;
		text-align: right
		font-size: 10px;
		font-style: italic;
	}
	#logo-image-link img {
		border: none;	
		outline: none;
	}

/* -------- LINKS ----------- */
	#nav a {

		text-decoration: none;
		display: block;
		border-bottom: 3px dotted green;
		color: #585673;
		font-weight: bold;
		letter-spacing: normal;	
	}
	a {
		color: #000;
		letter-spacing: 2px;	
	}
	a:hover {
		text-decoration: none;
		letter-spacing: 2px;
		color: #222;	
	}

Any thoughts to have the page good in IE6.
thank you so much

Pewrhaps just hide the entire CSS from IE6 so that those using that dead browser just see the plain text of the web page. That should be sufficient to make it usable for them while not wasting too much time on a browser that now has a very small percentage of the market with those who are still using it rapidly switching to more modern browsers. By the time you get it fixed there might not be anyone using that browser any more.

something that has always worked for me is this code:

<!–[if lt IE 7]>
<script src=“http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js”></script>
<![endif]–>

what it does, is it makes ie6 work like ie7, like specific behaviors and so, give it a try. you can find more info here http://code.google.com/p/ie7-js/