I work on HTML email campaign builds on a daily basis and in the past 24 hours I've seen all of my emails aligning left. This includes the email campaigns I've built previously (which were tested in Yahoo! Mail and used to align center).
Has anyone else come across this? Any ideas what is causing it and whether there is a fix that can be added?
The standard coding used is tables with align center. This now doesn't work and all tables align left it seems.
I've found a solution for this.
On the outer-most 100% width and centrally aligned table add this code:
style="table-layout: fixed;"
This should fix it.
Add a class to the style block in the head of the email.
.table-center { table-layout: fixed; margin: 0 auto; }
Add this class to the outermost table to get the body centered in the window. Then add it to descendant tables as needed for center alignment.
I tried both of the solutions provided and neither was able to solve the problem. I believe there is a larger issue – Yahoo! mail wraps the email in several div tags, one with a class of "body". This div is given a width value of "auto".
When I change this value, via Chrome developer tools, from "auto" to "100%" it fixes the problem.
Unmodified:
"Fixed":
Because this div is outside of the reach of my style block in the head of the email I do not believe this issue can actually be fixed. I would classify this as a bug on Yahoo's part.
I second Ed Johnson's answer here regarding the "fixed; margin: 0 auto;" style on the outer table. I just used this fix instead of the "table-layout: fixed" style because the latter seemed to break my responsive email style.
Related
I'm working on a project using the Vue.js 2.0 framework and a bit of Bootstrap 3. This project has required me to work more on the front-end than I am normally used to so I was wondering if anyone here could give me some useful insight into a few CSS issues I appear to be having.
The Project can be found here: http://rgmotorhomehire.com/project
If you give the source a quick inspection, you will probably notice that the body element is only the height of the navbar, and that the container div's for my various 'Pages' are actually totally outside of the parent body element.
The main thing I'd like to know is:
How I can force the Body to 100% height via CSS, so that it wraps it's child elements properly, and I can then add a Footer to the HTML.
Please note that I have already tried:
html,
body {
margin: 0;
height: 100%;
}
However, if you try this for yourself in the inspector, you will notice this then introduces a new issue of the HTML element now having an empty space below it.
This whole scenario has left me more than a little lost and confused. Hoping someone out there can inform me on whats causing my issues.
Note: I'd like to apologise in advance for any pointless info this post contains (including this note), I've had complaints in the past about my questions not being direct enough but I've tried my best to be as clear and concise as possible, Thank you.
UPDATE: Literally straight after this post, I discovered the solution is to use clearfix on my wrapper divs as they had a 0 height bug. This post can probably be closed now. I found this solution here: http://www.jqui.net/tips-tricks/css-clearfix/
clearfix is a bootstrap class. It clear out all float property. that is right or left.
If you have a div of calling float left property.
for the class pull-right have the property float right. So for the next div we want to clear all the floating property that called before, so we call clearfix it clear all the floating property. so that it works fine.
I've been setting up a very basic Wordpress site. All of the pages have a lot of empty space at the bottom. Pages with more placeholder content have more space at the bottom than the others.
I have been reading other threads from people with similar problems, and I can't fix the problem on my site using suggested fixes (the margin property in a certain div was often the culprit).
Check it out: http://www.hairofthedogproductions.co.nz/?page_id=5
My client wanted a totally minimal bare-bones site so I have collapsed post/page metadata, comments, and the sidebar. I just can't for the life of me get rid of the big empty space at the bottom.
Your main problem is in the comments template. I see you're using visibility: collapse to hide elements, but collapse is just for table elements, and if used in other tags it'll default to hidden. Plus, keep in mind that visibility: hidden hides elements but keeps them in flow. You might want to use display: none instead.
This will solve your problem, try it out.
#comments { display: none; }
Validate your page: http://validator.w3.org
I validated it and found about a dozen errors (some of them potentially serious enough to break the layout of the page, such as an unterminated tag).
When inspecting the source in Chrome, the element in the blank area was the HTML tag itself, which might indicate an overall failure to determine the correct document structure--the parser tries but can't always determine what you want it to do when there are malformed tags.
Just apply overflow:hidden on your main wrapper then it will remove all blank space at the bottom
#main {
overflow: hidden;
}
I'm specifying a teal background color for the body of a page:
<body style="background-color: #0197B1">
This overrides a style sheet, and sure enough the teal appears, but not all the way down the page (both in Firefox and Chrome)
I add the following at the bottom:
<br style="clear:both" />
some text
</body>
to attempt to resolve things and also debug what is occurring with the inline element at the bottom. It appears (Chrome developer tool) that the body does not go all the way down the page. Hmm ... why does this happen, what's the fix?
Page can be viewed at: http://www.momentumnow.co/testimonials
Thanks
Remove the height: 100%; property on the body (it's set in the CSS) and the background will fill the entire page. Also, as a friendly note, you shouldn't be using tables to design websites. It's very poor practice - what you want to do is easily achievable without tables.
Remove html {background-color:#ffffff;} and you should be done.
When you float an element you are removing it from the document's flow. The page loses a sense of where and how large the element is.
You page is a series of nested tables with floated elements inside. The only thing providing actual vertical structure is the tables themselves. Your background is ended where the tables run out.
To recode this page would be easy for someone who was familiar with Standards-based, semantic markup. I would suggest learning those methods. In the meantime, #Christian Varga's solution will get you off for the time being.
I check Firefox only,
line 4: html{background-color:#ffffff; height:100% }
Just remove body
or
line 4: html,body{background-color:#0197B1; height:100% }
Screenshot 1: https://skitch.com/android86/fm4r7/dreamweaver ( HTML design view)
Screenshot 2: https://skitch.com/android86/fm4fd/dreamweaver ( CSS)
In the screenshot 1, I tried to have the links for website Contact and Login as a part of the Nav tag provided by html 5, however I wanted these to be horizontally next to the hgroup.
I assigned a width to hgroup and now I have a lot of space to the right of hgroup however the nav is starting to line up horizontally, is this something I should handle with position or float property in CSS?
I tried both in various combinations, I assigned a width to nav in order to fit in the area however it doesn't seems to be working. Any clue?
The CSS code is in screenshot 2. After looking at a previous discussion here I thought using class might not be required instead rather parent child relation might be most relevant. I personally thought and read that one should use id's in CSS when it is a very unique scenario and class when we expect to use a certain thing very commonly, is this parent child relation a way of declaring a class? Thanks everyone.
It can be handled by floating both elements left and removing all fixed widths. Here is the amended jsFiddle: http://jsfiddle.net/joshnh/jdUWt/
In this fiddle, you can see that the horizontal rule does not go all the way across (under the number). I want it to. I have tried using list-style-position:inside;, however this means that I cannot force the number to appear in the correct position (because of the floated left image). Is there an elegant way to do this using CSS, or do I have to resort to generating the numbering myself and then styling appropriately?
You seem to be well aware of the list-style-position property, so you should know why the horizontal rule will not span all the way under the bullet/number. The list has a padding on the left, pushing the list elements to the right. Their contents won't go out of their space :).
Here's how I got over the issue: http://jsfiddle.net/J4b6Y/14/
[EDIT]
Fix for webkit browsers: http://jsfiddle.net/J4b6Y/16/
[EDIT2]
Works in all browsers AND has valid HTML o_O http://jsfiddle.net/J4b6Y/37/
[EDIT3]
OK, here's another one... http://jsfiddle.net/J4b6Y/39/
UPDATE 4
Seems like Update 3 worked well on webkit but not FF... so it's time to use real CSS power.
http://jsfiddle.net/J4b6Y/122/
UPDATE 3
Now what about this
http://jsfiddle.net/J4b6Y/105/
UPDATE 2
http://jsfiddle.net/J4b6Y/48/
UPDATE
Try this if it works for you
http://jsfiddle.net/J4b6Y/33/
I would suggest that you remove the hr tag and the floating image properties.
If you cannot set the image with css background, you can do the following:
HTML
<li>
<img src="" alt="test"/>
<p>Test</p>
</li>
CSS
li{
border-bottom:1px solid black;
list-style-position:inside;
}
li p{
display:inline-block;
}
Also, if you can remove the p tag, you will save few bites.
From the other answers to the question, it would seem that whilst there are ways of accomplishing this with CSS, there isn't an elegant way. As such, my prefered solution is to generate the numbering in the HTML and style appropriately. This can be trivial to do if the page is generated as a result of server side scripting.
I shall keep an eye out for more elegant ways of solving this with CSS and update this question if I find any.