IE 6&7 CSS issue

Get Started
1

Hello all. I have been pulling my hair out trying to get my website to display correctly in older IE browsers. It is designed as a 2 column layout with the left column containing 3 columns. In older IE browsers the columns do not set as 3 but ride the left - one below the other. I do not have much experience with CSS.

Here is my website.
Here is the style sheet

I don’t expect someone to fix my problem, but if one of you gurus see something obvious I appreciate a few pointers. Thanks.

~Jason

2

Adding that did fix my issue. Now I am wondering if someone can explain why that worked. What is different about the way the 2 browsers look at the css, especially IE 6/7, that this was needed. This will help me get a better grip on further enhancements and other future projects. Thanks.

3

Snip of code involved:

 
<div id="left">

<-----SNIP------->

<?php echo '<div id="homewrapper"><div id="column1"><div id="home_category_heading">'.$cats[name].'</div>';

	$num = 0;
	while($games = mysql_fetch_array($query, MYSQL_ASSOC)){
		//echo $games['title'];
		$gameurl = $games['title'];
    	$gameurl = str_replace(" ", "-", $gameurl);
		$gameurl = str_replace("'", "_", $gameurl);
		$gameurl = str_replace('"', "_", $gameurl);
		$gameurl = str_replace('/', "_", $gameurl);
		$gameurl = str_replace("\\\\", "_", $gameurl);

		$gameurl = rawurlencode($gameurl);
		$games['description'] = stripslashes($games['description']);

		$name = substr($games['title'], 0, 28);
		if(strlen($games['description']) > 45){
			$games['description'] = substr($games['description'], 0, 45)."...";
		}
		else {
			$games['description'] = $games['description'];
		}

		if($num == 4){
			echo '';
			$num = 0;

		}
		else {
		}
   		if ($seo==yes) {
    		echo'
        		<div id="homepage_games">
           	 <a href="' . $siteurl . 'game/' . $games['id'] . '/' . $gameurl . '.html' . '">
           	 <img align="absmiddle" src="' . $games['thumbnail'] . '" width="60" height="60" />&nbsp;' . $name . '</a>
				</div>';
    	}
		elseif ($seo==no) {
			echo'
        		<div id="homepage_games">
           	 <a href="' . $siteurl . 'index.php?act=game&id=' . $games['id'] . '">
           	 <img align="absmiddle" src="' . $games['thumbnail'] . '" width="50" height="50" />&nbsp;' . $name . '</a>
           	 </div>';    
		}
                               
		$num++;
	}
	?>


	</div></div>

CSS involved:


#left {
position:relative;
float: left;
width: 688px;
color: #784d00;
padding-top: 10px;
padding-left: 8px;
overflow:hidden;
display: inline-block;
}
#homewrapper{
width:100%;
position: relative;
}
#column1{
float:left;
width:32%;
margin-right:5px;
margin-top:5px;
text-align:left;
}
#home_category_heading {
width:100%;
margin:4px;
margin-bottom:4px;
font-family:Tahoma, Arial, Helvetica, sans-serif;
color:#00324c;
background: #d4e2ec url('images/maincat.gif');
background-repeat: no-repeat;
background-position: top left;
padding-top: 5px;
padding-bottom: 9px;
font-size:16px;
font-weight: bold;
text-align:center;
}

By trial and error adding:

display:inline;

to

#homewrapper{
width:100%;
position: relative;
}

the columns line up. i really don’t know why. I have read beaucoup pages today and have been trying everything. Any ideas?