I'm having an issue with gaps appearing in Outlook / windows in an html email which I can't fix. It's a common problem I know and possibly something to do with col spans (judging by other posts). I've tried a number of things to do with line heights (although height doesn't appear to be the issue here) and adding ms specific styling but to no avail.
You can see the code here:
http://www.theindustryclub.co.uk/xmas/ticChristmasTemplate_card.html
and see the problem here
http://www.theindustryclub.co.uk/xmas/images/industryClubMailing.jpg
It's looking tight in all other clients and web based mail apps - just pesky outlook 2013 dragging me down and got me stumped. I would be grateful for any suggestions / help.
Martin
Make sure all your images are inline styled display:block;
Don't use colspan or rowspan.. use nested tables instead.
Set table, table td { border-collapse:collapse } in the head
Check your cellpadding values to see if they are pushing the content out.
Here's a template you may find useful.
Related
I've been working on a website and from time to time some elements are disappearing from the document. I've figured out that it's because in CSS document the early lines are not fully commented. I would like to ask why if even such a tiny thing like Skeleton's default version text is not fully commented or some of the classes or id's don't have a closing bracket then the whole website has layout problems. What skeleton's version has to do with page's body color ? This is really confusing.
Here is the HTML and CSS :
http://codepen.io/anon/pen/vIchA
I would be glad with any help. Yours truly,
D.
Browsers have to guess how to render bad code. Sometimes they will guess and render it correctly, other times it will look weird.
Different browsers are likely to render it differently (though error handling standards are improving)
In this case, your demo lacks a "/" at the start, which means it is trying to render the comments as css. The comments are not css, so it gets confused and does the best it can.
A quick way to find any bugs in the css is to use this:
http://jigsaw.w3.org/css-validator/
Two questions and maybe they are caused by the same thing/setting.
Using TinyMCE with full corporate account. Many of the publishers are just pasting HTML into the HTML Source Editor... we are just getting this going the results are very mixed.
So if someone has a well coded page it works well - as far as we think.
But if you create a page with a couple of (or one) open div tag. Holy cow! The editor can throw divs everywhere - 30 extra on one page someone sent me. Why is the editor changing content? Can we keep this from happening? If a publisher makes an HTML mistake we would rather that the mistake shows - not be scrubbed.
Also I noticed myself when creating menus that if you put in anything inside a link tag (like a div, ul, li, dd, dt, dl, h1-6... pretty much any tag) other than a span, that the editor will either push the tag content outside of the link tag or it will change the tag to a span.
http://www.tinymce.com/wiki.php/Configuration:Cleanup/Output
Looks like the verify html is the new setting. Will report back after testing.
David - I would have marked yours as right if you answered. Looks like that works for 3.4 and below.
For version 3, use
verify_html : false
From here http://archive.tinymce.com/wiki.php/Configuration3x:verify_html
I manage/webmaster half a dozen websites that have facebook like boxes on their index pages. These were all working fine until yesterday, when suddenly they all began to display to the right of the page (where previously they had been centered). No changes have been made to any of these pages in the last day or two, so I can't think of any reason why they would all suddenly right-align.
Some of these scripts are between "center" tags, Others are inside centered tables. But they're still displaying to the right of the page. I've tried everything I can think of to get them to display in the middle of the page again, but nothing I've tried works. I'm also curious to know why they would all suddenly lose their center alignment.
Anyone have any ideas?
Any help would be very much appreciated.
You can see an example of what I'm talking about at holisticspain-dot-net
.fb-like-box.fb_iframe_widget *
{
text-align: left !important;
}
This worked as a temporary fix as well.
We already apply some styling to our button (it is surrounded in <li> tags, but we found we had to change the style for this.
We previously had this style applied
.fb-tool {position:relative;left:8px;}
We changed it to this.
.fb-tool {position:relative;left:8px; text-align:left;}
Just a short answer - might help perhaps. I changed the display property of .fb_iframe_widget to relative with !important and it fixed the sudden leftiness.
Following Harold Neal and Sergei S's suggestions, you can add text-align:left; to the default style="background-color:#000000;" portion of the tag.
im working on a CMS it is almost finished
but im struggling serious unfamiliar problems in WYSIWYG editor.
i was first using ckeditor but after experiencing problems with it i switched to tinymce.
some problems are solved but this time someother problems showed up.
problems occuring especially on tables.
1-Anchor element underline removal not working
2-Duplicating Phone numbers
--->might be due to skype phone number converting toolbar
3-too many s how to clean those why even those are there?
4-how to convert
<p>text</p>
back into just
text
because tinymce converting some texts into p element *automatically if it's not the client doing it unknowingly.
*=even though i did that force_paragraph:false setting.
5-As client reports : sometimes cursor turns into loading cursor and wysiwyg editor causes browser to stuck.not even allowing to click links outside of the editor.
6-as i experience sometimes it really does stuck and not allow you to edit anything at all.
here is that problematic page created with tiny_mce and causing lots of errors in process of editing:
Here some answers
2-Duplicating Phone numbers --->might be due to skype phone number converting toolbar
Might be - this cannot ba a tinymce related problem.
3-too many & nbsp;s how to clean those why even those are there?
Browsers will show several spaces (character code 32) as a single one. Thus & nbsp;s are inserted alternating instead of natural spaces.
4-how to convert
text
back into just text
Tinymce is a rte editor and will generate html code. In order to be able to style editor content, the content need to be wrapped inside a block element - eighter ps or divs. You may use server side code to remove tags.
6-as i experience sometimes it really does stuck and not allow you to edit anything at all.
Please describe a bit more in detail - there needs to be a reason for this.
I'm trying to use the printing stuff in iOS 4.2 to print from my iPhone app, but I'm having real trouble getting multi-page content to display nicely. As you can see in the attached screenshots of PDFs generated through the iOS printing API, UIMarkupTextPrintFormatter really likes to use a painfully small top-margin when rendering.
Additionally, it doesn't seem to try to split block-elements too nicely either ... it's tough to see in the screenshot but the page break actually occurs halfway through a table row, rather than on a border between rows.
I've tried using the CSS #page directives to specify page boundaries, however iOS Webkit doesn't seem to support these at all.
Does anyone know of any techniques, either in HTML or through the iOS SDK to make these top-margins bigger?
I really don't want to write a custom UIPrintPageRenderer class because I'm trying to give my users the ability to customize their printouts through HTML templates ... going with a custom renderer would almost certainly make this impossible (or really difficult).
Any help is much appreciated!
You're on the right track with UIPrintPageRenderer, but fortunately you don't need to write a custom subclass to do this. All you need to do is instantiate a vanilla UIPrintPageRenderer, set the headerHeight and footerHeight properties, and add your HTML formatter to the renderer using addPrintFormatter:startingAtPage:. It only takes a few extra lines of code, I have posted my method here: Print paper size and content inset