I send tens of thousands of emails out, and all my Verizon subscribers are getting blank emails.
Looking into the HTML/HAML they return to me, it seems that Verizon's email parser is placing all the content after my clear:both div tags inside of the Div tag.
Here's an example of my clear div tag and its other attributes.
%div{:style => "clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0; font-size: 0; float: left;"}
How can I work around this problem, so that my emails are displayed the same way for Verizon subscribers as for everyone else?
Simple!
Just add some Foobar text inside of the clear div. For some reason, this bypasses their bug with div tags set to clear consuming all the div tags below it.
An example :
%div{:style => "clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0; font-size: 0; float: left;"}
Whatever Text.
In plain HTML:
<div style="clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0; font-size: 0; float: left;" class="clear">
Whatever text.
</div>
Related
I was wondering whether it is possible to add a "last" class to the last post appearing in a tumblr tag page in order to be able to customize it in css?
The goal is the following: let us say that a certain tag has 3 posts, so when I navigate in that tag page, the 3 posts appear, one below the other. I would like the first two separated by a line located at the bottom of each post body, but the last one on the bottom of the page should not have a separation line at its bottom, so I guess I would need a specific class for that post since it is the last one.
Thank you.
As per my comment you can achieve this by simply using a css selector :last-of-type or :nth-child(last)
Here is an example.
HTML:
<div id="posts">
<div class="post">
Post 1
</div>
<div class="post">
Post 2
</div>
<div class="post">
Post 3
</div>
</div>
CSS:
#posts .post {
margin-bottom: 20px;
border-bottom: 2px solid #444;
}
#posts .post:last-of-type {
background-color: orange;
border-bottom: none;
}
There is a jsfiddle here: https://jsfiddle.net/lharby/39ap851L/
So each post item will have a border bottom, but for the last post of type we override this with border-bottom: none
I want to style a contact email, but I have a few problems:
I sent a test-mail to my gmx mail and it removed the style="background: url('...') center center no-repeat; position: relative;". In the received code I only see style="position: relative;"
Like the first problem, but with "background-size: cover;" and "width: calc(50% - 3px);"
My <style> - tag got commented and looks like this:
Commenting CSS like that does not prevent it working - it just ensures the browser does not treat it as HTML.
gmail strips all classes and ids from HTML, so nothing you put in your style sheet based on those will work anyway. You can style standard elements though, and inline styles still work.
Outlook doesn't support background images at all, so you should probably give up on this path.
When coding emails, i seem to be getting broken templates in the Outlook web app preview pane, however when i double click the email (email opens in new window) it renders fine.
The text within td's have alot of spacing between lines, images aren't vertical-aligning correctly amongst other issues.
Does anyone know what causes this and how it can be fixed? I did read on-line that the preview pane wraps the email in its own and adds its own styling which affects the layout?
There are a few issues it could be, but I'd start with putting this in your style tag:
#outlook a {padding:0;}
Also, are you using tables? Make sure your <td>'s at least 19px high.
For images, make sure you have display:block; and the padding and margin zero'd out.
<img alt="" src="" width="" height="" style="margin: 0; border: 0; padding: 0; display: block;">
Beyond that, post some example code as it is hard to figure out the exact cause of each issue without seeing it.
I have a narrow long image that I want to display at the top right of a README.md file on GitHub. I have been trying several things to get it aligned right and currently have
<p align="right">
<img src="doc/subpagelist.png" />
</p>
This works in that the image is aligned on the right side, though is rather useless as all content that is below in image in the Markdown file gets displayed under the bottom of the image, rather then to the left of it.
Is there a way to have the text flow around the image (without getting rid of headers and paragraphs)?
The align="right" (or left) attribute works in GitHub Markdown:
<img align="right" src="doc/subpagelist.png">
align="left" works fine. To break the alignment again, use a <br clear="left"/> (or <br clear="right"/>) tag:
<img src="/path/to/image.png" align="left" width="200px"/>
some text floating around the image
<br clear="left"/>
A "newline". This text doesn't float anymore, is left-aligned.
It works for me (only for jekyll, it does not work for Github markdown):
Put the code below in your content markdown (I have put it on the first line for better organization)
<style type="text/css">
.image-left {
display: block;
margin-left: auto;
margin-right: auto;
float: right;
}
</style>
And refers to your image as follows:
[](http://www.thiengo.com.br/proguard-android){: .image-left } Your Text comes here...
Note the .image-left class besides the image url.
The final results are here: Movies of the Year jekyll github page
In markdown you can add extra attributes to tags. For instance I use this for what you intend to do:
{:style="float: right;margin-right: 7px;margin-top: 7px;"}
What you are describing is "floating" of an image, which allows text to flow around it. There are a number of good turtorials about floating in CSS if you want to learn more about this topic. In the mean time, to get an image to float in Markdown you can wrap the image in a div and float that div using:
<div style="float: right">
</div>
Whenever there is a SPAN element in HTML content, the mobile version of Safari renders content differently- it seems that font size increases for the whole paragraph. Consider two examples.
<div style="border: 1px solid red; width:500px;">
<p>This is a paragraph. This is a paragraph. This is a paragraph.</p>
</div>
and
<div style="border: 1px solid red; width:500px;">
<p>This is a <span>paragraph</span>. This is a paragraph. This is a paragraph.</p>
</div>
Second example breaks page structure because font size increases, and thus the content exceeds div's width. Is there any way around this (besides not using SPAN)?
iPhone OS 3.1.2
try adding -webkit-text-size-adjust: none; to the CSS and iPhone safari should stop making the span font size look differnet.
The display of those two HTML fragments look identical to me on iPhone Safari (also iPhone OS 3.1.2).
Is there any CSS being applied to SPAN tags?
[Edit: I see the difference now; you won't see any difference if both examples are on the same page.]
[Added:]
By explicitly setting the size, it appears you can get consistent text size between the two. For example:
<style type="text/css">
div, p, span {
font-size: 24px;
}
</style>
Paul, could you try explicitly setting the font-size for the span to match that of the paragraph tag and see if this solves your issue?