There is a table inside a paragraph. The cell inside the table has extra new line. Below is relevant part of the code.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.Page1773023 {}
.f31 {font-family:Times New Roman;font-size:12.00pt;font-style:normal;font-weight:normal;line-height:114%;}
.f1 {font-family:Arial;font-size:10.00pt;font-style:normal;font-weight:normal;line-height:114%;}
</style>
</head>
<body>
<div class="Page1773023" style="height:1056px;width:816px;">
<p class="normal"><pre>
<table class="normal" style="width:99.00px;border-spacing:0px;border-collapse:collapse;border:1.00px solid #000000;;">
<tr>
<td style="height:16.000px;width:96.000px;;;" >
<p class="normal"><pre>
<span class="f1" style="color:#FF0000;" >11111</span></pre></p>
</td>
</tr>
</table><br style="clear:left;"/>
</pre></p>
</div>
</body>
</html>
Now when I remove the <pre> tag from outer most <p>, the new lines is not seen. Any ideas why this is happening?
Download HTML Tidy Plugin on firefox and fix the errors...
By the way, I would try to minimize the tags you have used. Why do you need p, span, table, div, pre ?
First decide on what the layout should be and write only the code you really need.
Here is an example of how you could achieve around the same output. Make sure you have firebug or some inspect tools on your browser. It helps you make minor changes to margins and find the correct values.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.box {
width:104px;
height:80px;
border:1px solid;
margin-top:10px;
}
.box td {
color: red;
font-family: Arial;
font-size: 10.00pt;
font-style: normal;
font-weight: normal;
line-height: 114%;
}
</style>
</head>
<body>
<table class="box">
<tr>
<td>
11111
</td>
</tr>
</table>
</body>
</html>
The new line between <pre> and <table> is displayed as it is within a <pre> tag. This could be fixed by placing them on the same line: <pre><table ...>
Related
My html email template works well with gmail except windows 10 mail. Some images look giant on my windows 10 mail but normal size on my gmail. I have check out this post and its solution, but it is not working. Below is my whole html code
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
<title th:remove="all"></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style>
#container {
text-align: center;
max-width: 900px;
width:80%;
margin-left:10%;
margin-right:10%;
}
#salutation {
color: #e45042;
font-style: bold;
font-size:14px;
margin-top:5%;
}
#title {
font-style: bold;
font-size:17px;
color: #2869af;
}
#qrText {
margin-top:5%;
font-size: 11px;
font-style:italic;
}
#bodytext {
font-size:14px;
}
#footer {
text-align: center;
font-size: 11px;
width:70%;
margin-left:15%;
margin-top:5%;
}
</style>
</head>
<body>
<div id="container">
<div>
<img th:src="#{${environmentUrl+'/dist/img/email/some_img.png'}}" style="width:100%;"/>
</div>
<div id="salutation">
<p>Hi <span th:text="${name}"></span>,</p>
</div>
<div id="bodytext">
<p>
<b>SOME TEXT</b>
</p>
</div>
<div>
<table style="width:100%;">
<tr>
<td style="width:23%"><img th:src="#{${environmentUrl+'/dist/img/email/some_img.png'}}" style="width:100%"/></td>
<td style="vertical-align:bottom;width:31%"><img th:src="#{${environmentUrl+'/dist/img/email/some_img.png'}}" width="100%"/></td>
<td style="width:23%"><img th:src="#{${environmentUrl+'/dist/img/email/some_img.png'}}" style="width:100%"/></td>
<td style="width:23%"><img th:src="#{${environmentUrl+'/dist/img/email/some_img.png'}}" style="width:100%"/></td>
</tr>
<tr>
<td><b>SOME TEXT</b></td>
<td><b>SOME TEXT</b></td>
<td><b>SOME TEXT</b></td>
<td><b>SOME TEXT</b></td>
</tr>
</table>
</div>
</div>
</body>
</html>
This template works well in gamil, everything down to the size and align of the images are correct, it is just not working in windows 10 mail.
What I have tried:
changed 100% -> 100px
changed 100% -> 100
Actual result: nothing changes
Expected result: images and align to be working in windows 10 mail.
Windows 10 Mail uses Word's rendering engine, just like the Outlooks on Windows. Word's rendering engine doesn’t understand the style attribute on <img> elements. So what you need to do is define a width attribute with the expected value for Outlook, and have a more flexible width in an inline style for other email clients.
Also please note that the Outlooks (and Windows 10 Mail) don’t react properly to percentage widths. Setting a width="100%" would make the image "100% the width of the file physical width", and not "100% of its parent element" as you'd expect in CSS. So don't use percentages for the width attribute.
In your case, it would end up looking something like the following:
<img th:src="#{${environmentUrl+'/dist/img/email/some_img.png'}}" width="600" style="width:100%"/>
I'm having difficulties in formatting my HTML page.
As you can see from the source code, it's a table where each row contains a formatted list of records dynamically populated by my web app.
In the case one of the columns has an empty value, I would like to keep the formatting of the lines, so I should basically add enough spaces or think about an HTML block with the exact size of the text value.
The nice thing is each value has a fixed character length, so it should come in advantage.
I thought about creating a span but it doesn't support the width attribute and I should change the style to display:block, but in my opinion, it's getting a little too tricky, as I would like a simple and clever solution.
I attach the source code of the page and the output I get at the moment.
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252"></head>
<body>
<table>
<tr><td style="font-size: 11px; color: #000000; font-family: Verdana; border-bottom: #ff0000 1px solid;">
<table>
<tr><td>test1:</td></tr>
<tr><td>
<ul>
<li>FIELD1:;, FIELD2: <b>443</b>, FIELD3: <b>191,51</b></li>
<li>FIELD1: <b>1000101</b>, FIELD2: <b>442</b>, FIELD3: <b>43,2</b></li><li>FIELD1: <b>1000176</b>, FIELD2:, FIELD3: <b>36</b></li>
</ul></td></tr>
</table>
</body>
</html>
Your problem is that you got your semantics messed up. You try to build a table but then you put the whole table content in 1 cell and then you try to emulate the table in there by using a list.
Just put 1 field in 1 table cell and and it will come together quite easily. Also: "test1" is in this context the table caption or maybe a headline.
The first variant assumes that the field names might vary from row to row. If that is not the case they belong into the table header instead.
table#test1 tbody tr th {
font-weight: normal;
text-align: left;
}
table#test1 tbody tr td {
font-weight: bold;
text-align: right;
}
table#test2 thead tr td {
font-weight: bold;
}
table#test2 tbody tr td {
text-align: right;
}
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
</head>
<body>
<table id="test1">
<caption>test1</caption>
<tbody>
<tr><th>FIELD1:</th><td></td><th>FIELD2:</th><td>443</td><th>FIELD3:</th><td class="value">191,51</tr>
<tr><th>FIELD1:</th><td class="value">1000101</td><th>FIELD2:</th><td class="value">442</td><th>FIELD3:</th><td class="value">43,2</tr>
<tr><th>FIELD1:</th><td class="value">1000176</td><th>FIELD2:</th><td class="value"></td><th>FIELD3:</th><td class="value">36</tr>
</tbody>
</table>
<table id="test2">
<caption>test2</caption>
<thead>
<tr><td>FIELD1</td><td>FIELD2</td><td>FIELD3</tr>
</thead>
<tbody>
<tr><td></td><td>443</td><td>191,51</tr>
<tr><td>1000101</td><td>442</td><td>43,2</tr>
<tr><td>1000176</td><td></td><td>36</tr>
</tbody>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Superscript_size_in_table_cell</title>
<meta name="generator" content="BBEdit 10.5" />
<style>
table {
width: 60%;
font-size: 0.8em;
margin-left:auto;
margin-right:auto;
border-collapse: collapse;
}
.super_script {
font-size: 80%;
vertical-align: super;
}
</style>
</head>
<body>
<table id="table_1a-27">
<caption class="table_caption">Table 1A-27</caption>
<tr>
<td>Some text<span class="super_script">Note 1</span></td>
</tr>
<tr>
<td>
<ol>
<li>Beginning of sentence<span class="super_script">Note 2</span> than the rest of the sentence.</li>
<li>Some stuff here</li>
</ol>
</td>
</tr>
</table>
</body>
</html>
I want to change the text size and position for part of the contents of a table cell but the above doesn't seem to work for text within a table cell. I'd like be able to adjust the size if the table elements, not just for superscripting purposes.
For a basic :
1- put your 'super scripted' text in a <sup>
2- style your <sup> this way :
sup {
position: relative;
font-size: 75%;
line-height: 0;
top: -0.5em;
vertical-align: baseline;
}
Also interesting questions around same subject :
Wrong rendering of <sup> in table with valign=top in Chrome and Safari
relative font-size of <sub> or <sup> and their descendants in IE
Keep consistent line spacing with <sup> and <sub>
Html upper and lower indecies
[Edit] :
Some users mentioned some browser 'buggy' behaviours with relative sizing of font-size for the <sub> and <sup> markups.
Perhaps you should consider keeping on using a <span>
it doesn't work because you didn't define the cell class
just put
class="super_script"
in the td tag.
to change the size of cells make sure you do
table {table-layout: fixed;}
and you should be set!
I need to up text but if i apply class to TD or TR in IE, Opera and Chrome all cell goes up (background and border and text in cell).
Please look example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.myClass td{
position:relative;
top:-8px;
color:blue;
}
.myClass {
position:relative;
top:-8px;
color:blue;
}
td { border: red solid 2px ;}
</style>
</head>
<body>
<p> </p>
<table width="384" height="89" border="2" cellpadding="0" cellspacing="3" bgcolor="#cccccc">
<tr >
<td width="109" bgcolor="#FFCC00"> </td>
<td width="255" bgcolor="#00CCFF" class="myClass">this TD have class=".myClass"</td>
</tr>
<tr class="myClass">
<td bgcolor="#999999"> </td>
<td bgcolor="#FFFF00">this TR have class=".myClass"</td>
</tr>
<tr>
<td bgcolor="#666666"> </td>
<td bgcolor="#FFFFFF"><span class="myClass">this text within span-tags (.myClass)</span></td>
</tr>
</table>
</body>
</html>
Firefox don`t affect if is applied to tr_or_td, affect only to text with span-tag.
Every browsers work correct if in every TD of a row place text within
<span class="tdclass"> mytext in span-tag </span>
QUESTIONS) :
Is there some css structure to assign style only to data within TD but not to this TD
tr.myclass TD {}
in IE, Opera, Chrome applies to all cell, in Firefox don`t work at all.
Is there some css selector of TEXT - I mean for example:
.myclass > b
will be applied when in tag with .myclass we have b-tag
maby some word like EVERY_TEXT - may be such selector, for example:
.myclass > EVERY_TEXT {}
can anybody suggest another workable way to up text in all cells of table without span in every cell, and without .js
Thanks for helping!
Use an asterisk to select all elements in that section of the DOM, e.g.
<div class="one">
testing <br/>
<span> Test </div>
</div>
.one * {
color: red;
}
Fiddle here, if you need to check it
You could add a span tag around the content in the TD cell and apply CSS to the span.
<td>
<span class="styled_cell_content">Content</span>
</td>
Did you try a negative padding?
.myClass,
.myClass td {
color:blue;
padding-top: -8px;
}
If you're still looking for the answer to this, you need to specifically set the border at the td (and th) level - in IE this takes precedence over the color set on the whole element. For example, add this to your css, now IE will use this to style the border and the color set on td won't change it!
td, th {
border: 1px solid #000;
}
I've got some code that puts a line-through on a TR for deleted rows, but this means that my "Actions" column (that only has) buttons suffers. This is because there are individual spaces between the buttons, which wind up getting line-throughed as well.
After poking around on W3Schools, it boggles me why this example doesn't work:
<html>
<head>
<style type="text/css">
tr {text-decoration:line-through}
</style>
</head>
<body>
<table>
<tr>
<td>this needs to be line-throughed</td>
<td style="text-decoration: none !important;">This shouldn't be line-throughed.</td>
</tr>
</table>
</body>
</html>
How am I supposed to clear the line-through on child elements?
EDIT
I've updated my example - the problem is that I do not want to take the style off the parent element, just a single child element.
You shouldn't have to use important or inline styles for this. Try
h2 {text-decoration:line-through;}
h2 span {text-decoration: none; border: 1px solid black;}
EDIT
In that case with tr since yeah you applied text-decoration to it, you have to take text-decoration off the same element tr not td. Otherwise do:
tr td { text-decoration: whatever }
and then when needed
<td style="text-decoration: none;"></td>
There was a similar question a little while back and according to that answer you can't do what you're trying to accomplish.
EDIT: Given your example, why not just apply the line-through to TD elements individually
<html>
<head>
<style type="text/css">
td.deleted {text-decoration:line-through}
</style>
</head>
<body>
<table>
<tr>
<td class="deleted">this needs to be line-throughed</td>
<td>This shouldn't be line-throughed.</td>
</tr>
</table>
</body>
</html>
The line-through is applied to the H2, so you have to take it off of the H2.
<html>
<head>
<style type="text/css">
h2 {text-decoration:line-through}
h2.alt { text-decoration: none; }
h2.alt span { border: 1px solid black; }
</style>
</head>
<body>
<h2>Line-through</h2>
<h2 class="alt"><span>This is heading 2, and shouldn't be line-throughed.</span></h2>
</body>
</html>
(Viewable here: http://jsbin.com/anopa/)
The child (span) cannot affect the style of the parent (h2), which is where the style is applied. You have to alter where the style was originally applied.
Edit: updated example
One way to fix this would be to change
tr {text-decoration:line-through}
to
tr td {text-decoration:line-through}
As a result, the line-through is on the individual table cell and not the whole row. This allows you to specify a different style on a single cell.
BTW, the issue doesn't seem to exist with the example code you've given on IE5.5+. In FF3.5, however, the example behaves as you've explained. I'm not sure which is the actual correct behavior.
Try This
<html>
<head>
<style type="text/css">
tr td {text-decoration:line-through;}
tr td.noline { text-decoration:none;}
</style>
</head>
<body>
<table>
<tr>
<td>this needs to be line-throughed</td>
<td class="noline">This shouldn't be line-throughed.</td>
</tr>
</table>
</body>
</html>
Notice that the style is "tr td" for both.
<td style="text-decoration: none>
It works, unless what you're trying to uncross is a link to a URL.
Then this phrase also defeats the link.