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
Related
I'm currently working on an email template for a project. Basically, I have a table set up, one row contains some stripes, the next a black bar (to match the site's layout).
Question is: Is there a way to place an image in the table, and have it continue into the second row without destroying the formatting of that second row?
Many thanks,
Will
EDIT:
This is the outlook at the moment:
<table style="width: 100%; height:18vh;" cellspacing="0" cellpadding="0" style=" border-collapse: collapse; border-spacing: 0;" background="http://s588191233.websitehome.co.uk/projects/kindle/img/emailwallpaper.jpg">
<tr height="80%">
<td>
</td>
</tr>
<tr style="background: #222; height: 20%;">
<td>
</td>
</tr>
</table>
Trying to have the image appearing on the left hand side. Normally, I would achieve this via absolute positioning, but I can't as its email. We tried to approach of segmenting the image, but getting it to scale between email clients proved nigh on impossible.
You can do this with "rowspan". The code is below and here is a fiddle.
<table style="width: 100%; height:18vh;" cellspacing="0" cellpadding="0" style=" border-collapse: collapse; border-spacing: 0;">
<tr>
<td rowspan="2" style="background: url('https://leadingpersonality.files.wordpress.com/2013/05/smug-smile.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center center; width: 100px;"></td>
<td style="background-image: url('http://s588191233.websitehome.co.uk/projects/kindle/img/emailwallpaper.jpg');">
<div style="height: calc(18vh * .8);"></div>
</td>
</tr>
<tr>
<td style="background: #222;"><div style="height: calc(18vh * .2);"></div></td>
</tr>
</table>
I have my align="center" and everything is all set, except the text will NOT center! Can someone assist and show me what I did incorrectly in this? And by the text I mean my header text the "Page Header" text listed in my code below.
<table style="text-align: left; width: 1000px; height: 251px; background-color: rgb(15, 100, 23);" border="0" cellpadding="3" cellspacing="1">
<tbody>
<tr style="font-family: Tahoma; color: white;" align="center">
<td colspan="2" rowspan="1" style="vertical-align: middle; width: 100px; background-color: rgb(46, 480, 256);"><a name="ph2">Page Header</a>
</td>
</tr>
<tr>
<td style="width: 100px;">
<br>
<td style="vertical-align: top; font-family: Tahoma; background-color: white;"></td>
EDIT ---
when i ran my syntax here for testing it was not showing as centered, increasing to 100% as suggested below is showing correctly.
JSFiddle Example
It was centered for me too, I changed your width to 100% so that it is centered to the screen.
https://jsfiddle.net/f9nngu82/
<table style="text-align: left; width: 100%; height: 251px; background-color: rgb(15, 100, 23);" border="0" cellpadding="3" cellspacing="1">
<tbody>
<tr style="font-family: Tahoma; color: white;" align="center">
<td colspan="2" rowspan="1" style="vertical-align: middle; width: 100px; background-color: rgb(46, 480, 256);"><a name="ph2">Page Header</a>
</td>
</tr>
<tr>
<td style="width: 100px;">
<br>
<td style="vertical-align: top; font-family: Tahoma; background-color: white;"></td>
You can also try and use the center tag and put everything in between.Not the best way, but it works.
< center> < /center>
I have the following HTML code:
<table width="600px" height="275px" cellspacing="10" cellpadding="0" border="0" align="center" style="background: #ffff00; padding-left:0px; padding-right:0px; text-align: center;">
<tbody>
<tr>
<td colspan="3">Silo'd Doc & Header - "Your doctors wants to connect with you."</td>
</tr>
<tr style="text-align: center;">
<td style="height: 275px; width: 175px; background: url('http://wmed.com/images/email/POLCampaign/BlueBox.png') no-repeat;">STUFF GOES HERE</td>
<td style="height: 275px; width: 175px; background: url('http://wmed.com/images/email/POLCampaign/BlueBox.png') no-repeat;">OTHER STUFF GOEScd HERE</td>
<td style="height: 275px; width: 175px; background: url('http://wmed.com/images/email/POLCampaign/BlueBox.png') no-repeat;">AND FINALLY</td>
</tr>
</tbody>
</table>
Displays the following in IE:
And the following in FF:
I would use SPAN/DIV but only table is allowed in my codebase.
How can I have it so the blue boxes are centered horizontally within the yellow main table and each blue boxes contents stays inside the blue boxes with a 5px padding at the edge in all the browser?
add overflow:auto and word-wrap:break-word to your <td> elements.
CMIIW~
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 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?