I have a table that I would like to start on exact left and top of screen, but it looks like there is a 1 pixel space to the left and top of it. Not sure why.
I've tried margins, borders, etc all to 0, but can't get rid of the pixels.
<table style="width:100%;height:100%;max-width:750px;max-height:1334px;">
<tr style="height:5%;background-color:#e31837">
<td align="center"></td>
</tr>
<tr>
<td align="center"></td>
</tr>
<tr style="height:10%;background-color:#e31837">
<td align="center">
<table style="width:100%;color:white;font-size:26px;font-family:sans-serif">
<tr><td align="center"><p class="example"><b>TEXT</b></p></td>
</tr>
</table>
</td>
</tr>
</table>
I expect the table to start at the exact left and top of browser window area, but I can see the grey background 1 pixel left and top of the table.
It looks like I can't put the body style here but the style for that is all margins to 0 i.e. top, left, and the background color to grey... just to make sure it is part of the web page behind the table showing, not the browser adding some to the left and top for whatever reason.
This can be solved by setting border-collapse: collapse; on the table element. This prevents the browser from adding any additional padding between the borders of your table components (in this case, it was padding between the cell borders and the nonexistent table border), by merging borders for adjacent cells. You can see the difference visually in this diagram:
An alternate solution would be to set border-spacing: 0; on the table element. This will not combine borders from adjacent cells, but will still remove the padding between them:
(Originally posted as a comment to confirm it resolved the issue)
Related
I have a Vertical white 1px on my image in windows outlook 2007 & 2010 for my HTML email.
I don't know why this is happening. This only happens in windows outlook so far from what i've seen. And not any other client.
Heres a photo
<tr>
<td id="header" class="w640" width="640" align="center" bgcolor="#FFFFFF">
<img editable label='header image' src="images/header.gif" class="header" width="640">
</td>
</tr>
I came across two possible reasons for this behavior of borders in Outlook while googling :
Outlook adds 1px border to the table cell elements. You can get rid of it by using border-collapse : collapse CSS property to your table cells and cellpadding="0" and cellspacing="0" attributes to the table element. The strange thing that this border appears to be only on the right side of the td, but it can be so due to <img> layout.
If you want to look for more information about this issue you can follow this link.
If you are setting somewhere in CSS classes your border to something like border: 0px style color (or not setting at all) (the main part here is setting border-width to 0px) it will be ignored by Outlook, so you can make it to not display border at all by setting border-style : none. I guess this is closer to your problem, as I've found a similar sample picture here.
This extra space could be caused by numerous things:
the image is incorrectly sized and is smaller than its container
if you are scaling the image to a size other than its original size Outlook will likely ignore these attributes and continue displaying it at the original size.
if your attempting to use margin or padding properties
if you are not collapsing your cells with table td { border-collapse:collapse } and table cellpadding="0" cellspacing="0"
if you are not making the image display:block
if you mistakenly overlooked stray while space within the actual image (improper slicing)
if, somewhere above or below this cell, you have content causing the table or cell width to be stretched further than it should.
Also, just from the code sample you posted.. You should remove the bgcolor from your cell and you should also remove the width from the img but leave it on the cell.
Updated Fiddle
Usually when I have this type of issues I wrap my td with a table. Below there is a part of your markup at the point where you have the image.
<td>
<table width="640" border="0" style="width:640px;border-collapse:collapse;padding:0;margin:0;">
<tr>
<td>
<img editable label='header image' src="http://t0.gstatic.com/images?q=tbn:ANd9GcTDhTODtu4yyVkbK7GUbFKctbR8Rgry7BRXnaC9Ztgls1vEVqsV" class="header" width="640" >
</td>
</tr>
</table>
</td>
This will fix your problem.
Normally, we have table TDs aligned left to right.
I have a html page for desktop and mobile. For mobile , TDs arranged left to right are not visible so I want to show them top to bottom.
Is there any property that can arrange TDs top to bottom if width is not sufficient?
use <tr> instead of <td>
tr is a row, you can fill it with td's
You can assign the as rows.
So if you want to show all data in new line then use for each
For Example
<tr>
<td>ABC</td>
<tr>
<tr>
<td>PQR</td>
<tr>
<tr>
<td>XYZ</td>
<tr>
Is there any way to specify the size of a table without changing the size of the cells?
In other words, my table has a border around it and I am using it for a menu:
<table width = "500" height = "300">
<tr>
<td>
Contact
</td>
<td rowspan = "2">
This is the area where news and updates will appear on the right hand side.
</td>
</tr>
<tr>
<td>
Links
</td>
</tr>
</table>
First of all, is there a better way to do this?
If I change the height of the table like that the cells become too spaced out and the menu starts to look awkward.
You shouldn't use tables for layout. Menus in HTML4 should be in an unordered list.
Then you should use CSS to style it however you want.
Why do you use a table layout? Use div elements and style them as you wish in CSS.
You can specify a certain width for the container and width in percentage for its children, so you've only one value to change.
And don't specify height in CSS, only min-height, or you'll block users from zooming at their will.
edit: and inside one of the div, an unordered list for navigation links :)
such problem with firefox.
<td height="10" style="border:1px solid #990000;"> </td>
gives red line border, but I need height 10, with it doens't stand height 10, without it firefox doesn't show the red line.
anyone one a way?
Make sure your table does not have the CSS empty-cells:hide; applied to it. You can apply the direct opposite value inline (opposite is show), but this is the default value so unless you're setting it to hide in some page-level CSS, this should not even be necessary.
Another CSS item that can affect empty table cells is border-collapse. Ensure that you are not setting it to collapse. The default is separate, again you can either ensure that no page-level CSS changes this style, or you can explicitly add it to the table inline.
<table style="empty-cells:show; border-collapse:separate;">
<tbody>
<tr>
<td style="height:10px; border:1px solid #990000;"></td>
</tr>
</tbody>
</table>
http://jsfiddle.net/yHrhu/
In fact, using the non-breaking space ( ) may cause the cell to be larger than the specified 10px, since the space will be of the same font size as any text in the element. If you are using any font size that is larger than 10px, the cell would be bigger than intended.
additional to Chris's answer.
Make sure your TD's does not have position:relative applied.
Just stumble around this problem myself today turnout set the background into none or transparent make the border visible again.
table.table tr{
background: transparent;
}
I am trying to fix a display issue we are having with some tables (nested). In short, we show a page listing products. Each product is displayed in it's own table. And each of these is nested in a larger table to layout the page. Unfortunately, some of the inner tables have slightly more content than others and they end up being different sizes, causing others not to fill the containing cell.
For example:
<table style="height:500px; background:blue;">
<tr>
<td style="vertical-align: top">
<table style="background:red; height: 100%;">
<tr>
<td>hello</td>
</tr>
</table>
</td>
</tr>
</table>
In quirks mode, the red table, fills the blue table, so you basically see a red table, with a blue border.
In standards mode however, the inner table does not expand to fill the blue table. Causing the layout to be not at all as anticipated.
How can I fix this behavior? I don't want to render in quirks, as that will end up creating a maintenance nightmare.
Put style="height: 100%;" on the <td> and <tr> tags. Setting height to 100% needs every parent to have a defined height.
Instead of setting the height of the outer table, set the height of the <td> and style="height: 100%;" on the nested table.