I am trying to apply absolute/relative position to an image inside an email. There's an image inside a span which needs absolute positioning to preserve line height of the paragraph.
Here's an image of what I'm trying to accomplish.
I got to know absolute and relative positioning can't be used inside email templates, is it possible to fix the image positioning without using absolute positioning.
The position CSS property has very poor support in email clients, even the ones considered to have decent CSS support.
You're best bet is to try negating the image's line-height, something like this:
<p style="margin: 0 0 10px; line-height: 130%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquam dictum varius. Integer mollis, elit nec commodo elementum, justo nunc faucibus lectus. <img src="" style="display: inline; mso-line-height-rule:exactly; line-height: 0;">
Line heights vary depending on the font and email clients tends to treat line-height a little differently. This isn't perfect, but it'll get you closer to your screenshot above.
This actually has a code entity:
U+026A0 UNICODE
⚠ HEX CODE
⚠ HTML CODE
which you could then just style inline with more code:
<p>Lorem Ipsum dolor sic met <strong style="color: #fff126">⚠</strong></p>
Snippet:
<p>Lorem Ipsum dolor sic met <strong style="color: #fff126; back">⚠</strong></p>
The thing with using position: absolute in html emails is that they will 100% break on Outlook.
Related
I'm working with a bootstrap based site. I have a problem where we are trying to get the two column heights to be equal despite the size of the content inside the columns, and without setting a column height (to keep it responsive).
I have googled my brains out and decided that the display: table, display: table-cell is the appropriate way to fix this (we support IE9, so Flexbox is OUT, and the negative margin/padding thing breaks responsiveness). I have specific media queries to fix responsiveness based on screen size.
However, I am getting a single pixel of what appears to be padding on the left side of my smaller column in Safari (it looks perfect in IE, Chrome, Firefox and Edge). After looking through the inspector, I can tell that it's not margin or padding causing the pixel, so I'm not sure how to fix it. I tried border-collapse: collapse to no avail. If I remove the display: table or display: table-cell, it looks correct, but I need those to make the columns the same height (see example here). Any ideas? Code is below.
<style>
.row-tbl {
display: table;
}
.col-tbl-cell {
float: none;
display: table-cell;
}
.blue-bg {
background-color: blue;
}
.white-bg {
background-color: white;
}
</style>
<div class="row row-tbl">
<div class="col-md-4 col-tbl-cell blue-bg">
<!-- This displays as a table cell -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="col-md-8 white-bg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac tempus sem, nec luctus tellus. Integer erat urna, fermentum sit amet porttitor at, rhoncus non arcu. Aenean a libero consectetur metus imperdiet scelerisque at ut nibh. Sed mauris mauris, facilisis nec nulla at, cursus imperdiet magna.</p>
</div>
</div>
I can’t reproduce this issue in Safari 9 on OS X 10.11.2 with the code sample above, but it could be some kind of rounding error.
http://cruft.io/posts/percentage-calculations-in-ie/
You could try applying the left column’s background color to the row itself. If it goes away, then it might be a subpixel rendering issue.
Note: I think you’re missing the col-tbl-cell class on the second column ;)
I ended up pulling the row-tbl class onto a new div under the row and above the column. That worked!
I have a div that sits centralised on the page which has text with an image aligned to the right, as shown below. The problem I'm experiencing is getting the image to slide into view from the right when the user scrolls down and brings the region into view.
I'm able to change the opacity successfully but I'm not able to get it working for how I need, i.e. moving the image from right to left by 50 pixels.
I'm experimenting with the skrollr library. Any suggestions where I'm going wrong please?
Many thanks,
James
code example
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lorem felis, ultricies vitae justo sed, rutrum sagittis quam. Cras sodales metus odio, eu rhoncus elit commodo a
<img src="test.png" align="right" />
</div>
CSS for the div
div {
position: absolute;
left: 50%;
padding: 20px;
margin-left: -485px;
width: 970px;
}
JS
var s = skrollr.init();
you need to give your image the skrller data, something like:
<img style=opacity:0 class="skrollable unrendered" data-bottom-top=right:400px; data-top=right:0; alt="" />
Of course you'll need to adjust to your needs, but the point is that for EVERY element you need to apply the Skrller behavior, you need to give it some data
Hey, y'all! I am building a site using the Nivo Slider (which I've normally had great success with). But I'm having some issues with this particular usage that I just can't figure out. Any help from you code wizards would be greatly appreciated!
Test site is here.
In Firefox, as usual, the site looks fantastic. Everything works, nothing broken.
In Opera, pretty much the same.
In IE9, however, the slider looks great until it transitions to the next image. The slider uses a float:right property and, in Explorer, each transition causes the image to momentarily jump all the way to the left of the container div. THIS PROBLEM SOLVED. The "float:right" property was only placed on the slider images and not to the slider container, itself. The corrected code now causes both the individual images AND the overall slider container to float to the right.
In Safari, the slider looks great unless you resize the page to anything less than 100% - then, the images do not shrink with the surrounding content.
In Chrome, surprisingly, the thing is all messed up. On first load, the slider doesn't appear. If I reduce the viewing size to 90%, it appears fine including when I size back up to 100%. However, the caption function is not popping out as far as it does on the other browsers (see the site to understand what I mean). THIS PROBLEM SOLVED It turns out that the bullets that control the slides were the problem. Or, more accurately, the div surrounding them was. The div for the .controlNav bullets had a "position:absolute" property that worked fine in all the other browsers but that screwed up Chrome for whatever reason. I eliminated those bullets entirely as they're really not necessary for this particular site. Problem solved. Unfortunately, the methods used have buggered up Safari rendering of the slider completely, so now I have to figure that out.
I have done quite a bit of searching on this topic and have found many problems with the Nivo Slider, particularly in IE, but nothing that exactly relates to what I am experiencing. I suspect that some of the issue is being caused by the float:right property that the Slider typically doesn't get used with (most sites use it in a centered-on-page capacity), but I don't know this for absolute certain.
Here is the slider HTML (there is a metric buttload of CSS for the Nivo Slider so I won't paste it here. You can look at the stylesheets using your browser's developer tools.) :
<div id="header">
<div class="layout-wrapper">
<aside id="slider" class="theme-default">
<div id="nivo-slider" class="nivoSlider slider-underline">
<img src="images/slider-img1.jpg" class="attachment-slider_nivo" title="#slide-1" />
<img src="images/slider-img2.jpg" class="attachment-slider_nivo" title="#slide-2" />
<img src="images/slider-img3.jpg" class="attachment-slider_nivo" title="#slide-3" />
</div>
<!-- end #nivo-slider -->
<div id="slide-1" class="nivo-html-caption" data-position="right">
<span class="slider_title">Tile and Ceramic Cleaning</span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc suscipit. Suspendisse enim arcu, convallis non, cursus sed, dignissim et, est. Aenean semper aliquet libero.</p>
Read more »
</div>
<!-- end #slide-1 -->
<div id="slide-2" class="nivo-html-caption" data-position="left">
<span class="slider_title">Kitchen Cleaning and Sanitizing</span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc suscipit. Suspendisse enim arcu, convallis non, cursus sed, dignissim et, est. Aenean semper aliquet libero.</p>
</div>
<!-- end #slide-2 -->
<div id="slide-3" class="nivo-html-caption" data-position="right">
<span class="slider_title">Full Residential Services!</span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc suscipit. Suspendisse enim arcu, convallis non, cursus sed, dignissim et, est. Aenean semper aliquet libero.</p>
</div>
<!-- end #slide-3 -->
</aside>
<div class="banner-1"></div>
<!-- end #slider -->
</div>
<!-- end .layout-wrapper -->
</div>
<!-- end #header -->
<div class="clear"></div>
I appreciate any and all tips you folks can come up with!
Replace the <aside> tag with a <div> tag. I did that in the chrome inspector tools, and it seemed to work fine after that.
I am using the nivo-slider on 4-5 different websites right now, never seen it use the <aside> tag.
I have the following jquery mobile code:
<div data-role="collapsible">
<h3>I like to read a lot but sometimes I simply can't bring myself to do it</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi iaculis interdum felis, et tempor nunc commodo sit amet. Ut fringilla.
</p></div>
I need the h3 tag to word wrap as opposed to truncating as jquery mobile does by default.
I've tried changing the above h3 tag to:
<h3 style="white-space:normal;">
or adding the following to the style sheet
h3 { white-space:normal; }
or
.h3 { white-space:normal; }
None of which works...any ideas? I could wrap it with line breaks but that's no good as it looks ugly if someone changes the orientation of their phone.
Thanks
Darren
You had the right idea. JQM just does some funky markup and you were targeting the wrong thing in the end.
.ui-collapsible h3 .ui-btn-text{white-space:normal;}
I have a padded DIV (containing other/sub-DIVs and a DL) followed by some text:
<div> # the padded/main div
<div>
<div>
</div>
</div>
<div>
<dl>
<dt></dt><dd></dd>
<dt></dt><dd></dd>
</dl>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus ante dui, et venenatis enim. Aliquam in massa...
How come there appears no padding at the bottom of the main DIV?
(There is no padding space between the main div's content and the following text.)
Thanks for any help with this!
Tom
You are confusing padding with margin. margin is the property that would define space between the main div and the bottom text.
In your example, it appears that you are trying to use a newline to cause spaceing within html. This will not work. As stated in previous answers, you must set the css margin-bottom property to cause spaec to appear after the bootom of a div and the start of the next HTML element
If you want to use padding and not margin then change to add some way to identify the outer div (I used an ID):
<div id="outerdiv"> # the padded/main div
<div>
<div>
</div>
</div>
<div>
<dl>
<dt></dt><dd></dd>
<dt></dt><dd></dd>
</dl>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus ante dui, et venenatis enim. Aliquam in massa...
and add CSS such as:
#outerdiv
{
padding-top: 1em;
padding-bottom: 1em;
}
EDIT: see it a work here: http://jsfiddle.net/yvaPG/
Thanks for your quick hints!
I was finally able to track the problem down:
The
<dd></dd>
element had a "float:left;". This apparently caused the following text to move "left/up".
My solution:
I inserted an empty
<div></div>
with a "clear:both;" between the dd element and the following text.
If anybody has a more elegant solution, I'd still be interested!
Tom a more reasonable approach would have been to define a seperate CSS class of;
.clearfix {clear:both; display:block;}
This would then allow you to call this div should you require it in other places throughout the page. Simply replace the with to ensure this change continues throughout and isn't reset by the removal of a CSS reset throughout the rest of the page/setup
Regards