code not working in IE 6

[moneysharma]

link for the website is: http://moneyzzsharma.comze.com/

this is not same in IE6. i.e the 3 orange tables. If i make them float:left then they lose their equal height. should i make a different stylesheet for IE6? Also if possible please tell the reason of the failure of the code in IE 6.


CSS code is:

.cols{
width:100%;	
word-spacing:.3em !important;

z-index:105;
}

.colscenterbox{
width:100%;
display:table;

border-spacing:10px;
position:relative;
margin:60px auto 0;
z-index:105;
	
}


.colsouterbox{
	display:table-cell;
	width:30%;
	border-radius:8px;
	background-color:#ff5118;
	padding-bottom:12px;
}

.colsinnerbox{
width:90%;
max-width:90%;
text-align:justify;
margin:auto;
}

.col1{
}

.col2{
margin-left:4%;
margin-right:4%;
}

.colsheading{	
margin-top:0.5em;
font-size:1.3em;
font-family:Georgia, "Times New Roman", Times, serif;
font-weight:bolder;
}


.colsimg{
margin:20px auto;
max-width:100%;
width:100%;	
border:1px solid #C30;
}

.colspara{
height:auto;
margin:0 auto;	
}

HTML Code is:

<div class="cols">

<div class="colscenterbox">



<div class="col1 colsouterbox">

<div class="colsinnerbox">

<h1 class="colsheading">
Business Plans
</h1>

<img src="images/col1.jpg" class="colsimg" />


<p class="colspara">
Here you will find free samples of business plans that will help you to run your own business.
</p>


</div><!--colsinnerbox ends-->


</div><!--col1 ends-->

<div class="col2 colsouterbox">

<div class="colsinnerbox">

<h1 class="colsheading">About Template</h1>

<img src="images/col1.jpg" class="colsimg" />

<p class="colspara">
Free Website Template from TemplateMonster.com! We hope that you like this template and will use it for your websites.</p>

</div><!--colsinnerbox ends-->

</div><!--col2 ends-->





<div class="col3 colsouterbox">

<div class="colsinnerbox">

<h1 class="colsheading">Useful Information</h1>

<img src="images/col1.jpg" class="colsimg" />

<p class="colspara">
Read this sample article and learn more about the strategic business planning.
</p>


</div><!--colsinnerbox ends-->

</div><!--colscenterbox ends-->

</div><!--col3 ends-->

<div class="fake_float">
</div>

</div><!--cols ends-->

[Paul O'B]

Hi,

I explained in the other thread that display:table is IE8 plus only. I also mentioned that you should just float them and lose the equal height for IE6 and 7 as they are very low usage these days and you shouldn't spend too much time on them. Unequal boxes is no big deal so just float them with a min-height for ie7 and a height for ie6. However most people have dropped support for Ie6 now and only give cursory support for IE7.

Set up a conditional stylesheet for IE7 and IE6 and apply the floated rules. Or you could use this code in the main stylesheet.

*+html .colsouterbox{float:left;min-height:250px}/* ie7 only*/
* html .colsouterbox{float:left;height:250px}/* ie6 only*/

You may have to tweak positions etc.

[moneysharma]

Hi,

I explained in the other thread that display:table is IE8 plus only. I also mentioned that you should just float them and lose the equal height for IE6 and 7 as they are very low usage these days and you shouldn't spend too much time on them. Unequal boxes is no big deal so just float them with a min-height for ie7 and a height for ie6. However most people have dropped support for Ie6 now and only give cursory support for IE7.

Set up a conditional stylesheet for IE7 and IE6 and apply the floated rules. Or you could use this code in the main stylesheet.

*+html .colsouterbox{float:left;min-height:250px}/* ie7 only*/
* html .colsouterbox{float:left;height:250px}/* ie6 only*/

You may have to tweak positions etc.

Thanks again