Struggling with a compatibility issue in IE8. Here's my HTML code -
Test in any browser and then try in IE8
jsfiddle.net/G2C33/
The desired output should be like this
The problem is that the max-width property doesn't work in IE8.
Note: Test this in IE8 or IE9 (IE8 standard mode). If you try this in a version after IE9, it should work because the rendering engine has changed. JS Fiddle will force the document to run in IE9 Standard mode. So, copy this into an .html file and try.
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
<style>
.first {
width: auto !important;
white-space: nowrap;
max-width: 50px;
overflow: hidden;
text-overflow: ellipsis;
}
.test{
width : auto;
max-width: 50px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.second {
}
td {
border: 1px solid red;
}
</style>
</head>
<body>
<table>
<tr>
<td><ul>
<li class="first"><div class="test">a very long content goes over</div></li>
<li class="first"><div class="test">a very long content goes over here in this table cell and column a very long content goes over here in this table cell and column</div></li>
</ul>
</td>
<td class="second">
a very long content goes over here in this table cell and column a very long content goes over here in this table cell and column
</td>
</tr>
</table>
</body>
</html>
Can anyone provide assistance with this issue?