I know there are many such posts, but none of the solutions works for me. I am using wordpress.com, which is extremely poor and has lots of flaws in general. So I just wonder if that is just one more "constraint" which wasn't mentioned along with the billing.
I have a simple HTML code, which works perfectly well in http://www.w3schools.com interpreter. It doesn't work when using wordpress.com.
<table border="0">
<tbody>
<tr>
<td align="center" width="90%">A</td>
<td align="center">B</td>
</tr>
</tbody>
</table>
I have tried border-collapse property as well. How to remove table borsers, or how to work around this problem?
I found the tip which works. This is wordpress.com specific issue. Solution is given here. It has to be stated
<table style="border:none;">
and in each cell
<td style="border:none;">
Have you tried this?
<table style="border: none; border-collapse: collapse;" border="0">
You can also check your styles.css and see if there are specific styles for your table.
If you want to target a specific table then just use an ID or a class instead.
.table, .td, th {
border: 0;
}
If still not working add border: 0 !important; and make sure that the css is rendered on your views by checking via inspect element...
Our CRM allows us to send automatic emails to our customers using their software. Things like purchase receipts and so forth. While they offer HTML editing of the emails, it's heavily restricted and we may not use any CSS.
As far as what their style guide does allow, it appears to be all HTML and some inline styling, for example:
<span style="color:#ffffff">white</span>
<div style="color:#ffffff">
<img src="dickbutt.gif" style="width:30px;height:20px">
...are all OK according to the guide. However, no other CSS or CSS references are allowed, including:
<link rel="stylesheet" href="/stylesheet.css" type="text/css">
or
<style type="text/css">
#import "/stylesheet.css";
</style>
or
<style type="text/css">
body { color:green; }
</style>
To add insult to injury, and I should have included this above, everything above the <body> tag (and including the body tag itself) is stripped out upon saving the file in their in-software HTML editor. They have some kind of auto-code modification scripts that reference the "approved" code in their style guide, and strips what's left. So what am I left with? Not much at all. Basically from between opening <table> to the closing </table>. They even strip out </body> and </html>.
With the remaining code, I'm unable to use #media at all or allow any <td> stacking. So, are their any alternate ways of linking to a style sheet you know about? ...a method that will allow stacking without access to CSS? I'm basically looking for a way to make these emails responsive under the restrictions outlined above.
I uploaded the style guide to JSfiddle: https://jsfiddle.net/Lxfqus7f
Yes, yes 100 times yes. Everyone who has ever designed an email template has had the same complaints. Email design is Web design circa 1999. First off just forget CSS references just inline everything you can and do not bother with #media tags, forget they even exist.
Table Design
Think of a <table> as a spreadsheet, a <tr> as a table row, and a <td> as a table cell. Instead of "stacking" TDs try nesting tables. A new table can go inside a TD and in a sort of Matryoshka doll style fashion you can make any layout you want.
<table>
<tr>
<td>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</td>
<td>5</td>
</tr>
</table>
The above works fine.
Responsive emails
The words responsive and email do not normally go together. What email clients render is severely limited but there are ways to work around it. Like setting your Master Table's width to 100% and having two TDs on each side. Like this:
<table width="100%" cellspacing="0" cellpadding="0">
<tr height="500px" valign="top">
<td width="*" bgcolor="#00FFFF"> </td>
<td width="550px" bgcolor="#FF0000"> <center><br><br> <H1>Body</h1> </center> </td>
<td width="*" bgcolor="#00FFFF"> </td>
</tr>
</table>
Here are both examples in a JSfiddle.
http://jsfiddle.net/e8r9ky4x/
Looks like your style guide includes the use of some inline styles:
<p>Our studio is <span style="color:purple">purple.</span></p>
Define sections of text that require different HTML <div>
<div style="color:#FC8301">
<h3>This title.</h3>
<p>This is sentence.</p>
</div>
Since you're automatically generating emails anyway, why not just let this one slide and declare your styles in variables and use them where appropriate?
Are they stripping out all style tags? Could you just put a style hidden at the begginning of a TD?
<td><style>/*rules are for quitters!*/</style>Stuff</td>
Using a style tag in the body may not be the best of things to use and may even induce vomiting in many web developers, but it IS a possibility to utilize in Email.
I would strongly recommend not to use it this way outside of cases like you have listed, and would recommend HEAVY testing across all clients as it can sometimes cause buggy results.
I would look to make your inline styling do most of the heavy lifting and just use the style tags in body for items that cannot be done any other way.
Below is some good resources on Responsive HTML email made to work on GMAIL APP (which strips the style tag almost completely) and should help give you a baseline on best way to create your emails.
Hybrid coding approach - http://labs.actionrocket.co/the-hybrid-coding-approach
Hybrid coding redux - http://labs.actionrocket.co/the-hybrid-coding-approach-2
Is Hybrid right option - http://labs.actionrocket.co/hybrid-is-the-answer-is-it-the-right-question
I'm working with a content management system that doesn't allow me to alter the head of the pages I'm working with. The page I'm creating will be edited by others using a WYSIWYG editor and will include a table where users can upload new documents. I want to style this with CSS so that I can give one command to put a line between each row (and this won't need to be done every time by each user - since they likely won't know how), but every time I do this it doesn't show anything. My code attempt is below, is this possible?
<table width=600px cellSpacing=2 cellPadding=2 style="td {border-bottom: solid 1px black;" }">
Not that I'm aware of. But you can do this
<style type="text/css">
.specialtable td {
border-bottom: 1px solid black;
}
</style>
<table width=600px cellSpacing=2 cellPadding=2 class="specialtable">
...
</table>
This will ensure that only this specific table's <td/> elements will be styled according to your needs. Note: according to the w3c specs, <style/> is only allowed within the <head/> element of your document. But in many browsers, it still works if you put it anywhere in the <body/>. Since you're looking for a kind of hack, this may be a viable solution for you
You can use frame and rules, two lesser-known attributes of the table element.
<table cellpadding="3" cellspacing="0" frame="below" rules="rows">
<tr><td>one</td><td>two</td></tr>
<tr><td>three</td><td>four</td></tr>
<tr><td>five</td><td>six</td></tr>
</table>
See jsFiddle.
Or if you only want lines in between the rows and not below the bottom one, leave out frame="below".
This won't work in all browsers though.
I'm going though something quite weird. I was working on a chat system with the rows and stuff based on tables, but the formatting kept messing up. I wondered why until I looked at the part of the source which was not working, which looked like this:
<table border="0">
<tbody>
<tr class="chatline" style="background:white;border-style:none;border-top:1px solid grey;padding:0px;">
<td style="background:#A0D7FF;margin:0px;width:1%;"><span style="padding:2px;background:#A0D7FF;color:black;height:100%;border-right:1px solid grey;">kpsuperplane</span></td>
<td style="color:black;background:white;"><span style="color:black;padding:2px;">test</span></td>
</tr>
<tr class="chatline" style="background:white;border-style:none;border-top:1px solid grey;padding:0px;">
<td style="background:#A0D7FF;margin:0px;width:1%;"><span style="padding:2px;background:#A0D7FF;color:black;height:100%;border-right:1px solid grey;">kpsuperplane</span></td>
<td style="color:black;background:white;"><span style="color:black;padding:2px;">test</span></td>
</tr>
</tbody>
</table>
However, when I view it through dev tools in chrome, I get this:
<table border="0">
<tbody>
<span style="padding:2px;background:#A0D7FF;color:black;height:100%;border-right:1px solid grey;">kpsuperplane</span>
<span style="color:black;padding:2px;">test</span>
<span style="padding:2px;background:#A0D7FF;color:black;height:100%;border-right:1px solid grey;">kpsuperplane</span>
<span style="color:black;padding:2px;">test</span>
</tbody>
</table>
Any idea why this is happening? The td's and tr's are automatically removed from the document when they are rendered. And this is not chrome specific. Live code in dreamweaver gives the same puzzling result.
Pic below:
I tested this in jsfiddle and it doesn't seem to be a problem. I also tested it in my own environment (chrome) and it works fine. Try looking for an unclosed tag in code above the table.
Edit:
Paste the code into w3c validator http://validator.w3.org/check. I found 13 errors/warning in the html. Check out the errors and the specific line numbers.
I found that you have div tags within the table, but they are not wrapped by a tr. I'm sure you'll be able to find the rest within the validators output.
According to your jsfiddle: you have simple mistake in HTML structure, here is copy paste;
</tr>
</table>
</div>
<tr class="chatline" style="background:white;border-style:none;border-top:1px solid grey;padding:0px;">
you close table and then you do not open it. ctrl + f and type /table. I suggest you just going carefully through it and make valid html ;)
Sorry it is not an answer, but it won't let me comment.
I tried same code in chrome using Dev Tools it is showing me tr and td's, so I am not what is happening in your case. I enclosed above code into html and body tags.
I have a bowling web application that allows pretty detailed frame-by-frame information entry. One thing it allows is tracking which pins were knocked down on each ball. To display this information, I make it look like a rack of pins:
o o o o
o o o
o o
o
Images are used to represent the pins. So, for the back row, I have four img tags, then a br tag. It works great... mostly. The problem is in small browsers, such as IEMobile. In this case, where there are may 10 or 11 columns in a table, and there may be a rack of pins in each column, Internet Explorer will try to shrink the column size to fit on the screen, and I end up with something like this:
o o o
o
o o o
o o
o
or
o o
o o
o o
o
o o
o
The structure is:
<tr>
<td>
<!-- some whitespace -->
<div class="..."><img .../><img .../><img .../><img .../><br/>...</div>
<!-- some whitespace -->
</td>
</tr>
There is no whitespace inside the inner div. If you look at this page in a regular browser, it should display fine. If you look at it in IEMobile, it does not.
Any hints or suggestions? Maybe some sort of that doesn't actually add a space?
Follow-up/Summary
I have received and tried several good suggestions, including:
Dynamically generate the whole image on the server. It is a good solution, but doesn't really fit my need (hosted on GAE), and a bit more code than I'd like to write. These images could also be cached after the first generation.
Use CSS white-space declaration. It is a good standards-based solution, but it fails miserably in the IEMobile view.
What I ended up doing
*hangs head and mumbles something*
Yes, that's right, a transparent GIF at the top of the div, sized to the width I need. End code (simplified) looks like:
<table class="game">
<tr class="analysis leave">
<!-- ... -->
<td> <div class="smallpins"><img class="spacer" src="http://seasrc.th.net/gif/cleardot.gif" /><br/><img src="/img/pinsmall.gif"/><img src="/img/nopinsmall.gif"/><img src="/img/nopinsmall.gif"/><img src="/img/nopinsmall.gif"/><br/><img src="/img/pinsmall.gif"/><img src="/img/pinsmall.gif"/><img src="/img/nopinsmall.gif"/><br/><img src="/img/nopinsmall.gif"/><img src="/img/nopinsmall.gif"/><br/><img src="/img/nopinsmall.gif"/></div> </td>
<!-- ... -->
</tr>
</table>
And CSS:
div.smallpins {
background: url(/img/lane.gif) repeat;
text-align: center;
padding: 0;
white-space: nowrap;
}
div.smallpins img {
width: 1em;
height: 1em;
}
div.smallpins img.spacer {
width: 4.5em;
height: 0px;
}
table.game tr.leave td{
padding: 0;
margin: 0;
}
table.game tr.leave .smallpins {
min-width: 4em;
white-space: nowrap;
background: none;
}
P.S.: No, I will not be hotlinking someone else's clear dot in my final solution :)
You could try the css "nowrap" option in the containing div.
{white-space: nowrap;}
Not sure how widely that is supported.
I've got around this type of issue in the past by dynamically creating the entire image (with appropriate pin arrangement) as a single image. If you are using ASP.NET, this is pretty easy to do with GDI calls. You just dynamically create the image with pin placement, then serve to the page as a single image. Takes all the alignment issues out of the picture (pun intended).
Why not have an image for all possible outcomes for the pins? No Messing with layouts for browsers an image is an image
Generate them on the fly caching the created images for reuse.
What would make the most sense is changing out which image is displayed on the fly:
<div id="pin-images">
<img src="fivepins.jpg" />
<img src="fourpins.jpg" />
<img src="threepins.jpg" />
<img src="twopins.jpg" />
<img src="onepin.jpg" />
</div>
Since you are using images anyway, why not generate an image representing the whole layout on the fly? You can use something like GD or ImageMagick to do the trick.
Add a "nowrap" in your td tag...
Since you're going for maximum compatibility, consider generating a single image representing the frame.
If you're using PHP, you can use GD to dynamically create images representing the frames based on the same input that you would use to create the HTML in your question. The biggest advantage to doing this is that any browser which could display a PNG or GIF would be able to display your frame.
I figured out that there is a setting on the client where they can select the view as 1) Single Column, 2) Desktop View, and 3) Fit Window.
According to MSDN, the default is supposed to be to Fit Window. But my wife's IE Mobile phone was defaulting to a Single Column. So no matter what, it would wrap everything into a single column. If I switched to any of the other two options it looked fine.
Well, you can set this with a meta tag:
<meta name="MobileOptimized" content="320">
will set the page width to 320 pixels. But I don't know how to make it go to auto.
This does not work on BlackBerry's prior to v4.6 - you're stuck with single column unless the user manually changes to desktop view. With 4.6 or later, the following is supposed to work, but I haven't tested it:
<meta name="viewport" content="width=320">
You might need an actual space immediately following the semi-colon in
Try it with the <div> tag on the same line as <td>...</td>
I may have misunderstood what you are after but I think that you can do what I've done for logos on a map.
The map background tile is drawn then each image is told to float left and given some interesting margins so that they are positioned as I want them to be (view source to see how it's done).
Use the word joiner character, U+2060 (i.e. )
Maybe this is just one case where you could use tables to enforce layout. It's not optimal, and I know you aren't supposed to use tables for things that aren't tabular, but you could do something like this.
<table>
<tr>
<td><img src="Pin.jpg"></td>
<td> </td>
<td><img src="Pin.jpg"></td>
<td> ></td>
<td><img src="Pin.jpg"></td>
<td> </td>
<td><img src="Pin.jpg"></td>
</tr>
<tr>
<td> </td>
<td><img src="Pin.jpg"></td>
<td> </td>
<td><img src="Pin.jpg"></td>
<td> </td>
<td><img src="Pin.jpg"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><img src="Pin.jpg"></td>
<td> </td>
<td><img src="Pin.jpg"></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><img src="Pin.jpg"></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Do you have tried to define a width for the column? Like <td width="123px"> or <td style="width:123px">. And maybe also for the div ?
Have separate images for every possible arrangement of each row.
That would only require 30 images (16+8+4+2)
You can replace img with span and use a background image with each span, depending on a CSS class:
<p class="..."><span class="pin"></span><span> </span><span class="pin"></span>...
<p class="..."><span class="pin"></span><span> </span><span class="pin"></span>...
<p class="..."><span class="pin"></span><span> </span><span class="pin"></span>...
<p class="..."><span class="pin"></span><span> </span><span class="pin"></span>...
(Personally I think it's better to have four lines with a p tag instead of a single div with br.)
Then in CSS you can have something like this:
p.smallpins {
margin: 0;
padding: 0;
height: 11px;
font-size: 1px;
}
p.smallpins span {
width: 11px;
background-image: url(nopinsmall.gif);
background-repeat: ...
background-position: ...
}
p.smallpins span.pin {
background-image: url(pinsmall.gif);
}
There isn't any nobr HTML tag; I am not sure how well-supported this is, though.
You could use CSS overflow:visible and non-breaking spaces between your elements (images), but no other white space in the HTML content for those lines.
Would it not be easier if you do it like this?
<div id="container">
<div id="row1">
<img/><img/><img/><img/>
</div>
<div id="row2">
<img/><img/><img/>
</div>
<div id="row3">
<img/><img/>
</div>
<div id="row4">
<img/>
</div>
</div>
Whereby your CSS would handle the alignment?
.container div{
text-align:center;
}