7

Take this: http://jsfiddle.net/zVscL/4/

.edit-me {
height:100%; /*does not behave the same as Chrome*/
width:10px;
border:1px solid blue;
background:red;
float:left;
overflow: auto;
}

Open the page on Chrome, then Firefox. The blue div does not inherit

Is there an explanation why this happens? Any fixes? Pure HTML/CSS solutions are preferable.

I've been at this shit for hours trying to get CSS to behave and when I finally do FF does this. Eating up my development time.

meiryo
  • 11,157
  • 14
  • 47
  • 52

1 Answers1

14

Try setting the height of the tr and td to 100%:

tr, td { height: 100%; }

Generally speaking to get height: 100% to work correctly, all the heights of the element's parents must be set as well.

EDIT:

An alternative solution is to wrap the contents of the td with a container div and use absolute positioning to ensure the .edit-me div effectively has 100% height.

Here's what the HTML would look like:

<table border="1">
    <tr>
        <td>
            <div class="container">
                <div class="edit-me"></div>
                Foo
                <br/>
                Bar
            </div>
        </td>
        <td>hello</td>
    </tr>
</table>

and the CSS:

.container {
    position: relative;
    padding-left: 10px;
}

.edit-me {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    width:10px;
    border:1px solid blue;
    background:red;
    overflow: auto;
}

Hope this helps!

Xavi
  • 20,111
  • 14
  • 72
  • 63
  • Let me know if you can do it with IE9+. I might unaccept the answer. – meiryo Feb 24 '13 at 11:10
  • Sorry don't have easy access to IE9+ at the moment. Feel free to unaccept if you'd like. My only recommendation is try setting the height of the table and/or try setting the heights of the `td`, `tr`, `table` in pixels instead of percents. – Xavi Feb 24 '13 at 11:19
  • No worries mate. Unfortunately my table has dynamic height so I can't use specific measurements. – meiryo Feb 24 '13 at 11:21
  • Thanks for understand. =] I think I have another idea that might work. It involves a wrapper div and setting various things to `position: relative` and `position: absolute`. I'll edit the answer above shortly. Hopefully it'll work in IE. – Xavi Feb 24 '13 at 11:39