CSS break-word problem with div inside td in IE7

Question

Hello,

I'm trying to use the CSS word-wrap property with break-word value. I want to use this inside a td, and apparently need to use a additional div tag for this to work. fine.

I tried to build a simplified use-case:

HTML:

<table class="sectors">
  <tr>
    <td><div>HURTEAUX / Jean-Baptiste mr)</div></td>
    <td><div>CHEUNJGgdfgdfvfsefsdfsdfsdfsdvvvHJG / Samuel mr</div></td>
    <td><div>CHEUNG / Samuel mr)</div></td>
  </tr>
</table>

CSS

.sectors td {
  border: 1px solid #000;
}

.sectors td div {
  width: 150px;
  word-wrap: break-word;
  border: 1px solid red;
}

The problem

Firefox, Chrome and Safari behave as expected (at least as I expect).

screenshot on Firefox 3.5

But IE (IE6, IE7, IE8) has a strange behavior: the text is properly wrapped inside the div (red border), but it seems the td (black border) is allocating extra space for no reason.

screenshot on Firefox IE7

Any workaround or explanation?

Answer 1

Adding overflow:hidden to the div should sort it out. Can't offer an explanation though, sorry!

Answer 2

The overflow works! Thanks a lot!