My original question that got answered (about wrapping text or having a dropdown box only use a specific part of the page in IE8) is here.
I implemented the changes suggested by @Dogoku in their JSFiddle, which had this in the css:
table {
width:100%;
table-layout: fixed;
}
.breakword {
-ms-word-break: break-all;
word-break: break-all;
// Non standard for webkit
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
font-size: 0.9em; font-weight: normal;
}
.choices {
max-width: 100%
}
and this in the HTML:
<table width="100%" style="table-layout:fixed;">
<tr>
<td>kokos</td>
<td class="breakword" style="width:54%">
<select name="vlist" id="vlist" class="choices">
<option value="15">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</option>
<option>This is a test item for the dropdown</option>
</select>
</td>
</tr>
</table
On two different PC's which each use the same version of IE8, they perform differently. On one version, it performs as expected, where there's one line of the (long) dropdown text displayed. The dropdown box has a the down arrow displaying on the box, and when you click on it, it expands the dropdown as expected. A selection is made, and it functions normally.
On the other PC, it has the dropdown box showing, but the down arrow is not displayed. The user clicks in the box and it functions as expected (showing all items in the dropdown, along with the single line of the long text). The user can select it and it functions as expected once the selection has been made.
The one that displays & works normally is a Windows 7 32 bit OS, IE 8.0.7601.17514. The one that does not display normally is Windows 7 64 bit OS, with same version of IE8. Also, protected mode is enabled on this system. Other than the OS & that single setting, I am unable to find any differences between the two.
One thing I am noticing is that the dropdowns affected on the second PC are only those that have content in them would extend beyond the amount of space provided. Other dropdowns that do not have content that extend beyond their boundaries have a normal looking dropdown box with the arrow shown on it.
What am I overlooking on the dropdown? I suspect it's a setting in the CSS but nothing I've tried yet has made it function the same way on each system. I'd appreciate any help or suggestions.
