Being a customer service staff with limited access to basic html, I've been assigned a task that beyond my skill about making a decent page of highlight items, after series of search around, I somehow get things working, well, in firefox, when I load up the the same content in Chrome & IE, I found different problem and to my best effort, I have no idea what cause the problem...
You might first wish to look at the firefox version as it display perfectly as I wanted it to:http://jsfiddle.net/kitchellw/TR6v5
(and I don't know why the first line doesn't apply the CSS...)
In IE, the round corner gone, which I won't worry too much... but
padding is gone...
the lower table looks like a mess
I found a way to tackle the image border, just border=0
In chrome,
while the upper section looks ok, the content in lower table seems 'shifted' to right by a few pixels and no longer stay center
Here is the exact code for the problem table at the lower section:
<table class=highlightitem>
<tr>
<td height="200" valign="top" >
<center>
<a href="http://www.digitalbuydirect.com/index.php?route=product/category&keyword=DSC-TX30" target="blank">
<img width=234 src="http://www.digitalbuydirect.com/edm/eDM20130516/TX30.png" /></a>
</center>
</td>
</tr>
<tr>
<td height="200" valign="top" >
<font class=product><B>some text</b></font><br><br>
<font class=content>some text</font><br>
<br>
<font class=pricehighlight><B>price</font><BR>
<font class=content><s>other price</s></font>
</td>
</tr>
<tr>
<td align="right" height="50" valign="bottom" >
<img src="http://www.digitalbuydirect.com/edm/achieve/shopnow_35.png" /> </td>
</tr>
</table>
and finally, I know my code is complex by using multi-table to control the vertical position, and CSS is my friend here, but i were unable to get the 'shop now' icon station at the lower right corner with clickable url attach with it, I found a CSS background image with a display block for the url might work, but the display block still request at least 1 character, which I cannot afford on my image. Any hint or direction would be appreciated.
First of all, you should really clean up your deprecated code.
So far the things I've seen that are deprecated or not supported anymore are as follows:
<center> - Use CSS text-align:center; reference
<font> - Use another element like <p> coupled with CSS text styling
<td align="right"> - Use CSS float:right; reference
<td valign="top"> - Use CSS vertical-align:top; reference
As for your IE padding problem, take a look at this question. I'm not sure if that's applicable though, since you didn't include your CSS in the question, so I don't know how you implemented the padding you already have.
As for centering, using margin:0 auto; will work for statically positioned elements. For absolutely or fixed position elements I do this: #elementID{width:800px[specify width]; left:-400px[negative half of the width]; margin-left:50%;}
Related
I want this layout where I have a rectangular box. And inside the box on the left there is a text and on the right there is an image. This looks fine in the browser, but when sent out as an html email, in outlook the float right doesn't seem to work. It puts the image in the next line under the text. Any ideas on how to make this work? (I am trying to avoid using tables.)
<div style="width: 100%;border-style:solid;overflow: hidden;">
<span style="float: left;">
<h3> Your appointment Details</h3>
</span>
<span style="float: right;">
<img src="someImage"/>
</span>
</div>
Very late to the conversation, but here is how to "float" in html email using align="" instead.
Example here
Also, if you are looking for resources on html email (I assume you are as the answer you marked correct is very general), here is a huge list of resources.
This is a really good guide from Mail Chimp on Coding for HTML Emails:
http://kb.mailchimp.com/article/how-to-code-html-emails
Some basic tips:
Use tables for layout.
Set your widest table to be maximum of 600px wide.
Don't try and use JavaScript or Flash
Don't use CSS in a style tag as some mail clients will discard it.
Use inline CSS styles only.
Basically code your emails as if it was roughly 2003.
CampaignMonitor provide this rather brilliant guide to all CSS support across multiple email clients, which is also available as a pdf or xls download.
As the answers above say, email support for CSS is very limited, mostly due to Microsoft's descision to use Word as its html rendering engine.
Simple floating images can be like
<img src="yourimage" align="left" />
BUT that way you won't get solid results with padding between text and image, outlook removes margin and padding and your text will stick right next to the image. So try this:
<div style="text-align:justify;">
...a lot of text here untill you want to insert an image that floats left...
<table cellpadding="0" cellspacing="0" align="left" style="float: left;">
<tr>
<td>
<img src="yourimage" align="left" vspace="4" />
</td>
<td width="15"> </td>
</tr>
</table>
...a lot more text here until you need an image that floats right...
<table cellpadding="0" cellspacing="0" align="right" style="float: right;">
<tr>
<td width="15"> </td>
<td>
<img src="yourimage" align="left" vspace="4" />
</td>
</tr>
</table>
... a lot more text here...
</div>
You need to wrap a 'table' element around it to get the padding-margin effect to work in Gmail, Outlook (online), Microsoft Outlook (desktop client),...
Give the table an align=left or right attribute. (Edit answer here: in addition and fallback for other email clients also give the table a float value so do both. They are back-ups to each other. Some clients understand "float", others understand "align", some understand both,...) Your table will float in the text almost like an image does. The only difference is that in outlook a table generates an automatic line break in the text where an image with align left or right does not generate breaks.
For setting the margin, since we are now working with a table, add an extra "td" with a width="15" to the left or right of your image cell and a non-breaking-space in it. (or a transparant gif -> spacer.gif)
You better not leave cells empty because otherwise the width of your cell will not be respected in certain email clients
For top and bottom margin we can use the 'vspace' attribute, don't forget to give the image an align = left or right attribute. Otherwise the 'vspace' will not work.
I've found a way to apply float on Outlook.com.
Just capitalize the tag like Float:left.
<span style="Float:left;">Content to float</span>
Maybe you should use !important too;
I tested it and it worked.
check out https://www.campaignmonitor.com/css/ here it has listed what are all the things supported and not supported in email
Instead of float you can use an outer table and put contents you want to float left in left td of outer table.
this is not an elegant answer but I did it this way
When you are floating something to the right of something the right floating element should allways apear first in code. Like this:
<div style="width: 100%;border-style:solid;overflow: hidden;">
<img src="someImage" style="float: right;"/>
<h3> Your appointment Details</h3>
</div>
I am using Div in my website to display some links. It works fine in IE, but when i expand that div in firefox and google chrome it goes weird.
Can anybody help me to figure it out. I have googled it but i did not fine any useful solutions.
<td vAlign="top" align="center"><font>-</font></td>
<td align="left" >
<div align="left" style="margin:0 auto; padding:0; display:block;clear:both; position:relative;">
<A class="inkblue" href="javascript:expand(4);">Faculty & Staff</A
</div>
</td>
<td></td>
</tr>
<tr id="e4" style="DISPLAY: none">
<td></td>
This is the code for that section. Please let me know if anything required.
This is the link to site. open it in firefox or chrome and click the link
"Faculty & Staff" under "Campuses" .
I have gone through your site:
I saw that you are using below line double time. Insert this line only one time.
If your are trying to Override some classes then specify different css file name.
<link rel="stylesheet" type="text/css" href="css/nuonline.css">
To overcome your issue:
Currently on click of "Faculty, Events & Campus", you are doing style="display:inline". Rather than doing this way you can remove style attribute itself.
Example:
On click: Remove style attribute style="display:none" for id="e4" or id="e5" or id="e7"
To Reset (that is on next click): Add style attribute as style="display:none" for id="e4" or id="e5" or id="e7"
There is one blank <td></td> remove it and give colspan="2" to next td element
I am coding a newsletter in a table format that ought to be compatible with (mostly) every e-mail client, but Outlook 2007 adds 1px spaces to every image that's in one row with text-elements.
I set border-collapse: collapse, cellpadding="0" and cellspacing="0" on the table and style="font-size:1px; line-height:0;" on the TDs but it doesn't work. IMGs are display:block. Also setting valign="bottom" on the top element and valign="top" on the bottom one didn't work.
Here is my fiddle: http://jsfiddle.net/ycpNK/9/ - The red and the green boxes are the ones affected by the spacing. You can reproduce this bug in Outlook 2007.
Does someone know how to get rid of the spaces?
If I recall correctly, setting display:block on the image corrects this behaviour. So try:
<img src="myimage.jpg" width="100" height="20" style="display:block;" />
Another thing to try is to remove all unnecessary whitespace from the cells that you're getting the problems.
By 'remove unnecessary whitespace' I mean if you have this:
<td> *here there may be several spaces and a return character*
<img src="foo.gif" />
</td>
Replace it with this:
<td><img src="foo.gif" /></td> *no unnecessary spaces or returns*
It's hard to diagnose the problem without seeing your html but this has fixed some of my layout errors.
I have a client form which includes HTML served up from an iframe - I can't edit it. The only thing I can do is apply CSS edits.
I'm trying to apply a simple adjustment which would stack the <td>s in the form so
1. What is your age?
becomes
1.
What is your age?
If you right click the first question and Inspect Element you'll see the rather interesting DOM structure I get to work with. This example it looks like this:
<div id="Age" class="questionlabel">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<span class="questionnumber_questionlabel">1. </span>
</td>
<td>
<label class="required">What is your age?</label>
</td>
</tr>
</tbody>
</table>
</div>
When I inspect that <td> and add a display:table-row; it completely ignores me. This is in Chrome - I can replicate this DOM and get the CSS to do what I want in jsfiddle so I'm thinking there is a reset somewhere I can't see. I even tried display:table-row !important; to no avail. I can apply border:2px solid blue; no problem. I can apply display:none; no problem.
Any ideas as to what is going on here that would prevent this simple CSS param from working?
To re-iterate the ONLY thing I can do is apply CSS - No JavaScript and no HTML edits. Basically I pass in a CSS file in the url to the iFrame. That's all I get. Thanks!
EDIT: I apologize I had to remove the link to the example form on the live site.
Edit - screenshots had to be removed, but the solution is still valid.
Added this code to form-css.css, using Firebug. Beginning or end, it did not matter:
table#form_table div.questionlabel td {display: table-row !important;}
.questionnumber_questionlabel {margin: inherit!important;}
(Note: I reset that margin as the old one (-10px) was causing unsightly overlap.)
I'm trying to give even spacing all around images I have in a table, and it's not working too well.
Look at the page. I tried margin, padding, everything I could on lots of different types of properties, but no luck. Any help?
The table has been created in an unusual way by photoshop - resulting in dodgey markup.
There a differing amount of <td>'s in the first row compared to the others
There are several spacer images which have been created by photoshop; which are redundant
There should be no need for the use of rowspans in your <td>'s
To fix this issue I would suggest modifying your table so the structure looks like this:
<table cellpadding="5">
<tr>
<td><img src="images/index_01.png" width="463" height="200" alt=""></td>
<td ><img src="images/index_02.png" width="465" height="200" alt=""></td>
</tr>
....
Then keep adding blocks of table rows e.g.:
<tr>
<td>... </td>
<td>...</td>
</tr>
with your links and images replacing the '...'. then finally close the table:
</table>
Hope this helps.
The problem is your rowspan="2" on your second cell... remove that and the spacing evens out. You may also want the following CSS (tested with Firefox/firebug rewrites)
<style>
#Table_01,#Table_01 a {margin:0;padding:0;}
#Table_01 img {padding:1em;}
</style>
Try specifying value for cellpadding attribute for the table.
Your markup is all wrong. You have TDs using rowspan when its not needed and i see some spacer gifs. Fix the markup and you wont have any issues with using cellpadding