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.
Related
This behavior is somewhat confusing to me, so I would appreciate some external help to understand what is happening.
I have prepared a fiddle to illustrate the behaviour http://jsfiddle.net/cseignc/mfoejqum/
I have an html table whose header is maintained fixed by absolute-positioning a second header via some CSS.
The table is generated thanks to the ng-repeat directive that loops through the array of columns and rows.
In order to provide horizontal scrolling, while maintaining the first column and the header fixed, I am filtering the array of columns to ng-repeat on by using the startFrom and LimitTo filters.
I am providing navigation buttons (left and right chevrons) to allow the user to scroll horizontally through the table. Those buttons increment/decrement the value passed to the startFrom filter.
This is working as expected for the table body but the second header fails to render properly. I am even finding it impossible to detect consistency in how the second header is rendering - or not.
I initially thought this was to do with $scope.$apply() not being called for, but all my code is within AngularJs, so I do not believe that there is a need for calling it...Correct me please if I am wrong.
I have found that resizing the screen will cause the header to render properly.
Any insight on this will be greatly appreciated.
Thanks !
EDIT:
The above issues appears to be Chrome specific. I have tested the behaviour in IE and Firefox and the header is rendering correctly in those browsers.
I made some changes to your fiddle that should give you a bit of a start in achieving exactly what you want:
http://jsfiddle.net/a06uvkr3/
The gist is that I:
1) initialized $scope.skip to 0 in the controller
2) Ditched the ng-repeat filters and used ng-show with some logic based on $index
3) tweaked the CSS so that the header's .tr-inner container is absolute rather than the things inside it and gave the header a fixed height. Also tweaked a bit of padding to account for the header items being thrown out a little
Obviously I can't verify that it fits your exact use cases, but you can see the result is much more promising.
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.
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.
hi guys im having trouble with padding with a input box for my contact page
im working with tables and i cant seem to get the correct padding or margin for my input boxes
here is the site: 217.120.183.184/cdweb/Contact/
please take a look about what i can try to fix this
Greetings,
Darren
I would start again from scratch, you have nested tables and all sorts, which is (technically) bad practice, I would look at using DIV's and CSS to absolutely align your elements.
Correct your table layout, you can't add as many td and colspan on it.
Purely using tables and inline styles (where you have widths and heights etc) is a very outdated practice, and debugging this kind of legacy design isn't so much a case of giving you a couple of rules, but more like saying 'you need to learn a bit more'.
Tables have their place - there's still a number of tricks that are close to impossible without them - but you really need to pick up some better technique.
Probably a good approach is pay someone to setup your page for you in clean css and html, and then see how they did it. There's thousands of services who will do this for you, and your design is not complex, so should be pretty cheap.
The thing is - this appears to be a site which is selling design services. If you're having a lot of trouble getting a simple design like this laid out, then at some point in the future you'll have a much much harder time, unless you bite the bullet, and start to pick up on proper, modern technique.
It's much simpler than it seems - keep things super simple, and don't forget to use a good CSS reset. The reset will remove all the table margins and paddings which are part of the browser's user agent styles, and let you define exactly how it should look.
Eric Meyer's CSS Reset - not namespaced, resets generally across items.
YUI3 Reset - namespaced, so you can selectively apply a reset to chunks of the page as required.
Here
is a (big) example of the massive problem I am having, when this page is live at euroworker.no/order, it is dynamically generated, I have supplied a static version for people to mess with. All I need is where it says "Endre Valg" to push the div wrapper under it down.. Sounds easy huh? I have tried many many things, I hope that some discussion and even trial and error can help us here.
Sorry for the huge amount of code and stuff but this has taken me all day and I am out of ideas.
Thanks.
Edit: Decided to go back to tables, thanks all for the suggestions. :)
Sorry I'm not going to give you the answer here, I have had a look and can not find it quickly. I will however give you two methods to get this problem sorted.
The first is this is a table of data what is the best html element for displaying tabular data? The table. I know there is a great, justified back-lash about using tables to format the page but when you have a table of data they are the correct element to use. This will simplifiy your markup and your css.
If you choose not to use a table what you will need to do is remove all the css effecting this page. look at the page check there are no over laps. Add back a few of the css classes and check there are no overlaps ... repeat. Start very simple and build up until the error occurs again, now you know what peice of css caused this.
If I was to have a guess it would be that the error was in elements marked either float or position:relative/absolute, but one of the above methods will get you there in an hour.
Sorry for not directly addressing the problem.
I support the idea of the previous answer to stick to the standards and use a standard html table for data and html blocks <div> for layout.
If your want to keep your box-structure, you should have a look at the css display-property instead of using position:absolute for positioning your table cells. This resource http://www.quirksmode.org/css/display.html#table might be interesting for you.
I'd echo the comments about using a table. It's never wrong to use a table when you're displaying tabular data, which is what you're doing here.
Either way, adding clear: left onto the class declaration for the anchor tag will help solve your problem:
#cart2Produkt a {
color:#0a5692;
text-decoration:none;
line-height:15px;
clear: left;
}
But the way this page is constructed is just a nightmare waiting to happen. Use a table.