I have a problem with e-mail clients reverting my styled <hr/> to one with just a solid line.
The following is my mark-up, looks fine in Chrome and IE but Outlook always reverts the dotted line to a solid one.
<hr style="background:none; border:dotted 1px #999999; border-width:1px 0 0 0; height:0; width:100%; margin:0px 0px 0px 0px; padding-top:10px;padding-bottom:10px;" ></hr>
I have looked at Campaign Monitor but nothing particular to guide me there.
All answers appreciated.
I would imagine it's because outlook uses the Microsoft word rendering engine, rather than a HTML engine, and a hr tag would just get reverted to a solid line as in msword.
I'd probably try using a full width table->cell or div and style that instead of using an hr tag.
<table>
<tr>
<td style="background:none; border:dotted 1px #999999; border-width:1px 0 0 0; height:1px; width:100%; margin:0px 0px 0px 0px; padding-top:10px;padding-bottom:10px;"> </td>
</tr>
</table>
nbsp is in there in case the rendering engine doesn't recognise empty cells.
Based on the other answers, I found this to work best:
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td style="background:none; border-bottom: 1px solid #d7dfe3; height:1px; width:100%; margin:0px 0px 0px 0px;"> </td>
</tr>
</table>
<br>
The width seems to be needed on table in % or preferrably (as per https://www.campaignmonitor.com/resources/will-it-work/guidelines/) set it in px on the td if possible.
The border-bottom shorthand seems to work fine, where the longhand versions as mentioned in kolin's answer don't in Outlook.
EDIT: What I found to have used previously and also works, at least in Outlook (would be nice if anyone who can, could test that in other clients), is a <hr>based approach.
<hr height="1" style="height:1px; border:0 none; color: #D7DFE3; background-color: #D7DFE3; margin-top:1.5em; margin-bottom:1.5em;">
Rather inelegant and only useful for a known fixed width but I'm finding that these are the terrors visited upon you when trying to fix formatting in html emails'.
<p style="line-height:20%; color:#cccccc; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;">........................................................................................................................................</p>
You can use this example:
<div style="border-top: 1px dotted #999999;"> </div>
It will only work against white background unfortunately
Need to declare a font-size, otherwise " " messes with the height.
<tr><td style="background:none; border-bottom: 4px solid #DC1431; height:1px; width:100%; margin:0px 0px 0px 0px; font-size: 1px"> </td></tr>
Related
Can someone tell me what is wrong with the following code? Basically I want the table to be styled so it has the border, the BG color and aligned to the top.
Thank you.
<td style="border: solid 2px #111111;" bgcolor="#d9e2f4;" vertical-align:top;">
You have styles outside of the inline style="" declaration.
<td style="border:solid 2px #111111;background:#d9e2f4;vertical-align:top;"></td>
Ideally, the styles should be separated from the HTML. Place them in their own stylesheet.
table td {
border:solid 2px #111111;
background:#d9e2f4;
vertical-align:top;
}
I don't see your whole code but it should be:
<table class="yourClass">
<tr>
<td>....</td>
</tr>
</table>
and the css code should be:
.yourClass{
border: solid 2px #111111;
background-color: #d9e2f4;
vertical-align:top;
}
I'm working on a mobile site targeting older phones that have limited CSS \ html support and so I'm reverting to tables.
What I'm trying to achieve on a particular page is to have a table row with a heading of a particular value and then another row in the same table with the value and a link to edit
The problem is that the heading spans only one column and I would like to be able to style it so that there is some padding and margins as well as a border.
Can someone provide some advice on how to do this?
HTML
<div class="navalt">
<table style="width:100%;">
<tbody>
<tr class="edHeading">
<td><fmt:message key="editprofile.location"/></fmt:message></td>
</tr>
<tr>
<td class="leftTd">USA</td>
<td class="rightTd">Edit</td>
</tr>
CSS
.navalt {
text-align:center;
padding: 4px 0px 4px 4px;
border-top: thin solid #C5C9D1;
border- bottom: thin solid #C5C9D1;
}
.edHeading {
padding: 4px 0px 4px 4px;
background-color:#E9E1FF;
}
.leftTd {
border-right: thin solid #C5C9D1;
padding: 0px 0px 0px 5px;
text-align:left;
width:50%;
}
.rightTd {
padding: 0px 5px 0px 0px;
text-align:right;
width:50%;
}
As Wabs said, you could just add a colspan to your td in the heading.
Another way, which will allow you to separate your styling more, is to use the thead tag - seeing as you have used <tbody> this would make more sense.
Also - as a side note, you have no closing tags for your div and body and table - though i assume this is because you only copied part of your code..?
Here is a fiddle: http://jsfiddle.net/f6NKt/2/
the code is as:
HTML
<table style="width:100%;">
<thead>
<tr>
<th colspan="2">Heading - location use th tags</th>
</tr>
</thead>
<tbody>
<tr>
<td class="leftTd">USA</td>
<td class="rightTd">Edit</td>
</tr>
</tbody>
</table>
and CSS - notice use of thead instead
.navalt {text-align:center;padding: 4px 0px 4px 4px;border-top: thin solid #C5C9D1;border- bottom: thin solid #C5C9D1;}
thead {padding: 4px 0px 4px 4px;background-color:#E9E1FF;}
thead th {font-size:20px;}
.leftTd {border-right: thin solid #C5C9D1;padding: 0px 0px 0px 5px;text-align:left;width:50%;}
.rightTd {padding: 0px 5px 0px 0px;text-align:right;width:50%;}
Unless I'm missing something, could you not add colspan=2 to the header <td> so it spans your entire table?
<tr class="edHeading"><td colspan="2"><fmt:message key="editprofile.location"/></td></tr>
I have a very simple table:
<table border="1" class="my-table">
<tr class="head">
<th>head-1</th>
<th>head-2</th>
<th>head-3</th>
<th>head-4</th>
<th>head-5</th>
</tr>
<tr>
<div class="row-data">
<td>data-1</td>
<td>data-2</td>
<td>data-3</td>
<td>data-4</td>
<td>data-5</td>
</div>
</tr>
</table>
As you saw above, the second row <tr> contains a <div> which then contains <td>s , the reason why I did this is that I want to have a row background which has border-radius css feature for each row instead of for each column(<td>)
(I konw if I put <div> inside <td>, the following css will take effect, but that's not what I want see here , it is a column based border-radius background, however I need a row based one.)
my css:
.row-data{
background-color:#ececec;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
But it does not work in this way to have a row<tr> based border-radius css feature, how to get rid of it?
You can run my code on jsfiddle here
Instead of making a new div for it just add the class to the row: <tr class="row-data">
check this may be that you want http://jsfiddle.net/sandeep/EWPVc/24/
td{
background-color:red;
}
td:first-child{
border-radius:10px 0 0 10px;
-webkit-border-radius:10px 0 0 10px;
-moz-border-radius:10px 0 0 10px;
}
td:last-child{
border-radius:0 10px 10px 0;
-webkit-border-radius:0 10px 10px 0;
-moz-border-radius:0 10px 10px 0;
}
border-radius can apply on table, but not the row.
Check out this demo of border-radius for table: http://vamin.net/examples/rounded_tables.html
Hi this question might be asked a few times, but I can't find a specific example for what I'm doing, I have a footer:
<div id="Footer">
<table>
<tr>
<td colspan="3">
<span>Copyright</span>
</td>
<td>
<asp:Label runat="server" ID="lblVersion"></asp:Label>
</td>
</tr>
</table>
</div>
and this CSS:
div#Footer
{
padding: 4px 1px 1px 0px;
margin: 0px;
margin-top:80px;
border-top: thin solid #000000;
height:1.5em;
background-color:#333333;
color:White;
}
In IE6 this worked fine, in IE8 in resolutions of 1280 x 1024 and above this works fine, but below this resolution or when the IE window is made smaller, the footer floats, I've tried setting position/float/clear/display style settings with no luck, does anyone have any ideas how to make this stick at the bottom in smaller screen resolutions?
read this :
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
I have the following simple table to reproduce the issue:
<TABLE>
<TR>
<TD style="border: black solid 1px; width:24px; height:68px; margin:0px; padding:0px" >
<IMG
style="width: 24px; height: 68px; margin:0px; padding:0px; border:none"
src="Image24x68.png">
</TD>
</TR>
</TABLE>
The image is actually 24x86 pixels large. The border is just to mark the cell's boundaries. There is no css file assigned to the document.
I want the cell to be exactly as large as the image.
The problem is: the table cell gets always rendered a few pixels too high in any IE version (6, 7, 8) while it works fine in Firefox and other browsers.
Is there any solution / workaround for this?
You can set the images to display as block elements and this should remove the space.
<IMG style="display: block; width: 24px; height: 68px; margin:0px; padding:0px; border:none" src="Image24x68.png">
Looks like this: http://www.evilfish.co.uk/2007/07/31/ie-white-space-after-image-bug/
Remove all whitespace between the image and the closing td tag. In front of the image it doesn't seem to matter.
I tried all the other solutions on this page:
using display:block
removing whitespace in the <td> tags (i.e. I used <tr> and <td> tags without putting any whitespace between them)
using
padding:0px;
border-spacing:0px;
border-style:none;
border-collapse: collapse;
margin:0;
overflow: hidden;
Except for approach (1), these didn't work on IE. After tearing my hair out for three hours, I found this better solution: add a hspace=0 attribute to the image tag. For example:
<img src="http://www.printersrose.com/css/myimages/book1.jpg" alt="Header1"
class="ImageHeader" hspace="0">
I set up an example of this at http://www.PrintersRose.com.
Try the following:
<table>
<tr>
<td style="border: 1px solid black; font-size: 1pt;">
<img style="width: 24px; height: 68px; margin: 0;
padding: 0; border: 0" src="Image24x68.png" />
</td>
</tr>
</table>
(PS Use lower case for HTML tags.)