HTML max width and height not working in IE

Question

Hello guys Im trying to set a max width and height so that when my the data in my cells expands it does not go past that size....does not seem to work

/*styling for Data Extraction tool. */
table.data_extract
{

 border: 3px DarkGray solid;
 border-collapse: collapse;

 }

td.data_extract,

table.data_extract td
 {
 border-color : DarkGray;
border-style : groove;
border-width : thin;
border: #000000 1px solid;
text-align: center;
font-size: 7.5pt;
white-space: normal;
max-width: 125px;
max-height: 75px;
background-color:#FFFFFF;
padding-left: 4px;
padding-right: 4px;

 }

 table.data_extract th
 {
 border: #000000 1px solid;
  background-color:#DDDDD0;
  text-align: center;
 font-size: 8.5pt;

 padding: 10px;

 }

html:

    <table align="center" class="data_extract vert_scroll_table" >
              <tr>

                  <c:forEach var="heading" items="${results.headings}"> 
                   <th class="data_extract">${heading}</th>
                  </c:forEach>

              </tr>

              <c:forEach var="row" items="${results.data}">
                  <tr>
                      <c:forEach var="cell" items="${row}" varStatus="rowStatus">
                          <td class="data_extract">
                              <c:choose>
                                    <c:when test="${results.types[rowStatus.index].array}">
                                    <c:set var="comma" value="," />
                                        <c:forEach var="elem" items="${cell}" varStatus="cellStatus">
                                            <c:set var="myVar" value="${cellStatus.first ? '' : myVar} ${elem} ${cellStatus.last ? '' : comma}" /> 
                                        </c:forEach>
                                        <span class="mouseover_text" title="${myVar}">${myVar}</span>
                                    </c:when>
                                    <c:otherwise>
                                    <c:choose>
                                    <c:when test="${cell.class.name eq 'java.sql.Timestamp' }">
                                     <fmt:formatDate value="${cell}" pattern="${date_pattern}" />
                                    </c:when>
                                    <c:otherwise>
                                    ${cell}
                                    </c:otherwise>
                                </c:choose>
                                  </c:otherwise>
                              </c:choose>
                          </td>
                      </c:forEach>
                  </tr>
              </c:forEach>
              </table>

Answer 1

First thing to note is that older versions of IE do not support max-width/height. Newer versions should be fine though.

Secondly, it depends on the contents of the cell. If the contents has to go past the max-width/height constraints to display itself then it will. It won't try and cut off the end of an image if it doesn't fit, overflow can be used in that instance like Lee suggested. If it's run-on text that is running past the max constraints then you can use css to wrap it.

Answer 2

I think you're going to need to tell IE what to do with the overflow, i.e. overflow:hidden.

You can also try playing with text-overflow:ellipsis to show that the text has been clipped, if you like.