Skip to content Skip to sidebar Skip to footer

Fieldset With Display: Table-column Disappears Entirely In Ie8 & Ie9

I just spent some trying to figure out why some form content vanished entirely in IE8 & IE9. After some investigation, it looks like it's the fault of having fieldset set to di

Solution 1:

The display: table-column means it acts like the <col> tag in HTML. The <col> tag is an invisible element which is used to specify properties of the column like styles etc. It is not the same as <td> (which is display: table-cell).

You should use table-cell instead.

W3C Spec

Source - Random832's answer in this SO Thread

EDIT:table-column still gets displayed in IE 7, FireFox 24, Chrome and Opera 15. It doesn't work in IE 8, 9 and 10.

Solution 2:

All elements are default positioned to vertically top. You need not to write any extra code. I believe below code should suffice:

<html><head><styletype="text/css">fieldset
{
height: 50px;  /*************** Not Required, Just to show what I mean by my sentence     mentioned above :) ****************/
}
h6,div {
margin: 0; padding:0;
}

</style></head><body><form><fieldset><divclass="row"><h6>Inside a fieldset</h6></div></fieldset><form><h6>Not inside a fieldset</h6></body></html>

Post a Comment for "Fieldset With Display: Table-column Disappears Entirely In Ie8 & Ie9"