I am working on a Newsletter and am therefore pretty much forced to use tables.
According to this source, "margin-top" and "margin-bottom" is not supported by Outlook 2007/10/13. Since Outlook is a requirement for my Newsletter, I need a workaround.
Obviously there's "cellspacing", I however do sometimes want to apply margin-top/bottom without left/right. How can this be achieved?
If you needed pixel perfect height I would pad an empty cell with a spacer (clear 1px x 1px gif).
In the end I was able to solve this problem to my satisfaction by adding empty rows (without images) with a fixed height. This actually seems to be working fine with quite a lot email clients.
Related
I really want to know why and how to fix this thing.
The first image is from IE8 while the second is from Chrome.
What I want is the second one. Any advice?
You probably need to use the css rule:
white-space:nowrap;
This prevents text from going onto the next line
This is most likely to do with font rendering. It's different between browsers and some will render ever so slightly larger that others. Ultimately you don't want to be trying to fit words into spaces exact to the pixel. If you want to do that make sure you're using fluid layouts with percentage width and auto height.
I'm working on a newsletter design (which means no use of the CSS background-image property), and I need to use a stretched asset on the left and right side of a table.
So I have this table with 3 cells : one on the left and one on the right for my image that needs to take the whole height of the table, and one on the center with some text.
Issue is that the isn't taking the entire height of the cell in IE (and Outlook). I've added a red background color to the cell to make sure it's taking the whole height available.
My code is a bit too big to be shown here, but you can see it live here
And here is a JSFiddle : http://jsfiddle.net/jXtNE/
Set the padding, margin to 0px; If it not works, just give the negative values to move the margin to the end of the page. For eg -10px. May be this is not a perfect solution. But it temporarily solve your problem.
I have a table with 5 columns, 2 of which have a set width, the other three don't. Different browsers interpret this inconsistently.
Have a look at this fiddle in different browsers to see what I mean.
Firefox and IE9 render it the way I'd think correct: all cells have uniform width of 20% (two have a set width of 20% each, and the remaining 60% is divided between the remaining three cells).
Chrome, Opera, IE7 and IE8 force the empty cells without a set width to have zero width, which in turn forces the other two cells to stretch to 50% width each. Putting content into one of the three empty cells makes them take all available width (60% in case one cell has content, 30% if two, etc.). Likewise, removing the content off one of the two cells that have a set width results in a forced 0 width.
Which browsers got it right and which ones are doing it wrong?
Also, I perused the W3C spec regarding tables, but only found the description of the empty-cells property, which is supposed to control the rendering of empty cells with borders/background, but this does not affect the cells' width. I thought the table-layout property might do the trick, but while setting table-layout:fixed in Chrome does make all the columns appear, there is no way (or at least I don't see one) to do the opposite in Firefox. If you could elaborate on this and/or point me to the correct section of the W3C spec that covers this, I would really appreciate it.
The problem arises as the W3C haven't seemed to cover it yet, they haven't suggested any "right" way of dealing with this situation. The browsers have the liberty to interpret it the way they wish, in my opinion is the way IE9 and Firefox do it.
IMHO all the browsers are displaying things RIGHT. As a developer we should understand that what we expect from the empty cells. It is always better to define width or add some spaces even if your cell is going to be empty to achieve consistent display across all browsers.
put inside the "empty" <td>
How can I wrap the text displayed in the browser to either the width of the browser or a specified width, whichever is less?
I have been putting text inside <table width='850'> to wrap at a specific point, so if the user maximizes their browser on a gigantic monitor a whole paragraph doesn't fit in a single line. But when the user makes the browser super narrow, the above method causes text to carry over the edge of the viewable area. Not what I want exactly.
So, I'm looking for a better approach.
Oh, maybe I should add that my pages are extremely simple. There aren't banners up and down the left or right sides of them. Just text and images occupy the space from the left border of the browser to the right. Boring stuff.
EDIT - I accepted an answer, but I did find an issue (and a solution that seems to work) with the accepted answer when used with Internet Explorer. I spent half an hour trying to get max-width to work, but just couldn't. Every other style property worked fine though. Then I discovered this http://svendtofte.com/code/max_width_in_ie which said I had to use the following for max-width to work in IE, and it did: p { width:expression(400 + "px"); }. I don't understand why the fiddle example worked with max-width on IE, but not my page. Maybe it's cuz I include my css in my html page?
You could set the max-width property in your css.
That way, the page will expand until a certain point and then no more.
Example:
.mainDiv{
max-width:700px;
}
Working example: http://jsfiddle.net/Pa5JG/
More info on max-width: http://reference.sitepoint.com/css/max-width
Just use max-width. See this fiddle.
I've got three columns inside of a div that is the full page width. The two on either side are 25% width and the one in the center is 50% width. This layout is working fine except in IE6 where at certain page widths it bumps the right column to the next line. Is there a fix for this? Maybe an alternate way to layout a page like this?
Edit: I'm using a cross browser inline-block hack that works great in FF, IE, S, Chrome. I'm pretty sure this quirk has to do with the way IE calculates widths on fluid content, and happens due to miscalculation (rounding maybe?). I've put up an example here. Try slowly adjusting the window width in IE6 (maybe later versions too) and watch as the green DIV gets bumped down at certain widths.
Thanks,
Brendan
It's a rounding problem in IE6's box model. Generally, you can't have a combination equal 100%. Try making your values sum to 99% of total width, and it should work fine. This solution has always worked for me.
It sounds like a piece of content in that column might have a defined width which is more than what the 25% of page width it is given. Can you provide CSS examples?
EDIT: IE6 does not support inline-block which could also be the issue.
EDIT 2: I looked at it on a 1680x1050 screen in IE6 in a virtual machine. When I drag the width slowly over time from about 800px to 1600px, it randomly moves the right column around. I suspect it's an issue with the hack that you're trying to use. Your code is so simple that I think you should consider researching an alternate hack instead. I've also never seen the *<property>: <value> hack. What's the * do, all compliant browsers?