Currently i am having issue the the word-wrap:break-all; in IE 11 ,IE 9 (tested) .
word-wrap:break-all is working fine if paragraph contains lengthy words as in example http://jsfiddle.net/Midhun52/Jb26N/ .
<table style="width:40px" class="t">
<tr>
<td> </td>
<td class="r">
<div style="width:100%">
<p>abcd abcd yyyyyyyyyyyyyyyyyyyyyyyyyy abcd
</p>
</div>
</td>
</tr>
</table>
But if the lengthy word is made up of characters such as ''' ,':' etc word-wrap:break-all is not working as in example http://jsfiddle.net/Midhun52/3Jyt4/ .
<table style="width:40px" class="t">
<tr>
<td> </td>
<td class="r">
<div style="width:100%">
<p>abcd abcd yyyyyyyyyyyyyyyyyyyyyyyyyy ''''''''''''''''''''''''''''''''''''''''''''''abcd
</p>
</div>
</td>
</tr>
</table>
Please let me know what's the reason behind this? Any solution to this problem?
I think it's because (according to the w3c) the break-all property should only break letters or numbers.
If you really want a string like '''''''''''''''''''''''''''''''''''''''''''''' to be breakable at any point, you need to insert (somehow, perhaps with JavaScript) a line break opportunity between any two characters there. This could be <wbr> or . Under normal conditions, a string of special characters may have some permissible break points.
Related
I am attempting to place HTML in an email template of an older vendor solution that doesn't support modern HTML5 techniques. In the code sample (JSFiddle url below) if I resize the template and make it smaller the text falls to the next line without an indent.
Is there a way to make the text indent without a hard line break and indenting?
<div>
<table style="background:#8B0000 ;color:#FFF;width:100%;font-size: 11pt;font-family: Arial;">
<tr>
<td width="10"></td>
<td height="30">Test Email</td>
<td align="right"></td>
<td width="30"></td>
</tr>
</table>
<table style="background:#D9D9D9;color:#17375E;width:100%;font-size: 11pt;font-family: Arial;">
<tr>
<td width="10"></td>
<td height="30"></td>
</tr>
</table>
<table style="background:#D9D9D9;width:100%;font-family: Arial;">
<tr style="background:#FFF">
<td style="background:#D9D9D9"></td>
<td height="30">
<p style="font-size: 10.5pt;font-weight: 700;color:#555"> Test.</p>
<div style="font-size: 10pt;color:#555">
<p> There are pending items that require your review. Please see below are the details. The request must be approved or denied within 72 business hours or it will escalate to your manager. If you have questions regarding this email, call <b>1-555-555-5555</b>.</p>
</div>
</td>
<td style="background:#D9D9D9"></td>
</tr>
</table>
<table style="background:#D9D9D9;color:#17375E;width:100%;font-size: 11pt;font-family: Arial;">
<tr>
<td></td>
<td height="30"> </td>
</tr>
</table>
</div>
Working code sample: https://jsfiddle.net/wa1z4nvr/4/
Remove the ensp entity and give your paragraph a margin you like.
<p style="text-indent: 0; margin: 1em;">There are pending items that require your review. Please see below are the details. The request must be approved or denied within 72 business hours or it will escalate to your manager. If you have questions regarding this email, call <b>1-555-555-5555</b>.</p>
It looks like right now you're using en-spaces as your indent
This would create a behavior where the first line appears to be indented and the rest does not.
If you want subsequent lines of text to be lined up with your first line, then you're probably not looking for an "indent".
You can remove the from both your paragraph and your "Test." text, and adding a padding-left:1em to those elements, or to the table row containing them.
The table containing your test text might look like this:
<table style="background:#D9D9D9;width:100%;font-family: Arial;">
<tr style="background:#FFF">
<td style="background:#D9D9D9"></td>
<td height="30" style="padding-left: 1em">
<p style="font-size: 10.5pt;font-weight: 700;color:#555">Test.</p>
<div style="font-size: 10pt;color:#555">
<p>There are pending items that require your review. Please see below are the details. The request must be approved or denied within 72 business hours or it will escalate to your manager. If you have questions regarding this email, call <b>1-555-555-5555</b>.</p>
</div>
</td>
<td style="background:#D9D9D9"></td>
</tr>
</table>
<!DOCTYPE html>
<html>
<head>
<title>Firecore's Profile</title>
</head>
<body>
<div style="background-color:#DC143C; text-align:center">
<p><h1>Firecore Starblade</h1></p>
</div>
<p style="text-align:center">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRz83KYRPqRKFLb4rtJdS6JzGL-OZ-OhSVE5nOz1Q7CZ3seOe1-"; width="10%" ; height="10%">
</p>
<div>
<table border="1px" align="center">
<thead style="background-color:#DC143C">
<tr>
<th>Attributes</th>
<th>HP</th>
<th>AP</th>
<th>Dex</th>
<th>Str</th>
<th>Int</th>
</tr>
</thead>
<tbody>
<tr>
<td style="background-color:#DC143C"><strong>Value</strong></td>
<td>100</td>
<td>50</td>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
</tbody
</table>
</div>
<div style="text-align:center">
Back
</div>
</body>
</html>
Just starting out learning HTML. Making a practice site and ran into this problem. Tried googling it but unable to locate the cause. Not understanding why the "Back" HyperLink is showing above the table instead of below. I thought maybe it was because of the uses of p and div elements but i tried different combos with no luck. Thanks for your help in advance.
This seems like a simple problem, but it's actually really interesting. On a simple level, the problem is that the </tbody> tag is missing the closing >. Put it in and your code works.
But the more interesting question is why?
Well, it turns out that the problem is that you are in fact not closing the table tag. Your missing > essentially means you have a tag that looks like this: </tbody </table>. That's one tag and the browser will think "ah, we're closing the tbody and we've got some other stuff that doesn't make sense here so we're going to ignore it."
So you never actually close the table tag. This means that you now have some invalid markup in your table. To be precise, the following code is now part of your table's code:
</div>
<div style="text-align:center">
Back
</div>
</body>
</html>
This is handled according to the rather obscure rules listed here in the HTML5 specification section "Unexpected markup in tables". The basic meaning of all that specification (which the W3C confesses is "for historical reasons, especially strange") is that all the unexpected/invalid markup inside the table gets put before the beginning of the table.
That's why your link does the surprising thing of moving before the table. A simple mistake (the missing >) has ended up sending your browser down a whole rabbit warren of mistaken parsing.
This is because you have a broken close tag for tbody.
<div style="background-color:#DC143C; text-align:center">
<p>
<h1>Firecore Starblade</h1>
</p>
</div>
<p style="text-align:center">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRz83KYRPqRKFLb4rtJdS6JzGL-OZ-OhSVE5nOz1Q7CZ3seOe1-" ; width="10%" ; height="10%">
</p>
<div>
<table border="1px" align="center">
<thead style="background-color:#DC143C">
<tr>
<th>Attributes</th>
<th>HP</th>
<th>AP</th>
<th>Dex</th>
<th>Str</th>
<th>Int</th>
</tr>
</thead>
<tbody>
<tr>
<td style="background-color:#DC143C"><strong>Value</strong>
</td>
<td>100</td>
<td>50</td>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
</tbody>
</table>
</div>
<div style="text-align:center">
Back
</div>
Close your
https://jsfiddle.net/Delorian/pygbjfk6/
</tbody>
P.S. using JS Fiddle or a similar tool is a good way to learn HTML & CSS, as is getting to grips with Developer Tool in Chrome for manipulating HTML, CSS & JS on the fly.
I have a table formatted as:
<table>
<tr>
<td>
Long list of info
Line two
</td>
<td>
Shorter list of info
</td>
</tr>
</table>
How can I get them to both display from the top of 'tr'? I assume there's a way to stop automatic vertical alignment with CSS?
To clarify for future viewers, I got it working using:
CSS:
td {
vertical-align: top;
}
HTML:
<table>
<tr>
<td>
Long list of info
Line two
</td>
<td>
Shorter list of info
</td>
</tr>
</table>
(Here's the fiddle)
Hey if you have some questions how to use tables pls look some examples here
http://www.w3schools.com/html/html_tables.asp
http://www.w3schools.com/css/css_table.asp
If you prefer to avoid CSS you can do the same thing inline with the depreciated valign tag. Valign is not supported in HTML5 but is the recommended method if you are working within the context of an HTML email.
<table border="1">
<tr>
<td width="110">
Long list of info Line two
</td>
<td valign="top">
Shorter list of info
</td>
</tr>
</table>
Or you could always use two rows if you can predict and control where your breaks are going to be and want to simplify the markup further.
Here is my HTML:
<table>
<tr>
<td><img src="blah.png" width="80"> </td>
<td> <p>This is ment to be a comment section part</td>
</tr>
</table>
This is meant to be a comment engine kind of a thing.
Basically, I want a table with a profile image first on the left. Then I want the username at the very top of the TD, then the comment below the name without the name pushing it forward.
Thanks!
I’m not quite clear what you’re asking. Does the following HTML not achieve what you’re trying to do?
<table>
<tr>
<td><img src="blah.png" width="80"></td>
<td>
<p>Username</p>
<p>This is ment to be a comment section part</p>
</td>
</tr>
</table>
Edit:
Facebook’s comments look like this:
I can see two differences between that and the code I posted above:
Facebook has the username aligned with the top of the image
Facebook has the username on the same line as the comment.
Issue 1 can be taken care of by assigning vertical-align: top to all the cells in the table. Issue 2 could be handled with display: run-in, but that’s not supported in Firefox or IE 7 and 6, so you’re better off just having the username and comment be inline elements:
<table class="comment">
<tr>
<td><img src="blah.png" width="80" height="80"></td>
<td>
<strong>Username</strong>: <span>This is ment to be a comment section part</span>
</td>
</tr>
</table>
See http://jsfiddle.net/hK85e/2/
We're creating html signatures for all the users within our domain, based on a simple html template.
...
<tr>
<td colspan="3" style="font-style:normal; font-size:12px;"><%Tel%></td>
</tr>
<tr>
<td colspan="3" style="font-style:normal; font-size:12px;"><%Mobile%></td>
</tr>
<tr>
<td colspan="3" style="font-style:normal; font-size:12px;"><%Fax%></td>
</tr>
...
The placeholders are replaced with the actual numbers for a user.
The following lines are a part of the generated signature, with telephone, mobile and fax numbers. If a user has no mobile number, the second tr-td is empty:
...
<tr>
<td colspan="3" style="font-style:normal; font-size:12px;">T +123 456 789</td>
</tr>
<tr>
<td colspan="3" style="font-style:normal; font-size:12px;"></td>
</tr>
<tr>
<td colspan="3" style="font-style:normal; font-size:12px;">F +123 456 789</td>
</tr>
...
When leaving a line empty ( like in the second line ) the html renders just fine in modern browsers, making sure the Tel and the Fax line are close together.
However, once I add this template to Outlook 2003, Outlook adds an extra 'nbsp;' to the html, between the empty td-tags. This results in an full empty line being shown between the tel and fax number.
Obviously, the user is annoyed with this extra line and cannot be bothered to remove the extra line manually each time. The signatures are read-only, so changing it in the settings is not an option.
Any ideas on why this happens, and how to fix this?
Edit: Apologies, Outlook version actually is 2003, not 2010.
Not sure if this will work but it's worth a shot. Have you tried just closing the tag like so:
<td colspan="3" style="font-style:normal; font-size:12px;"/>