Question

Well i have a div tag that i show as a modal dialog this div tag contains a fieldset witch in turn contains a legend tag and a few div tags.

But the result renders totally different in IE(9) vs Opera, FF and Chrome

IE:

Opera:

How can i make ie render the same way as opera, FF and chrome?
By html debugging i have found out that “overflow: hidden;” is the cause but why does this make IE9 Render some thing so totally different than Opera FF and chrome?

CSS:

.DynamicForm
{
    padding: 0;
    margin: 0;
    overflow: hidden;
}
.Dialog fieldset
{
    background: white;
    border: 0;
}

.Dialog fieldset
{
    margin: 0;
    padding: 3px 2px 13px 13px;
}

.Dialog fieldset legend
{
    padding: 3px 10px;
    margin: -3px 0px 3px;
    background: #BC2327;
    font-weight: bold;
    color: white;
}

.DialogBackground
{
    background-color:rgba(0,0,0,0.1);
}

html:

<div class="DynamicForm Dialog">
  <fieldset>
    <legend>
            Allkort, 12 månader, Fullpris
        </legend>.......

Answer 1

I found a solution instead of using overflow:hidden. i changed to using the normal clearfix even if i totally hate it..

The browser still render it somewhat different but im happy with what i have..