I am running into an annoying problem I have yet to solve. Before I get too far into this I will point out that I am doing this in Drupal 7 (so no need to comment about the excessive wrapper elements, I already know).
The problem is that in all versions of IE (11 and on down) the question text (which are also anchor tags) seems to spill over past the edge of the parent container. In this case, since it has a top 5 widget box to the right, the text overlaps the widget box.
The problem does not seem to happen in any other browsers (at least the rest can mostly get standardization right). I have tried setting the parent position relative. I have tried fiddling with the text-overflow and the word-wrap properties. I have tried setting sub-container widths and positioning.
Nothing I have done so far seems to prevent this text overlapping in any version of IE. I want it to behave in IE as it does in Chrome/Firefox/Safari/etc.
Here is a link to the recreation of this problem (which replicates the issue in IE as I have verified):
http://jsfiddle.net/pthurmond/zn23jvap/1/
The problem is with the ones with long text such as this:
<a class="fieldset-title" href="#">
<span class="fieldset-legend-prefix element-invisible">Show</span>
<span>
<span class="question" url="/someone-used-my-social-security-number-open-credit-card-account-can-i-get-new-social-security-number">
Someone used my social security number to open a credit card account. Can I get a new social security number?
</span>
</span>
</a>
Does anyone have any ideas as how to fix this?
The issue is caused by the <legend> element. There is a bug in Internet Explorer which causes the legend to be displayed without word wrap. See this article for more information.
I would recommend just using a header tag instead.