CODEWITHSUNDEEP
javascripthtmlcss
Nuri Ensing
Nuri Ensing

Reputation: 2030

Table getting out of fieldset border in Firefox only

I have a form where i have fieldsets, in 1 fieldset i have a table. This table will be in the fieldset in chrome and IE but not in Firefox. Please have a look:

https://jsfiddle.net/79504g5b/1/

my fieldset has this CSS:

#msform fieldset {
  background: white;
  border: 0 none;
  border-radius: 3px;
  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
  padding: 20px 30px;

  box-sizing: border-box;
  width: 80%;
  margin: 0 10%;

  /*----------------------->2*/ position: absolute;

}

I don't know what is the problem.

Upvotes: 0

Views: 53

Answers (2)

Tushar
Tushar

Reputation: 87203

The element .statusHead1 does not occupy the available width. So, table is added next to it, in the available space.

To move table on it's own line, use clear: both on the table.

table {
    clear: both;
}

See Demo.

Optionally, you can also set the float: left to the table.

Demo

I'll recommend you to use clear: both. Using this, you don't have to change your other elements structure/view.

Upvotes: 2

Anandh Sp
Anandh Sp

Reputation: 787

Remove float:left form .statusHead1 class

Check this link https://jsfiddle.net/g0t1rwyw/

.statusHead1{
    /*float:left;*/
    width: 600px;
    font-weight:bold;
    border-bottom:1px solid #bfcfdf;
}

Upvotes: 1

Related Questions