Search code examples
cssalignmenthtml

IE 8 text inside the span tag goes outside the div


I am using <span> for display a line of address inside a popup div it works fine in all browsers but in IE 8(only) its not working the span content goes out of the popup div

Inside the popup div all contents are display by using a table and td are assigned with a width.

OUTPUT IN OTHER BROWSERS

|------------------|<--DIV message
|line1<--td1       |
|line2<--td1       |
|Here it goes the a|<--<tr><td>span</td></tr>
|ddress not goes   |  
| outside          |
|__________________|

OUTPUT IN IE8

|------------------|<--DIV message
|line1<--td1       |
|line2<--td1       |
|Here it goes the a|ddress and it goes outside<--<tr><td>span</td></tr>
|                  |
|__________________|

The all content including the span is working fine in the all browsers but in IE8 it goes outside. In IE8 it not takes care of the width i assign to the td.

HTML:

<div class="message">
<table>
<tr>
<td>
<span>Here it goes the a|ddress and it goes outside</span>
</td>
</tr>
</table>
</div>

css:

.message {width:320px;height:220px;}
.message table td{width:80px;}
.message table td span{width:80px;}//I tried like this it works in other browsers not in IE8

Solution

  • Try it like this

    .message table td span{width:80px; white-space:normal;}