I need curved bordered CSS for IE8 and all major browsers. currently I am trying with CSS PIE
jsfiddle demo is here. But I would suggest the answerers to download the PIE.htc file form here and try the HTML as a standalone page to get the real effect in IE8.
My problem is the <td> containing the "Thank you for registering" text is not curving in IE8 in jsfiddle. If I run it as a HTML page, it is curving in IE8 but the blue background is overlapping the "Thank you for registering" <td> (but its background is "#f2f2f2").
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin:0px; padding:0px;">
<tr>
<td> </td>
<td style="width: 60%; text-align: center;background: #0067C8;">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td colspan="3" style="height: 50px; background-color: #262626; width:100%; text-align: left;">
<img src="twitter_logo.png" width="200" height="50" alt"Twitter" />
</td>
</tr>
<tr>
<td colspan="3" style="height: 25px;"> </td>
</tr>
<tr>
<td style="width:3%;"> </td>
<td style="width: 94%; background-color: #f2f2f2; height: 400px; font-family: arial; font-size: 30px; color: #2DB8ED; text-align: center; border: 2px solid #bcbcbc;text-align: center;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; behavior: url(PIE.htc);">
Thank you for registering
</td>
<td style="width:3%;"> </td>
</tr>
<tr>
<td colspan="3" style="height: 25px;"> </td>
</tr>
</table>
</td>
<td> </td>
</tr>
</table>
I think its mainly because of Problems with z-index.
Check here for more details. general issues encountered when using PIE
Have you tried, http://jquery.malsup.com/corner/ jquery plugin to add curves?
$(function () {
$('table table tr:eq(2) td:eq(1)').corner();
});
Demo : http://jsfiddle.net/bDvRd/4/
Try add
position:relative;
z-index: 0;
by Using CSS3Pie htc for border-radius in IE8
OR CSS3 PIE - Giving IE border-radius support not working?
Related
I have a HTML newsletter table, to structure the content I want horizontal borders. Somehow the horizontal borders always have 100% width according to the table width. How can I achieve 20px padding to the left and right of it?
js fiddle
HTML
<table border="1" cellpadding="0" cellspacing="0" align="center" width="400">
<tr>
<td >Banana
</td>
</tr>
<tr style=" padding: 0 20px 0 20px;">
<td style=" padding: 0 20px 0 20px; border-bottom: 3px solid red;">
</td>
</tr>
<tr>
<td >Apple
</td>
</tr>
</table>
you can't able to do what you want in current code
you need to do some trick
see this
<table border="0" cellpadding="0" cellspacing="0" align="center" width="400">
<tr>
<td >Banana
</td>
</tr>
<tr >
<td> <hr style=" border:0px; margin: 0 20px 0 20px; border-bottom: 3px solid red;">
</td>
</tr>
<tr>
<td >Apple
</td>
</tr>
</table>
i have used (HR) tag in 2nd table row, this will solve your problem ☺
A border does not take padding into account, but it does with margin. See the CSS Box Modell for reference.
On CSS, there is the cascade. It parses top-dowmn and specific overrides general
There are many ways to achieve what you want (including ways in which we have to change the HTML code). Suppose you want to keep the table layout. You can just set the border-left and border-right of the middle td like this:
tr.hr > td {
border:none;
border-left:20px solid white;
border-right:20px solid white;
background:red;
height:3px;
}
HTML:
<tr> <td> Banana </td> </tr>
<tr class='hr'> <td></td></tr>
<tr> <td> Apple </td> </tr>
Demo.
Note that the color of border-left and border-right should be the same to the background color of your table. (they are all white in the demo).
Please have a look at the HTML email boilerplate.
http://htmlemailboilerplate.com/#f1
Limitations using CSS: http://www.campaignmonitor.com/css/. It solves may issues with ie. spacing amongst others and email clients rendering issues (Gmail, Outlook,Yahoo, ...)
HTML emails need to respect 600px width as it is a default for the preview.
To test the HTML email (if no mail configured on a testing server) you could use http://putsmail.com/ Check also on smart phone as many people tend to read mail on it
You can achieve the effect using a combination of 3 cells where the first and last use spacers and the middle can be a red solid color gif.
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td valign="top" width="20"><img width="20" height="3" src="transparent.gif" alt="" /></td>
<td valign="top" width="560">
<img src="red.gif" width="560" height="3" alt="" />
</td>
<td valign="top" width="20"><img width="20" height="3" src="transparent.gif" alt="" /></td>
</tr>
</table>
I want to have in a, e-mail that I code in HTML, a div with two colors and a text in span.
I have coded this:
<div class="msg" style=" width: 500px; background-color: gray; position: relative;">
<span class="text" style="font-size: 11px; color: white; position: absolute; bottom: 5px; left: 1%;">A text in a span.</span>
<div class="refus" style="width: 50%; height: 25px; background-color: #EF4135"></div>
</div>
You can find a demo here:
http://jsfiddle.net/aWvcp/2/
The problem is, in an mail tool like Thunderbird, it's working but not in outlook.
Is it possible to have the same render but for compatible with Outlook?
To ensure strictest adherence to your design, I would avoid <DIV>s, CSS position statements and spans. Be as regimented as possible with tables, inline margin tags and <p> with inline style. See a recreation of what you wanted in JSfillde.
It is hard to tell exactly what you are after, but here is an example in proper html email format:
<table width="500" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50%" bgcolor="#EF4135" valign="bottom" style="font-size: 11px; color: white; padding:1%; padding-bottom:5px;">
First column<br>...<br>...
</td>
<td valign="top" width="50%">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="25" bgcolor="#818181">
</td>
</tr>
</table>
</td>
</tr>
</table>
I'm trying to make a HTML email template (difficult at the best of times) and I am trying to have a double line between the header and content. I'm trying to use border styles to achieve this like so:
<div class="1"> header image </div>
<div class="2"> random text </div>
using a head style sheet:
.1 {
margin:0;
padding: 0;
border-bottom:thin solid red;
}
.2 {
margin:0;
padding: 0;
border-top:thin solid yellow;
}
it seems to work fine in WLM and other email clients, but not outlook.
In my experience working with email HTML and Outlook, I find I always come back to using tables for layout. The many different email clients do many weird things to HTML, but table layouts seem to be the most cross-client compatible. So, consider something like this:
<table cellpadding="0" cellspacing="0" width="100%" style="border-bottom: solid 1px red;">
<tr>
<td> header image </td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%" style="border-top: solid 1px yellow;">
<tr>
<td> random text </td>
</tr>
</table>
I haven't tested this, but it's what I'd try first.
Oke to sart with, the easiest way to make a nice e-mail template is with tables ( not sure if you use them. Try to link as less as possible to your css but do style="" as much as possible.
And take a look at this one :OVER HERE! this one helped me out alot
I would suggest you use inline CSS for the border style and hex values for the color. I have changed your code to old school CSS. Tried and tested on Litmus
<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="ffffff">
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="50%" style="border-bottom: solid 1px #ff0000;">
<tr>
<td> header image </td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="line-height: 20px; font-size: 20px;"> </td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="50%" style="border-top: solid 1px #ffff00;">
<tr>
<td> random text </td>
</tr>
</table>
</td>
</tr>
</table>
vertical and horizontal alignment and height percentage not working correctly in firefox Although it works fine on IE and Chrome
i set hight and width to 100% in html and body
html,body { heigh:100% ; width:100% }
and i tried all possible solutions like text-align: -moz-center; display:block;
and here's my code
<table cellpadding="0" cellspacing="0" border="0" style="width: 100%; height: 93%;">
<tr style="height: 42px; width: 100%">
<td style="width: 80px; background-image: url(Images/logo.png); background-repeat: no-repeat;
height: 42px;">
</td>
<td style="height: 42px">
</td>
</tr>
<tr align="center" valign="middle">
<td style="height: 196px;" align="center" valign="middle">
<table class="partTable" style="padding-bottom: 20px">
<tr>
<td align="center" style="font-size: xx-large; font-family: Arial Black; color: #C11B17">
<span>
<%=System.Configuration.ConfigurationManager.AppSettings["AppName"]%>
</span>
</td>
</tr>
</table>
<table border="0" style="text-align: -moz-center; vertical-align: middle; display: block;
margin: 0 auto;">
<tr>
<td valign="middle" class="partHolder" style="width: 314px; height: 201px;">
--Content
</td>
</tr>
</table>
</tr>
notice: the table doesn't take the 93% of the page. it takes like an auto .and thats happened when I put <!DOCTYPE html> before html tag
Use style margin:0 auto to center your table.
Make sure all containers for table are height: 100%;
For example:
this will work
this won't work - and here is the fix
And you have some misconvenience in your code:
<tr style="height: 42px; width: 100%">
^^^^^^^^^^^^ this is ok
</tr>
<tr align="center" valign="middle">
<td style="height: 196px;">
^^^^^^^^^^^^^^
This is wrong. you should
remove it to make table auto-risze.
And you should use `height` only to <tr>
it takes like an auto .and thats happened when I put
before html tag
Firefox simply goes mad if you use height:93% and then you use height:42px,height:196px for rows. I believe Firefox is using more strict method to render HTML+CSS when you use <!DOCTYPE html> tag
Also.. don't use text-align for table,tr - because they doesn't contains any text. Use it only for td
I am working on HTML email and trying to center a green TD in a white TR so that there's a 20px white margin on the left and right of the green box.
I tried setting TD width for the green portion and setting margin 0 auto but the green just expands to the width of the TR.
Tried putting in 2 more TDs to push the green TD into the center and that didn't work either.
Including the code snippet, am having trouble with the TR that has #a6d971.
<table cellspacing="0" cellpadding="0" border="0" width="600" height="" bgcolor="" style="margin: 0 auto;">
<tbody>
<tr>
<td style="margin: 0 auto;">
<img width="600" height="23" padding="0" src="assets/graphic_scalloped_top.png" alt="" style="display: block;" />
</td>
</tr>
<tr bgcolor="#fff" height="75">
<td valign="top" style="text-align:center;">
<p style="margin:0; padding-bottom: 3px; padding-top: 3px; color:#545d69; font-size: 24px; text-align:center; font-family: Arial, Helvetica;">
Regular sales happen every day
</p>
<p style="margin:0; padding-bottom: 3px; padding-top: 3px; color:#4bc1d6; font-size: 16px; text-align:center; font-family: Arial, Helvetica;">
9am - 11pm
</p>
</td>
</tr>
<tr bgcolor="#fff" height="75" padding="10">
<td bgcolor="#000" width="20"></td>
<td bgcolor="#a6d971" width="300" style="margin: 10;">
</td>
<td bgcolor="#000" width="20"></td>
</tr>
<tr bgcolor="#fff">
<td valign="top">
<table cellspacing="0" cellpadding="10" border="0" align="center" width="100%" bgcolor="#fff" style="">
<tbody>
<tr>
<td height="80" style="font-family: Helvetica, Arial, sans-serif; font-size: 18px; font-weight: bold; color: #555; background:url('assets/graphic_9am.png') no-repeat; background-position: 10% center; padding:10px; margin:0;">
<h3>Nine # Nine</h3>
<p>Fuel up! Dresses, tunics and other items including:</p>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="margin: 0 auto;">
<img width="600" height="23" padding="0" src="assets/graphic_scalloped_bottom.png" alt="" style="display: block;" />
</td>
</tr>
</tbody>
</table>
Switch to DIV's and CSS, most emails client supports styles pretty well, you can use a DIV inside your TD element, it'll be easy to center or do other things you might want.
For Example
<tr style="background-color: white;">
<td style="background-color: green;">
<div style="background-color: purple; margin-right: 20px; margin-left: 20px;">Content Here</div>
</td>
</tr>
Also note if you use DIV's you can also avoid tables.
Hack on top of a hack.
<table width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="border-left: 20px solid white; border-right: 20px solid white; background: green; color: white; text-align: center;">
This is stuff.
</td>
</tr>
</tbody>
</table>
http://jsfiddle.net/zy6GU/
Incidentally, the same thing should work with a DIV:
<div style="border-left: 20px solid white; border-right: 20px solid white; background: green; color: white; text-align: center;">This is a DIV.</div>
http://jsfiddle.net/zy6GU/1/
If you HAVE to use tables, might as well abuse them a little:
<table><tr align="center">
<td width="50%">one</td>
<td style="background-color:green">two</td>
<td width="50%">three</td>
</tr></table>
http://jsfiddle.net/mblase75/yntfu/
I'm not a CSS expert but this works for me (with no extra tags) :
<table>
<tr style="background-color: white; border: 1px solid black;">
<td style="background-color: green; display: block; margin: 0 20px;">
<!-- Content -->
</td>
</tr>
</table>
What are you talking about 'for emails'? You mean an email address, like Email Me? If so you'd want some css that centers the link in the TD, or in combination with colspan on the TD.