I have a div that wraps a table with table-layout: fixed.
<div class="wrap">
<table id="mytable"><tr>
<td>Some label</td>
</tr></table>
</div>
The trouble is in that rendered DIV's width in Chrome is smaller that required to wrap my table. In Firefox it's ok.
Here is the Fiddle demostration
It is a Chrome bug?
Related
I am giving the table and div height, width has 100%. element get the 100% height but when it reach div which present in then div does not height 100%. In chrome and IE this working fine, only getting problem in Firefox. Is that I am doing anything wrong or it's problem of browser please help!
Syntax:
<div style="height:300px;width:300px;background-color:yellow;border:solid black;">
<table style="height:100%;width:100%;">
<tr>
<td>
<div style="height:100%;width:100%;background-color:red;border:solid black;">
</div>
</td>
</tr>
</table>
</div>
JsFiddle:https://jsfiddle.net/7wa7wrkk/4/
You also have to assign the 100% height to the td:
https://jsfiddle.net/yfehv1da/1/
I am also faced same problem in past, I think this is problem of Firefox browser only not fault of your code because it not applying 100% height of to ! In your case simple way handle your problem by giving "Height:100%" style to element. By this way it will work in all browser without any issue.
Syntax:
<div style="height:300px;width:300px;background-color:yellow;border:solid black;">
<table style="height:100%;width:100%;">
<tr>
<td style="height:100%;">
<div style="height:100%;width:100%;background-color:red;border:solid black;">
</div>
</td>
</tr>
</table>
</div>
JsFiddle:https://jsfiddle.net/7wa7wrkk/5/
I don't know how to asap my code to make it work as on others browsers. Basically, the td holds a div that serves as an image background to fit in the first td and has the same height as the tr.
With IE, I can't have the right layout.
Here is the code snippet (works fine on safari & chrome, mobile and desktop):
<table class="tableBlackOrange">
<tbody>
<tr>
<td class="key textOutline">
<div class="image"></div>
<div class="cut-arrow-right"></div>
<p>Taupin</p>
</td>
<td>
<div>
<div class="disk"></div>
</div>
</td>
</tr>
The div is position: absolute within a td position:relative.
What we should get on IE as well:
The fiddle stands right there: http://jsfiddle.net/stephanedeluca/rp8k2o6n/
I found several questions addressing similar problems, but each solution has a particularity that prevents it from applying to this situation...
My issue is that I want an absolutely positioned, 100% width, div inside a table cell. I can't use fixed widths or heights anywhere because all the content can vary in width and height. I want the div to be positioned from the bottom of the cell height, which is influenced by the (variable) height of the content in the next cell.
The code below works fine in IE8 (yeah, still have to support it...), IE11 and Chrome — the red div stays contained within the left table cell. In Firefox however, the div is actually sized according to the width of the TABLE, covering part of the cell on the right.
What can I do to make it work in Firefox?
Demo: http://jsfiddle.net/AGYGH/
HTML:
<table id="OuterTable" border="1">
<tr>
<td id="TableCell">
<table id="InnerTable" border="1">
<tr>
<td>Dummy text of varying length</td>
<td>Dummy</td>
</tr>
</table>
<div id="AbsoluteDiv">
<div id="InnerDivLeft">Left Div</div>
<div id="InnerDivRight">Right Div</div>
</div>
</td>
<td>
<select multiple="multiple" size="10">
<option>Varying length options</option>
</select>
</td>
</tr>
</table>
CSS:
#OuterTable {
position:relative;
}
#TableCell {
vertical-align:top;
position:relative;
}
#AbsoluteDiv {
background-color:red;
position:absolute;
width:100%;
bottom:30px;
}
#InnerDivLeft {
float:left;
}
#InnerDivRight {
float:right;
}
I've ran into this problem as well. According to the spec, table cells cannot be positioned. Meaning FireFox is doing it right, and everyone else is doing it "right".
Kinda hacky, but you could always use div's with "display: table-cell" THEN position them relative.
This article has a good JS alternative for the issue.
Thanks to Seth for pointing me to the JavaScript solution, which has the added benefit of also fixing small padding/margin issues on IE in my 'real world' usage.
So, I've wrapped the entire content of <td id="TableCell"> with a <div class="wrapper"> (as suggested by Hashem) and used jQuery to size its height to the actual height of the table cell:
$('#TableCell div.wrapper').height($('#TableCell').height());
Revised Demo (with the added wrapper colored blue) : http://jsfiddle.net/AGYGH/9/
This sample code doesn't work as expected in IE 10 (the inner table don't get the remaining space). I take off .css and other elements to just highlight my question.
I would like to take the inner table to get all space between the 50px line of top and the 30px line of bottom. In another doctype it's work but I must work with this doctype in my project.
<!DOCTYPE html>
<html style="height: 100%">
<body style="height: 100%">
<table style="height: 100%">
<tr style="height: 50px">
<td>
</td>
</tr>
<tr>
<td>
<table style="height: 100%; background: #f00">
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
<tr style="height: 30px">
<td>
</td>
</tr>
</table>
</body>
</html>
Actually this does not work in IE9 as well. It is not a bug, it is an expected behavior of IE's rendering engine.
Your inner table is not stretched because it ignores height:100%. This is because DOM element must have immediate parent with specified height CSS property in some units (height: auto is not counting). If you specify height on TD (parent of inner TABLE), than it will work. But you cannot specify height: 100%-50px-30px for TD, so this markup is bad for layout you want to achieve.
Your layout is a clasic header-body-footer with fixed heights of header and footer and automatically stretched body. This is a very popular layout in the web. There are a lot of ways to make it work cross-browserly (IE, Chrome, Firefox, Safari).
My favourite option to make it work cross-browserly (including IE7):
Use three DIV's, for header and footer specify height explicitly, and for body make position:absolute; top:<header-height>; bottom:<foooter-height> . Also all three DIV's are needing to be wrapped in one absolutely positioned container.
I've got a problem on beta.ovoweb.net ; the td (below the tabs, little grey line) isn't visible in Chrome. It is in Firefox. How can I fix this Chrome problem?
The content of the td has zero height. Put content inside of it that has height.
Because Chrome ignores blank area.
Try
<div id="ovoSubmenuContent"> </div>
or
<td colspan="2" height="5">
<div id="ovoSubmenuContent"></div>
</td>