html - IE Display Issue: Fieldset size not being determined by content, and display inline causes an additional issue

Question

This problem only occurs in IE8+. It works fine in Firefox.

HTML:

<fieldset>
<legend>Hello</legend>
<table><tbody><tr>
<td>Hello World</td><td>Hello World</td>
<td>Hello World</td><td>Hello World</td><td>Hello World</td><td>Hello World</td><td>Hello World</td><td>Hello World</td><td>Hello World</td>
</tr></tbody></table>
</fieldset>

<fieldset>
<legend>Hello</legend>
<table><tbody><tr>
<td>Hello World</td><td>Hello World</td>
<td>Hello World</td><td>Hello World</td><td>Hello World</td><td>Hello World</td><td>Hello World</td><td>Hello World</td><td>Hello World</td>
</tr></tbody></table>
</fieldset>

CSS:

fieldset {
    border: 1px solid #000;
    /*display: inline;*/
}

Please check out this jsFiddle.

When the fieldsets do not have display: inline, then the fieldsets' sizes are being determined by the size of the window rather than the size of its content. So, if I make the window small or have a low resolution, then I can see the content flowing outside of the fieldset boxes.

Adding display: inline to the fieldsets fixes this problem. However, it causes another issue. Now, if the window is very large, then the two fieldsets will display side by side. I want each fieldset to display on its own line.

I need to fix this using CSS only. I may not change the HTML because this is a problem that is occurring everywhere in an existing application and that would be an awful lot of work to change every occurrence of the problem.

Any help would be greatly appreciated.

Thanks, Tedderz

Answer 1

try this:

fieldset {
border: 1px solid #000;
display: inline;
float: left;
clear: both;
}