I had this newsletter http://jsfiddle.net/n5cGm/
with a container div to center the newsletter and to give it a background image,
OK, we experienced few problems with it when sending it, it changed from (browser)
to (Outlook): check the logo position; don't even bother the border radius. is only there for the browsers that support it; not important if not.
And this is the second (wrong for now) version I am trying with a table inside a table:
http://jsfiddle.net/9dchU/1/
which in Firefox works fine but embedded in jsfiddle not and in Outlook looks almost the same...
can you see the style that is messing the padding?
As some browsers, some e-mail clients neither able to display the border-radius parameter. I suggest, use image for the white background.
I would start over from scratch. You seem to have a tag that's either not closed, extra or useless. Let me explain, there is no point in using the tbody or th tags for emails. They cause rifts in designs every time I test. Your design is actually really simple. What you want to do is something like this:
<table cellpadding="0" cellspacing="0" border="0" style="font: Arial;">
<tr><td>
<img src="http://domain.com/top-image.gif" />
</td></tr>
<tr><td bgcolor="#ffffff" style="padding: 20px">
text text text
</td></tr>
<tr><td>
<img src="http://domain.com/bottom-image.gif" />
</td></tr>
</table>
Don't use background images for emails as they are not supported.
Here's what you do instead:
Take a look at the above picture. Forget about the four corners you're going to crop in in 3 slices horizontally.
The top would be your top-image.gif
mid you can discard, that's where your text should go.
Finally the bottom slice will be your bottom-image.gif
Hope this points you in the right direction.
Related
Most of the elements on my email page will line up on all email clients correctly if I give the tr and td correct height / widths and tr display inline-block. However on a certain block im having troubles getting the elements to line up without a gap / space between elements.
The first image is the rounded corners on the left and I got it to line up with the block next to it by giving the td / tr and smaller width than that of the img thats inside. However I cannot do this to the other blocks or else they just get smaller all together.
I can change my structure if needed but right now I've kinda limited myself by putting all elements as td's in one tr instead of each element being a tr
<tr>
<td>
<img left corners />
</td>
<td>
180
</td>
<td>
22
</td>
<td>
<img right corners />
</td>
</tr>
fiddle away! http://jsfiddle.net/Qh7En/1/
Thanks!
Here you go. :)
I basically altered the display property.
http://jsfiddle.net/Qh7En/7/
Also, it would probably be better if you didn't use inline CSS. Consider making a class instead.
Are you seeing this in all browsers?
It looks like a typical issue with images always having padding, unless you specifically tell CSS to remove it. Something as simple as adding "img { padding:0px }" to the CSS.
Several ways to fix this.
One is to comment out the white space between the elements.
.....
</td><!--
--><td
....
Demo http://jsfiddle.net/Qh7En/8/
I was looking at a method to move a right-floated image down and have content wrap around the top, side, and bottom.
Then since I wanted a vertically-centered bullet point for the content, I decided to use single-row tables. (I couldn't find a way without using tables...)
That's when I realized that Chrome and Firefox don't wrap tables around floated elements the same. In fact, Chrome does it right and Firefox doesn't.
Is there a way to make them consistent either way?
See http://jsfiddle.net/XPd9J/49/ and change the width of the result to see what I mean.
<div id="leftfloater"></div>
<div id="rightfloater"></div>
<table>
<tr>
<td class="centerbullet">
<img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/32/Actions-arrow-left-icon.png" />
</td>
<td>
Watch behavior when changing result width. Fox != Chrome!
</td>
</tr>
</table>
(Using Chrome 29.0.1547.66 m and FF 23.0.1)
Wow, that's weird. But it does seem like adding table{clear:left;} will make Firefox behave more like Chrome in this specific case.
A basic Website
Which has a One master Page and severl Content Pages.Content Page are vary in size.
i think to give a permanent Size for content Place.but Clinet screen may be different. so i used a table and make three row's
<table height="100%" width="100%">
<tr height="4%">header section</tr>
<tr height="95%">Content Place Holder here</tr>
<tr height="1%">footer Section</tr>
</table>
but its not working.
i googled it but doesn't get exact explanation.
As far as I'm aware the height is dependant on content when percentages are used, only if you give exact height will it keep to it. I might be wrong as I have not tested it.
So I have a table with only two columns and one row. The second td holds an image, and the first holds text. I would like the td containing the image to be at the minimum size possible with that image inside, and the first td to fill the remaining space. The following works in every browser except IE7 (we are not doing IE6):
<table> <tr><td style="width:100%;">TEXT</td><td><img src="jpg" alt="jpg" /></td></tr> </table>
What happens is this:
The page renders correctly, then when you mouse over the table, the first td expands to fill the entire table, pushing the image off the edge.
I could fix this with some jQuery to measure the width of the image and calculate remainder for the first td; but that solution is full of LAME!
Please help. I do not understand why IE7 feels the need to redraw the way it does.
Try the following code instead. Instead of explicitly declaring too much width, try explicitly declaring too little (because the image will push the width beyond 1% anyway.)
I am writing this off the top of my head without actually having looked in IE7, but I have IE7 in a Virtual Machine at home and so I'll comment back later if I find a different solution.
<table style="width: 100%;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>TEXT</td>
<td width="1%" style="width: 1%;"><img src="http://www.google.com/intl/en_com/images/srpr/logo2w.png" alt="Google Logo" /></td>
</tr>
</table>
There are a couple of things that you could try:
Make sure you're using a reset.css stylesheet to reset all of the browser defaults and accommodate any browser quirks. That's especially important with Internet Explorer.
Only use tables for tabular data — I'm not sure what the rest of your table contains, but unless there's going to be rows of data, it would be much easier to use a container div with a p and img floated.
Set the width and height on the img.
Use CSS position: relative; float: left; to see if it helps with positioning issues on hover. I see hover issues a lot with jQuery scripts and browser hacks like CSS3 PIE — if you're using those, try removing them.
Try setting the style="zoom:1" on the element.
I am not sure but looking at
<table> <tr><td style="width:100%;">TEXT</td><td><img src="jpg" alt="jpg" /></td></tr> </table>
from what I can see is that there is no table width on this, so IE does not know how to scale the td appropriately.
Another guess is because you're are declaring width as 100% on the first one IE interprets this to shove it off. Which is my guess, you can not have a width of 100% on the first cell because it means to take up 100% of the full table width.
clear you browser cache, specify a width and height on your image
i have seen the most weird stuff on ie7, like pagebreaks \n and such causing this effect, ie:
<a href="#>
<img src="jpg" />
</a>
to fix just put everything on the same line and without spaces (like your table with a space on the right)
also avoid using inline style, use a stylesheet (css)
I'm trying to get a scrollbar show up in a table cell whose content may grow bigger than the original table cell size, and I don't want the whole table to stretch out.
Here's the example on jfiddle. As you can see, it works in Google Chrome, but doesn't work in Firefox nor in IE: they just behave as if there was no overflow:scroll at all. Haven't tried it in Safari, but I suspect that won't work either.
So, who's at fault here, Chrome for implementing something which isn't supposed to be supported, or all the others? Update: to be clear, it's not the cell itself that is being overflowed, but a div I put into it. The code looks like this:
<table>
<tr>
<td class="header">
<div class="header">Header</div>
</td>
</tr>
<tr>
<td>
<div class="scroll">
... VERY BIG CONTENT HERE ...
</div>
</td>
</tr>
<tr>
<td class="footer">
<div class="footer">Footer</div>
</td>
</tr>
</table>
You can see it all over at jfiddle.
What I'm trying to achieve is a layout by which the available space between the header and the footer is completely filled out and if the space gets exhausted then it gets a scrollbar, not the whole window. I've come to understand, even by wading here on Stack Overflow, that With CSS alone, using just DIV's, this is not achievable (using absolute positioning isn't an option, because the elements are taken out of the normal flow and an "extreme" window resizing will cause elements to overlap).
Update: the flexbox model seems to be exactly what is needed in these cases. However, I suppose we can't rely on it being implemented broadly, still.
Is this what you are trying to achieve http://www.cssplay.co.uk/layouts/basics2.html?
If you look in the CSS spec you'll find the result of using rules like position and overflow on table elements are actually undefined. In fact tables have their own complicated layout rules that conflict with many CSS rules and the spec pretty much leaves it up to browsers to do what they want.
So to answer part of your question, it's really nobody's fault. No browser is right or wrong.
As for what to do about it you best option is to not use a table and failing that try embedding a div in the table cell and apply your rules to that.
UPDATED FOR YOUR EDIT
What you are trying to do conflicts with the table layout algorithm. What tables do by default is resize their cells to fit the contents of the row/column. Scrollbar notwithstanding You're trying to stop it doing that which is something not defined in the spec. There is no 'correct' way for browsers to do what you're asking with a table cell.
Your only real solution, other than relying on hacks and luck, is to listen to what people are saying and stop trying to achieve this layout using a table. There is nothing in your design that couldn't be achieved with 3 divs and right type of layout - especially if you don't care about IE6. That is the ideal solution you should be aiming for.
Couldn't you just make that into three separate tables with the middle table surrounded by a div so you can apply a scroll to it?
div {
overflow-y:scroll;
//set height to however large you would like your scrollable area to be
}
<table>
<tr>
<td class="header">
<div class="header">Header</div>
</td>
</tr>
</table
<div>
<table>
<tr>
<td>
<div class="scroll">
... VERY BIG CONTENT HERE ...
</div>
</td>
</tr>
</table>
</div>
<table>
<tr>
<td class="footer">
<div class="footer">Footer</div>
</td>
</tr>
</table>