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>
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 have textarea in a td element as a field for description as shown in the picture below.
When i resized the textarea vertically, it work just fine
but...
when I resized the textarea to its original height, it affects the other TD like it shown in the 3rd image.
What I want it to prevent if from happening.
Note: It only happens in Chrome, Firefox can handle this problem.
EDIT:
Here is the fiddle link.
http://jsfiddle.net/kvKZu/42/
Change height:100% to height:auto for img tag
<tr>
<td rowspan="6" style="width:200px;"> <image scr="#" style="width:100%; height:auto;" ></image> </td>
</tr>
Fiddle:http://jsfiddle.net/kvKZu/48/
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/
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?