I made a php script that generate and send emails with some statistics.
It works well but i have a tiny problem with my table.
Sometimes my columns are too "thin" and the content breaks into multiple lines like this :
i want to prevent this behavior.
I have tried two solutions :
white-space : nowrap; > doesnt work in outlook 2007
working with min-width > doesnt work in outlook 2007
Is there another solution that would work in outlook ?
Thanks
Please use HTML nowrap Attribute
When present, it specifies that the content inside a cell should not wrap.
Sample usage
<td nowrap>Not Found!</td>
References:
1. w3.org
2. w3schools
Note: Praveen Innocent answer is good but I don't have enough reputation to add comments
Using a nowrap on your prevents the text in td from breaking into multiple lines.
Eg: Doing <td nowrap> 10.9.6.80 </td> should solve your problem.
Some source: w3school
Related
In the last days we have seen how our newsletters doesn't print as they use to do in Yahoo Mail. Some <td> elements are taking more space that they were supposed to take. After some checking we have seen that width attributes in our inline styles are replaced by min-width.
I was try to see if there were any change in Yahoo Mail but I couldn't find anything. The only thing I have found an issue in github explaining how this behaviour is suppose to happen in Yahoo and in Gmail with the height. I've checked Gmail and it's not happening and everything was ok last week in Yahoo Mail.
Is anyone suffering the same issue? Does anyone know the explanation to that?
This is one of the newsletters suffering the problem, and this is how we see it now.
I answered this question earlier today, here's that answer:
Quick fix, place this in your <style> tag: #media yahoo {min-width:0!important}
This change/bug is brand new at the time of this posting. Yahoo is now changing width to min-width, breaking hybrid layouts among other things. There is a good discussion about other hacks in the Litmus Community.
Table elements for my purpose are parent elements to a button.
For (parent) table elements I placed "!important" next to "min-width" with no spaces.
The html is placed "inline". See the example below:
<table align="center" width="200px" bgcolor="#0076be" style="border-spacing:0;Margin:0 auto;width:95%;max-width:200px; min-width:0%!important;">
Button element has no inline style element of "width".
See example below:
<img src="[[asset_3]]" width="195px" style="border-width:0;max-width: 195px; height:auto;display:block;margin:0 auto;" border="0" alt="Click Show Images to Make Links Work">
Visit Yahoo Mail Update Potentially Breaks Hybrid Emails for more information.
I want to fix the width of particular columns in my Bootstrap table. I have tried everything I could find on the documentation and forum:
Adding the data-width attribute to the <th> tag pursuant to the Bootstrap Table documentation:
<th data-width= 20 data-field="0" data-sortable="true" data-align="left" data-valign="middle">Car Model</th>
Adding class="col-xs-4" to the <th> tag:
<th class="col-xs-4" data-field="0" data-sortable="true" data-align="left" data-valign="middle">Car Model</th>
and lastly, changing the CSS property of the column:
.table tr td:nth-child(3) {width:50%;}
Unfortunately, none of the methods above worked. I wonder if I have written the wrong code or some of my codes are conflicting with each other. I would very much appreciate your help!
Here is my table:
http://jsfiddle.net/mademoiselletse/bypbqboe/56/
Table-cells take your sizes as suggested, and try to use them if they can, but if the content doesn't allow it, then your sizes won't be respected.....unless you use the following property on your table:
table-layout: fixed
I may have oversimplified a little, read more about the exact reason why this works (assuming your first row contains small amounts of text - which it usually does because they are usually column headers), here:
https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
n.b. This concerns HTML-email coding (limitations apply)
For example in the Mail Chimp email template I'm working with there is this:
<td valign="middle" width="140" style="vertical-align:middle; text-align: left;">
I guess they're covering bases but when should one use valign="top" and when do I use style="vertical-align: top;" (and when use both)?
What's the history that leads to this confusing state of style assignment?
valign is deprecated and should not be used in newer applications, as its support is not guaranteed to be there in future versions of current browsers. vertical-align is the recommended CSS way of vertically aligning content.
See this link for details: http://phrogz.net/css/vertical-align/index.html
Since valign is deprecated, some email clients might not render it. So, there's the inline CSS fallback (since HTML emails require inline CSS).
I think the main reason why it is used in this case is so that no matter what, the <td> is being vertically aligned in the middle.
I have a header row which has this structure:
<th...
<a...
<span...
{text}
If you look at the attachement, you will notice that all the headers with this structure are aligned.
Well, when a specific header is clicked for "sorted" status, the structure will be like:
<th...
<a...
<span...
<table>
<tbody>
<tr>
<td>
{text}
</td>
<td>
<div> //with a background image
</td>
</tr>
</tbody>
</table>
Well, in IE8 this sorted column is no longer aligned (see the screenshot please).
I've tried a lot to put some css style (position:relative, etc) to the table inside the span to fix the alignment in IE8 but I failed..
Is here any css guru which can suggest a fix?
Please note that I can NOT change this structure (its some generated code from ICEfaces library) but I can apply css attributes (if I know where...).
Also, there is no css difference (some specific important style) to the sorted column applied. Just plain table inside that span.
Thanks.
Check the vertical-align property, maybe. Here, judging by the screencap, it seems to be in default mode, 'baseline'. (I'm not sure it will do much, though)
Try :
th.stuff {
vertical-align:top;
}
or :
th.stuff {
vertical-align:middle;
}
Also you could make all th slightly higher and gain somme padding to align the content. I think the problem, overall; commes from the select that appears in the th, inside the table.
You can use IE specific style sheets. They are known as conditional style sheets.
http://css-tricks.com/132-how-to-create-an-ie-only-stylesheet/
The idea of course would be to change the CSS for that element for IE only (because it does work already with other browsers).
<td align="left" valign="top">
Generates no validation errors, does it mean both are valid?
you have posted dozens of very similar questions, asking about every minute aspect of HTML validation, deprecated tags and so on. I think you need to stop worrying whether specific HTML snippets validate or not.
First, relying on a single metric (validation) for code quality is not good. Second, valid code is not always good code. You could nest 500 div tags with meaningless class names and it would validate, but it would be horrible code.
Is validation bad? No, of course not. It can help pick out problems that may appear cross browser. Things like mis-typed attributes, certain unclosed tags (like divs). But for example using <br> instead of <br/> in an XHTML document doesn't matter - browsers treat them identically.
Please take a little time to learn about the separation of HTML for content and CSS for presentation. Then you'll see how obvious the answer for your question is. If the validator isn't complaining about some attributes, then that doesn't automatically mean they are great and should be used liberally.
Think about what the attributes are doing. They are aligning content horizontally and vertically. That's a presentational issue, therefore, it is better to put them in CSS where possible.
Sorry for the rant, but I hope you can see my point and stop relying on the w3c validator for everything.
Why error? One is align (horizontal alignment), one is valign (vertical alignment), both can present.
From http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_tablemodule, the attributes of <td> contain align ("left" | "center" | "right" | "justify" | "char") and valign ("top" | "middle" | "bottom" | "baseline")
If it's really a worry, could you not use CSS instead, so you have:
<td class="myclass">
and then some CSS to align it? Surely that's more acceptable to do then your example?