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/
Related
I have an issue about vertical white line on Chrome, also on Opera. Microsoft Edge doesn't have this problem.
Js Fiddle
<div id="mainContainer" style="margin:auto; text-align: center">
<table cellspacing="0"; cellpadding="0">
<tbody>
<tr>
<td class="left">Lolo1</td>
<td class="right" style="background-color: green">BlaBla1</td>
</tr>
<tr>
<td class="left">Lolo2</td>
<td class="right" style="background-color: green">Blabla2</td>
</tr>
</tbody>
</table>
As you see there is an unexpected line on the right, I tried to manipulate it with many ways but no luck yet. It feels like its about the font-size difference between browsers, but it shouldn't be.
Also if you try to remove body elements margin-top, you will see a horizonal white line occurs on the bottom too, thats another strange detail.
It seems table element's display: inline value causes this problem. Removing it or changing it as display: inline-table made tds perfectly fit into my table.
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 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?
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>