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.
Related
I'm working on a responsive email design and running into some trouble. It partially works but I'm thinking I need fresh set of eyes and help cause I'm not finding the solutions. I think the nav links are what's creating most of the problems but unsure if that's really the problem.
Basically I want the email to be responsive and stack to pretty much a single column with exceptions.
The problems I'm running into are these:
Whole page isn't fully responsive - ( get sidescroll part of the way )
wide ads 565x70 doesn't seem to change size
Top nav with social icons are not stacking properly. I want the left links to not move (maybe center if needed for small screens) but social icons stack below the other links. 3 columns wide preferably just like they are now just want the icons below the menu.
nav menu below the logo - Here I want them to center with smaller screens but also stack in order with 2 columns wide. I've tried fluid text that wraps but it didn't seem to work for some reason.
Any help would be greatly appreciated. I've tested and tried other resource items but seem to be failing with what should work according to the other resources.
Below is the link to template.
http://bit.ly/1u67HDG
thanks.
Well, you will need a responsive css. I am a big fan of Twitter Bootstrap. You will design your entire email as a normal site with your tags and include your CSS.
Here you can look at these awesome CSS's that are responsive:
http://getbootstrap.com/
http://metroui.org.ua/
http://www.99lime.com/
http://purecss.io/
http://gumbyframework.com/
Your are setting inline widths on images and tables. The CSS in the header can't override the inline declarations.
Thanks. It seems that I mostly had each table on their own. So I created wrappers, double checked the widths re-added classes and etc. It seems to be working pretty good now.
Sometimes a fresh pair of eyes helps. Thanks again.
P.S. J.otero - Frameworks are good if you're using it for the web but they will do little to nothing for email.
I have developed a responsive email design but Outlook keeps adding a gap after one of my tables. I have tried everything. I have added border-collapse:collapse; I have divided tables; added block styling to my images - nothing is working. Any help would be greatly appreciated.
The html can be found here.
Image example of issue here.
instead of giving the float property to tables. it would be better to make 2 columns and then placed each table in each column.
just for your information Outlook.com drops margin and float support entirely
I would go the direction of antwort and use table columns that are forced to full-width display: block; with media queries (instead of floating tables next to eachother).
See your modified HTML here. I haven't tested it, though. It may need more work, email clients are notoriously frustrating.
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.
I'm trying to make a sample web page to get acquainted with HTML5, and I'd like to try replicating Facebook's page layout; that is, the header that spans the entire width of the screen, a small footer at the bottom, and a three-column main body, consisting of a list of links on the left, the main content in the middle, and an optional section on the right (for ads, frames, etc.). It's neat and displays well in multiple window sizes.
So far, I've tried to accomplish this with a <header>, <footer> and a <nav> and <section> block, respectively. There's a few anomalies with the page, however. The footer (which contains a simple text block with copyright info) appears at the top-right of the page below the header when the window is maximized. On the other hand, when there isn't enough space to display everything in the window, it places the main body text below the section. In other words, it keeps moving elements around to fit the window.
Could someone please tell me how I'd achieve the look I'm going for? I've tried playing around with a few CSS attributes I read about through Google, but I'm pretty sure I don't know what I'm doing, and could really use some guidance.
Thank you!
This isn't an HTML5 question as much as it is a basic understanding of HTML and CSS. If you're going to jump in to web dev you're going to need to understand basic CSS like floating etc. I would recommend some tutorials on YouTube or NetTuts. Just play around with a few divs, move them around the page, manipulate them with CSS and it will start to come together. Then making a three column layout with fixed header and footer will seem like a piece of cake.
Floating Divs w/ CSS
I find CSS to be super hard. It is quite difficult to make a page that looks good and works on lots of different platforms and browsers. You may find it easiest to use a css framework, such as Bootstrap.
Drop that into your website, and use it to make your layout. Use the dev tools for your browser (Firebug for firefox) to examine the styles that are being applied to the various elements. Modify the styles to suit your needs.
HTML5 doesn't really give you a page layout for free. The elements you mention (header, section,etc) are used to create semantic pages, rather than to specify how they should be displayed.
Can't help much without your code. But I am sure it is because of float issue. add this CSS property to your footer clear: both
Hope it might help.
I'm not sure if you're trying to make yourself a little hack, or if you're looking for a complete library that will do all this for you, but if you're looking for the latter, I recommend Twitter Bootstrap, which is a cross-platform solution for implementing many HTML5 features, and even resorts to fallbacks for non-modern browsers. The only drawback is the requirement of jQuery in order to initialize the components that are responsive*. However, this is optional if you are not looking to implement these features. The responsive design, amazingly, does not require javascript since it is pure CSS. Hope this helps!
*Edit: meant "interactive" there, not "responsive."
Everyone knows that there are problems with the float CSS property: there are text jogs in some browsers, you have to clear them to pull parent elements around a floated div, etc.
Let's assume I build a layout and float everything, and I'm careful to control for the browser-specific bugs. Are there disadvantage to using float for everything? Will the page take longer to render, or is there a better practice?
I'm trying to improve my CSS layout building technique.
#kevin; float is not a bad practice; it depends on how you are using it & what the needs of the design are. There is no need to use it on everything when there is no need & it comes from experience.
Every browser renders float correctly.
yes if you use clear:both in your markup like this
<div style="clear:both"></div>
it's increase your markup which increase your page loading time.
. SO, use overflow:hidden in your css to clear it.
Floating everything can make for a great deal of inconsistency; depending on how wide a screen is and how tall certain elements are rendered, you can end up with a hodgepodge of screen jag.
For example, widening the screen would cause more elements to fit on the top line, so they would jump up. Items not in the top line will slide down, and then catch on the corner of an element slightly taller than everything before it.
Float is a handy tool, but it's no panacea; use with caution. Make yourself a sandbox site, and use something like Chrome's developer tools, or Firefox w/ Firebug to see what results you get when floating it all.
I dislike using floats because of these clearing issues. I generally use display:inline-block, and for my IE6/7 stylesheet for the same rules, I put zoom:1; display:inline
With inline-block, block elements flow like inline elements, while behaving like blocks. This I feel is more intuitive than breaking out of the flow like floats do.
I use this kind of layout on my twitter client: https://timshomepage.net/twitter
And here's the uncompressed stylesheet: https://static.timshomepage.net/css/twitter.css