Why does my CSS stop working whenever I add “<!DOCTYPE html…”
Question
I had some code that produced a table, and worked perfectly.
This is the code:
<!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">
<body>
<table>
<tr class="d0"><th>SCHED DATE<th>AMOUNT
<tr class="d0"><td style="text-align: left;">Aug 1, 2011</a></td><td style="text-align: right;">$100</a></td>
<tr class="d1"><td style="text-align: left;">Jul 27, 2011</a></td><td style="text-align: right;">$100</a></td>
<tr class="d0"><td style="text-align: left;">Jul 20, 2011</a></td><td style="text-align: right;">$100</a></td>
<tr><td>Total:</td><td style="{border-top: grey thin solid; text-align: right;}">$300</td>
</table>
</body>
</html>
Then I added a line so that I could pass html validation at validator.w3.org
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
but that broke my CSS, the right format is gone, and my total line is gone
How can I fix that?
4 answers
solution1
7 ACCPTED 2011-08-07 15:05:18
The following portion of your code looks strange :
<td style="{border-top: grey thin solid; text-align: right;}">
The {} arround the style's values doesn't seem quite standard (and as you specified, with the doctype declaration, that you want the browser to interpret your code using a well-defined standard...)
You should probably remove those {} , and use something like this -- which looks a bit more standard-compliant :
<td style="border-top: grey thin solid; text-align: right;">
Also, as noted by @cthulhu , you are opening <tr> and <th> tags, but never closing them :
- there is an opening
<tr>at the beginning of each of the following lines (and others) : - and you have two opening
<th>tags on the first line :
<tr class="d0"><th>SCHED DATE<th>AMOUNT
<tr class="d0"><td style="text-align: left;">Aug 1, 2011</a></td><td style="text-align: right;">$100</a></td>
<tr class="d1"><td style="text-align: left;">Jul 27, 2011</a></td><td style="text-align: right;">$100</a></td>
You should add closing </th> and </tr> tags where needed :
<tr class="d0">
<th>SCHED DATE</th>
<th>AMOUNT</th>
</tr>
<tr class="d0">
<td style="text-align: left;">Aug 1, 2011</a></td>
<td style="text-align: right;">$100</a></td>
</tr>
<tr class="d1">
<td style="text-align: left;">Jul 27, 2011</a></td>
<td style="text-align: right;">$100</a></td>
</tr>
solution2
1 2011-08-07 15:07:21
This breaks your css: {border-top: grey thin solid; text-align: right;} {border-top: grey thin solid; text-align: right;}
Remove the surrounding {} and it should be ok again.
solution3
1 2011-08-07 15:08:17
- Change You first row to
<tr><th>SCHED DATE</th><th>AMOUNT</th></tr>. - Remove the
{ ... }in your style on the bottom row.
solution4
0 2011-08-07 15:06:09
You have broken HTML for the first row which contains the header. It should be:
<tr><th>SCHED DATE AMOUNT</th></tr>
Broken HTML probably cause the browser to "skip" rendering things and break the design.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.