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.
Related
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/
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 have a table nested as such:
<table>
<tr>
<td>
<table>...
</table>
</td>
</tr>
</table>
More precisely:
some style info:
div.centered{
text-align: center;
height:100%;
}
div.centered table.centeredT {
margin: 0 auto;
text-align: left;
max-width: 781px;
overflow: hidden;
height:100%;
}
Layout:
<table style="height:100%; min-height:100%;" class="centeredT" border="1" cellpadding="0" cellspacing="0" width="781px" >
<tr>
<td style="vertical-align:top; padding-bottom:7px;padding-right:5px;width:33%;height:100%;">
<table style="table-layout:fixed;height:100%;min-height:100%;border:solid 1px black;" border="0" id="Table1" cellspacing="0" cellpadding="0" class="verdanaSmall" width="257px" >
<!--this first row is simply a spacer row because I am using table-layout:fixed attribute -->
<tr>
<td width="80px"></td>
<td width="175px"></td>
</tr>
<tr >
<td colspan="2" style="height:100%;">
<table border="0" width="100%" cellspacing="0" cellpadding="0" style="border-top: solid 1px black; border-bottom: solid 1px black;">
<tr>
<td style="text-align: left; vertical-align: middle;"> 1.) </td>
<td align="center" height="20">
<a href="results.asp?pubid=31422&date=10%2F11%2F2010&ttype=eqq"target="_top">
<font face="Verdana" size="2" color="#22476C"><b> Abilene Reporter News </b></font>
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;"><font face="Verdana" size="1" color="#22476C"> Monday, October 11, 2010 </font></td>
</tr>
<tr>
<td align="center" colspan="2" height="100%" id="imagetd">
<a href="../PDFView/PDFView.aspx?pgID=32065209&adID=96332396&ref=50" target="_blank">
<img src="/pages/201010/11/31422/thumbs/A000300001H.gif" style="border: solid 1px black;" alt="" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
The reason for this is that the page is filled dynamically and the inner table is inserted inside a data loop. Anyway, the question is that the inner table is not filling 100% of the available height of the encapsulating td cell. I have set the inner table height, via css, to 100%, the encapsulating table, and also the body tag and so on up the chain. If you look at the page in firefox and opera it lays out perfect but IE does not seem to be obeying the height specifics and just making the table big enough to display the data, does anybody know of a hack/fix for IE, or a way I can correct this..?
As the problem describes: the td-element itself does automatically stretch to 100%, but (in IE) for some reason its height is not passed to its children as 100%.
The solution is quite simple: just add 'height: 100%' to the td-element that is parent of the nested table. This way 100% height will be passed to the td's children when using height: 100%; on them.
It fixes the problem in IE and doesn't seem to cause any problems in other browsers (tested on new browsers Chrome, Firefox and IE).
NOTE: setting the td's height to 100% with an nested table may cause the cell to expand too much. In that cause the height may have to be adjusted to compensate the height of the other rows. With CSS3 this can be easiliy achieved with calc(100% - [height of other rows])
PS: I'm aware that the above question is really old, but I stumbled upon this while googling for a simular problem and it seems no (correct) answer has been provided to this one. For others who will find this page just like I did, it might be helpfull to find an
answer.
Try set padding:0px; on cointaner and inner table.
Ok I havent tested anything but it doesnt look like you have set the inner table height to 100%. You have a class table.centeredT but you have not specified the class on the table. Nor have you specified height: 100% on the inner table itself. Give me a few more minutes and I will try to achieve this on jsfiddle.
Edit: One thing which did just occur to me - which wont be causing the problem but just decreases the code a bit - is that you could use the col attribute instead of an extra row at the top. I have heard that this isnt 100% supported, but I have never had a problem with it personally.
Edit: Ok I have no idea... spent ages on this and not getting anywhere. I personally havent used tables in months - I am good enough at divs, float and clear and alike that I can easily make what looks like a table without a table. If I had to display data in a meaningful way then I would use a table. Is this for displaying data, or can it be displayed just using divs / float / clear?
You need to have fixed heights of the elements that should be spanned to 100% height. Fixed heights means you'll have to set them in pixel height instead of percentage. See this SO question and solution with similar code:
Iframe { height:70%;} not working in IE 8 and Firefox
I've got a small table on one of my pages and I'd like it centered so have coded <table cellpadding="0" cellspacing="0" align="center">which works fine in IE but the table still left aligns in Firefox.
If i use
text-align:center n align:-moz-centerits not working in IE
What do I need to change to get the table to center in Firefox? If I should use -moz-center how to make it work in IE?
I'm stuck here.
Add margin: auto; to the table. That is the standard way to do it.
As Lekensteyn mentioned, here is some code to show it in action:
<div style="margin: 0 auto; text-align:center;">
<table border="1" style="width:200px;">
<tr>
<td>Hello</td>
<td>How</td>
</tr>
<tr>
<td>are</td>
<td>you?</td>
</tr>
</table>
</div>
it should center itself based on the width & margin style definition.
I'm trying to build a single row css table with multiple cells that has text that is vertically centered inside the cells. Basically the table behaviour I am trying to mimic with css is this:
<table width="100%" height="54" border="0" bgcolor="red">
<tr>
<td width="20%">text</td>
<td width="20%">text</td>
<td width="20%">text</td>
<td width="20%">text</td>
<td width="20%">text</td>
</tr>
</table>
So that my code is semantically correct I want to use divs to achieve the same effect.
<div class="job_wrapper">
<div class="info">
<div>01</div>
<div>Campaign 001</div>
<div>DEMO Client</div>
<div>128</div>
<div>449</div>
</div>
</div>
Problem is that the workaround for display:table-cell in IE involved using the float property which overrides the display value to block. hence I lose the vertical centering of text in a table cell.
Is there a workaround to display:table-cell in IE that still gives me the ability to center text vertically in IE?
Cheers
check out the style sheet from http://jogger.pl/404.
they have an interesting workaround in there.