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.
Related
I am trying to insert a responsive image and text link to a workshop page inside an online article.
It seemed to me that I could fit this within a figure tag (containing the styling for the promo box) to copy and paste it easily into multiple articles.
The image on the left hand side must occupy 10% of the figure width, scaling responsively to the browser window.
The image must not float over the text below.
The text on the right must align to the top of the image and split over two paragraphs, scaling responsively to the remaining space.
The text must not wrap around the image.
There should be margins of 10px around the image and text.
Currently I am using a two cell table, but I cannot seem to make the left hand image cell scale responsively whilst simultaneously scaling the image to fill the cell 100%.
Also the table code seems clunky overlong overkill.
Is there a quicker and easier way to execute this? Perhaps using side-by-side divs?
ETA
I am being advised that I should be able to do this simply with divs, float, and display:inline, but I cannot find a way?
Current code (updated as of 16/5/2019 12:00 UST):
<figure style="margin:20px 0px 20px 0px;border-top:1px solid #555555;border-bottom:1px solid #555555;padding:10px 20px 5px 20px;">
<table border="0" cellpadding="0" cellspacing="30">
<tbody>
<tr>
<td style="width: 15%;" valign="top"><img src="https://mutiny.asia/Portals/0/EasyGalleryImages/770/PortfolioPro/Thumbs/51data-driven-decision-making.png" style="width: 100%;"></td>
<td style="padding:5px 0 0 10px" valign="top">
<p>This tutorial is part of our Asia Pacific workshop series covering how effective marketing is empowered by data driven decision making.</p>
<p>You can find out more about our Data Driven Decision Making Workshops here.</p>
</td>
</tr>
</tbody>
</table>
</figure>
If you want an object to use all the space of their parent object then you have to set 100% instead of px. However if the image should always just take 10% of the figure then it's 10%. That's assuming that the figure is the parent object of the img
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)
Our application makes heavy use of tables for layout and positioning, and has in the past been IE (quirks-mode) only. Moving forward, we are trying to get out of quirks mode, and replace the tables with divs and a more semantic layout.
The one thing stopping us is a quirks mode "feature" which allowed us to set height=100% on a table row, and have the row take up the remaing vertical space. So far, we have not been able to find a way to do this outside of quirks mode, either with or without tables.
This is the code we are using in the body of the page. No styling shown here, but the effect is still the same:
<table width="100%" height="100%" border="0">
<tr>
<td>
<table width="100%" height="100%" border="1">
<tr>
<th>This is my header bar</th>
</tr>
</table>
</td>
</tr>
<tr height="100%">
<td>
<table width="100%" height="100%" border="1">
<tr>
<td>This is my main section bar</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" height="100%" border="1">
<tr>
<td>This is my footer bar</th>
</tr>
</table>
</td>
</tr>
This is what it looks like in Quirks mode. Note that the middle row (with height="100%") has expanded to take up the remaining vertical space:
Standards mode renders the same code like this:
jsFiddle with the code: http://jsfiddle.net/RBeWN/3/ (Note that due to iFrames, etc. the code won't actually render in quirks mode on jsFiddle but you can force it by using Dev Tools).
I attempted to do this with divs and some css, but it doesn't work: http://jsfiddle.net/BVMhR/3/. Setting the main div to height: 100%; gives it the same height as its parent, rather than making it take the remaining space. Setting box-sizing: border-box; makes no difference to this either.
Could someone help me find a solution to this problem? I'd like to be able to do it without javascript if at all possible, but if Javascript is needed, it would have to be a generic solution that can run on every page so that there isn't too much development overhead for setting it up.
After playing around with quite a few different layouts, and clarifying a few specifics regarding the requirements, I have found a way to do this with pure CSS.
It does involve knowing the heights of both the top and bottom row (although they could be specified in %), and also does involve a few extra layers of divs.
My example can be found in this jsFiddle. Notice that when expanding / shrinking the window, the middle row re-sizes appropriately. It is also possible to make this one into a scrolling div if necessary (with overflow: auto) so that the content will scroll when it is too long.
Feel free to contact me with any extra questions about this layout if needed.
I don't think this can be solved with pure CSS.
http://jsfiddle.net/AZcZx/10/
This is how I would do it with javascript... I'm sortof assuming based on your names for the divs that this is how your pages handled header, content, footer and so this should be general enough for that.
I've added borders/margins to show that there is an edge case there, which jQuery helps nicely with... I also assume that the content vertical centering in your quirks-mode example is not part of the question.
EDIT:
I stand corrected. It can be done with CSS, though it creates a width issue that was not quite trivial to fix, so here's the fix for that:
http://jsfiddle.net/AZcZx/27/
Do you know the height of the header and the footer? Looking at your fiddle example with the divs, they both have a fixed height. If that is the case you could just absolutely position them to the top and bottom, and add a margin to the top and bottom of your #divMain.
You also need the html and body set to height: 100%; and the #divMain set to min-height: 100%;
You need to expand the body and HTML to 100% for this to work. "height:100%" makes an item 100% of its parent. Without a defined size of the parent, it will only be as large as its children.
body, html {height:100%}
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.