Min height in CSS does't work in Firefox. It work in IE

Question

In my facelets template, there is div min-hight. It does't work in Firefox Browser.

    <div class="body">
        <table>
            <tr>
                <td valign="top" width="100%" style="min-height: 400px;">
                    <ui:insert name="body"/>
                </td>
            </tr>
        </table>

    </div>

What I need to do for these two browsers.

Edited, this is a HTML/CSS issue. The source of the HTML is not relevant. — SJuan76, Sep 19 '12 at 09:05
There is no `DIV` with a `min-height`, but a `TD`. Look into your other table formattings in your stylesheets. — feeela, Sep 19 '12 at 09:07

score 2 · Accepted Answer · edited May 23 '17 at 12:14

2

Try with

<td valign="top" width="100%" style="display:block; min-height: 400px;">

As feeela said, "min-height applies to block level and replaced elements"

edited May 23 '17 at 12:14

Community

1
1

answered Sep 19 '12 at 09:07

Giona

20,734
4
56
68

1

I think that's the correct answer. ["`min-height` applies to: block level and replaced elements"](https://developer.mozilla.org/en-US/docs/CSS/min-height) – feeela Sep 19 '12 at 09:10
Thanks i'll add it to the answer – Giona Sep 19 '12 at 09:12

score 0 · Answer 2 · edited Sep 19 '12 at 16:01

0

use only height so it's work properly

  <div class="body">
     <table>
       <tr>
            <td valign="top" width="100%" style="height: 400px;">
                  <ui:insert name="body"/>
           </td>
      </tr>
  </table>
 </div>

edited Sep 19 '12 at 16:01

Andrei Sfat

8,440
5
49
69

answered Sep 19 '12 at 09:08

Dhaval Patel

11
1

score -1 · Answer 3 · answered Sep 19 '12 at 09:20

As per the specification here (spec) min-height SHOULD not be applied to table elements. Therefore it is IE that is displaying this property wrong, not Firefox (no surprise there). What you can do is either stop using tables for layout (Which the standard reccomends) OR place a DIV within the table cell and apply the min height property to the div to force the TD to adopt its content size.

option 1:

<body>
    <div class="body" style="min-height:400px;">
        <ui:inser name="body"/>
    </div>
</body>

option 2:

<div class="body">
    <table>
        <tr>
            <td valign="top" width="100%">
                <div  style="min-height: 400px;">
                    <ui:insert name="body"/>
                </div>
            </td>
        </tr>
    </table>
</div>

The downsides of option 1 - Possibility of extra styling needed to get x-browser for legacy IE (6,7,8) The downsides of option 2 - unneccesary mark-up, non-standard.

That's wrong. Spec states it should apply to all non-replaced inline elements: http://stackoverflow.com/a/14420691/1792090 Its a known bug in FF: https://bugzilla.mozilla.org/show_bug.cgi?id=307866 — unity100, Aug 15 '15 at 23:17

Min height in CSS does't work in Firefox. It work in IE

3 Answers3