Hey People,
I'm facing a issue with browser compatablity here, I want a certain
group of divs to behave like a table row, i.e if one of the cell/div
has content longer than the other divs, all the other divs should
reflect the same height. I managed to get success in doing this with
mozilla (i love it!) and Opera 7, but IE seems to be ignoring the
defined function (again!) of the properties display: table, table-row,
table-cell...
Can you help? The only restriction I have is I want to avoid the use o
f Javascript for this.
Here is the page code for your reference...
---------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style>
body {
margin: 0px;
}
div.outTable {
width: 100%;
display: table;
}
div.rowTable {
display: table-row;
}
div.cellTable {
display: table-cell;
width: 25%;
background-color: Aqua;
}
div.cellTableTwo {
display: table-cell;
width: 25%;
background-color:Blue;
}
/*IE Only code */
* html div.outTable {
width: 100%;
display: block;
height: 100%;
border: 1px #f00 dotted;
}
* html div.rowTable {
display: inline;
height: 100%;
}
* html div.cellTable {
display: inline;
width: 25%;
background-color: Yellow;
float: left;
height: auto;
}
* html div.cellTableTwo {
display: inline;
width: 25%;
background-color:Orange;
float: left;
height: auto;
}
</style>
</head>
<body>
<div class="outTable">
<div class="rowTable">
<div class="cellTable">Hello Testing</div>
<div class="cellTableTwo">Hello World!</div>
<div class="cellTable">Hello World! This is the text to test if all
the divs reflect the same height as this div, IE fails the text but
mozilla pass it. How do get all versions of IE 5.x, IE 6.0.x to work
with this.</div>
<div class="cellTableTwo">Hello Testing </div>
</div>
</div>
</body>
</html>
------------------------------------------------
Cheers!
Shashwat Nagpal
http://www.shashwat.com
