From what I understand Gmail doesn't accept CSS blocks in the head at all, which is why I have been adding a bunch of inline CSS to my email template to make it work.
However, I'm struggling with the CSS positioning property. I want an image to sit on top of a background image so I set the parent div of both to position: relative and the image to absolute. However, for some reason Gmail removes the style attribute that declares the position: relative from the div. It keeps all other inline CSS though.
Any idea? Any workaround?
Sadly, I suspect you may have to abandon your perfectly reasonable ideas of divs and positioning when designing for email. CSS support in email clients is a tangled nightmare.
The only (relatively) surefire way of forcing layout on email is to go with an old school tables layout, which is unfortunate, but unavoidable.
Campaign Monitor has an excellent summary of email client CSS support here.
I experienced similar layout problems when sending email newsletters. The solution was to use tables to position things properly. It's dated, but I think it was the only way to make things look the way they should.
Related
I searched this site and google and found no way to simply add a plain simple scrollbar to my webpage. Is there no such way? I'm rendering a web page and there is no scrollbar. Can't understand why the default behavior is faulty. Default is you want a scrollbar for overflow but no, with CSS everything has to be tricks and workarounds.
Are you probably looking for a way to always have a scrollbar present, also if the page is short enough to not have one?
Then, yes there is a way. You might wanna do:
html {
overflow-y: scroll;
}
I understand why one would do so.
It prevents jumps when navigating between pages, which have enough content to show a scrollbar and pages which do not.
Trying a whole bunch of different ways to get my elements to float (which all work in gmail etc) in hotmail.
< div class="plzfloat" id="floats" style="float:left">
#floats{float:left;} .plzfloat { float:left;}
I even added css rules for a class and id that would add the float rule but when I view it in hotmail all my floats have been stripped out of my email.
Been searching google but haven't had any luck finding sources saying float isn't supported by hotmail - anyone have any experience with this?
Cheers,
Ian
You can't code emails the same way as you do for web.
Here is a resource for starting out in HTML email: http://www.reachcustomersonline.com/how-to-code-html-email-newsletters-all-new-version/
It will get you started on the right path.
If you are doing emails, you should use tables, tables, tables and tables for everything.
This especially applies to clients developed by Microsoft.
Right aligning image for Outlook email
I was able to get my divs to "float" by first defining a div container width forcing anything within the container to break once the width is filled. Within the container I then set-up child divs and set their style's to display: inline;.
This way they align next to each other but then automatically break at a particular width. I hope that helps!
I tested in outlook and it actually rendered.
~Dianne
Yes Because of the simple fact that live is no longer good and not web supported.
Here is the scenario: I have a div which I pre-load into a page and automatically set it's display property to hidden. I use javascript to pop-up said div. The issue is when clients have CSS disabled they can see the DIV, obviously. What is the best way to have the div (or contents of the div) display only when my javascript function is called?
The best way I could think of is passing the raw HTML to a javascript var and then loading all the HTML using javascript, however, this is a bit slow(theres a decent amount of HTML) which causes the script to break when it tries to reference DIVs that do not exist yet.
any other more elegant solutions?
Thanks
You can wrap html comment tags around it:
<!-- <div>your stuff, which should be invisible</div> -->
Or remove it completely from the DOM
http://plugins.jquery.com/plugin-tags/html-comments
Maybe, here some related stuff
If CSS is disabled, then the only way to hide the div is to remove it from the DOM.
You can set an inline style on the div (not recommended but your case is an exception anyway).
You can use JS/jQuery on page load to hide the div but it'll cause the flicker effect (div wiil be visible momentarily until the JS runs to hide it).
You want to have a div on your page when the page loads so that users without javascript can see it, perhaps to indicate them that some of the site functionalities require JS to work.
If you need to use that div exclusively with JS then having it already on the page is a bad approach imho. You should create it on the fly, at least the content.
This way you will ensure users without CSS won't see it, while still being able to show it for the rest of the people with JS enabled.
Set the height of the div you wanna hide to zero using javascript.
$('#mydiv').css("height", "0px");
Is there a way to change scrollbar from right to left in divs? I tried applying direction: rtl; but apparently it does not have any affect in firefox. I would prefer a pure css solution but do not mind using js for this.
I don't think it's possible with pure css and html, but you can use a jQuery plugin, like jScrollPane that gives you the ability to use custom scrollbars, and choose their position in the page.
There is no way to this, except for implementing your own scrollbar functionality from scratch. The reason is that the scrollbar is actually an ui element inherited from the operating system, and not something the browser "owns" - and since the operating system doesn't support putting the scrollbar on the left hand side, neither does the browser.
I just came up with this, it seems to work in all modern browsers, I just tested it then on (IE8/compatibility, Chrome, Safari, Moz)
HTML
<img id="my_image" alt="my text" src="images/small_transparent.gif" />
CSS
#my_image{
background-image:url('images/my_image.png');
width:100px;
height:100px;}
Pro's:
image alt text is best-practice for accessibility/seo
no extra HTML markup, and the css is pretty minimal too
gets around the css on/images off issue where "text-indent" techniques hide text from low bandwidth users
The biggest disadvantage that I can think of is the css off/images on situation, because you'll only send a transparent gif.
I'd like to know, who uses images without stylesheets? some kind of mobile phone or something?
I'm making some sites for clients in regional Australia (hundreds of km from the nearest city), where many users will be suffering from dial-up connections, and often outdated browsers too, so the "images off" issue is an important consideration.
are there any other side effects with this technique that I haven't considered?
edit: Just wanted to add the extra info that I'd use this over a normal image tag because
A. I can use css-sprites
B. I can generate css with php that alternates background-image sources between different sub-domains using a single array
C. I like the way that resizing the image now doesn't stretch or distort it so it behaves like everything else on the page.
What is wrong with normal image tags? img tags are meant to be used when your content has images in it, and CSS shouldn't take any part in what the actual content is. On the other hand, presentational images should be set as background-images to divs and such and then handled via CSS so that they don't interfere with the content and structural markup.
There's no scenario where you'd need to do something like that.
If you want an image replacement technology that degrades gracefully when CSS is off, you can use the old faithful text-indent technique:
#element {
width: 100px;
height: 100px;
background: image(pic.jpg);
text-indent: -9999px;
}
<div id="element">This text will show if CSS is off, otherwise an image is displayed.</div>
Tatu is right, though you don't seem to need indent. Just put the image you want as the src of img. Then you get text when images are off (and note that alt text can styled using CSS on img), and have the image displayed when they are being fetched.
The big thing about 'image replacement methods' is because people want the text out of the alt attribute when you are styling headings so they get search-indexed correctly. img on its own though will do the job without any CSS or additional markup.
Well I use this kind of technique in h1/h2 tags when clients want strange fonts. Heres how I do it http://flowdev.tumblr.com/post/1187111884/the-power-of-h1-and-h2-tags
Works in all browser as far as I know.