So I’m trying to put together a very basic text listing (actually a list of my movies, but that’s not important) and the conflict is related to my use of an nth-child class definition and what I suspect is an inherited issue (?).
I’d like 5px of padding surrounding the top, bottom, and left sides [B]
(padding: 5px 0px 5px 5px;)
[/B] of the text only but what’s happening is that the entire row is indenting, not just the text.
When achieved, you should be seeing the yellow rows (for example) appearing 5px larger in dimension than the text on the TOP/BOTTOM/LEFT sides (basic padding, in other words, nothing fancy). Is there an efficient way in CSS to do this? I hope I’ve explained the situation sufficiently. 
Here’s the code:
s
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>HILIGHTER</title>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style type="text/css">
table.HILIGHT {font-family: Lucida Console; font-size: 20px; color: #000000; padding: 5px 0px 5px 5px;}
table.HILIGHT tr:nth-child(odd) {color: #000000; background: #FFFFFF}
table.HILIGHT tr:nth-child(even) {color: #000000; background: #FFFFCC}
</style>
</head>
<body>
<br>
<div id="evenodd">
<table class="HILIGHT">
<tbody>
<tr>
<td>MOVIE TITLE HERE
</td>
</tr>
<tr>
<td>MOVIE TITLE HERE
</td>
</tr>
<tr>
<td>MOVIE TITLE HERE
</td>
</tr>
<tr>
<td>MOVIE TITLE HERE
</td>
</tr>
<tr>
<td>MOVIE TITLE HERE
</td>
</tr>
<tr>
<td>MOVIE TITLE HERE
</td>
</tr>
<tr>
<td>MOVIE TITLE HERE
</td>
</tr>
<tr>
<td>MOVIE TITLE HERE
</td>
</tr>
<tr>
<td>MOVIE TITLE HERE
</td>
</tr>
<tr>
<td>MOVIE TITLE HERE
</td>
</tr>
<tr>
<td>MOVIE TITLE HERE
</td>
</tr>
<tr>
<td>MOVIE TITLE HERE
</td>
</tr>
</tbody>
</table>
<br>
</div>
</body>
</html>
Guys, I found a somewhat crude workaround which I’ve posted below. Please note: I’ve increased the left margin to 10px because it just looked better (I just didn’t want to confuse anyone about my prior “padding” code).
So basically I’ve defined row height + vertically aligned it to center + installed a universal selector definition for text-indent:. It isn’t graceful, but I was attempting to get this effect without Javascript or PHP.
Please feel free to improve upon it! Geez I can’t believe the damn thing worked.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>HILIGHTER</title>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style type="text/css">
table.HILIGHT {font-family: Lucida Console; font-size: 20px; color: #000000; [B]line-height: 30px; vertical-align: middle;[/B]}
table.HILIGHT tr:nth-child(odd) {color: #000000; background: #FFFFFF}
table.HILIGHT tr:nth-child(even) {color: #000000; background: #FFFFCC}
[B]* {text-indent: 10px;}[/B]
</style>
</head>
<body>
<br>
<div id="evenodd">
<table class="HILIGHT">
<tbody>
<tr>
<td>MOVIE TITLE HERE
</td>
</tr>
<tr>
<td>MOVIE TITLE HERE
</td>
</tr>
<tr>
<td>MOVIE TITLE HERE
</td>
</tr>
<tr>
<td>MOVIE TITLE HERE
</td>
</tr>
<tr>
<td>MOVIE TITLE HERE
</td>
</tr>
<tr>
<td>MOVIE TITLE HERE
</td>
</tr>
<tr>
<td>MOVIE TITLE HERE
</td>
</tr>
<tr>
<td>MOVIE TITLE HERE
</td>
</tr>
<tr>
<td>MOVIE TITLE HERE
</td>
</tr>
<tr>
<td>MOVIE TITLE HERE
</td>
</tr>
<tr>
<td>MOVIE TITLE HERE
</td>
</tr>
<tr>
<td>MOVIE TITLE HERE
</td>
</tr>
</tbody>
</table>
</div>
<br>
</div>
</body>
</html>
Change
table.HILIGHT {font-family: Lucida Console; font-size: 20px; color: #000000; padding: 5px 0px 5px 5px;}
to
table.HILIGHT td {font-family: Lucida Console; font-size: 20px; color: #000000; padding: 5px 0px 5px 5px;}
At the moment, the padding is applied to the table itself, meaning that there is 5px of space between the edge of the <table> and the <tr> elements within it. By putting the padding on the <td>s themselves, you’ll get the padding within each table cell.
I’m not sure that this is what you want, but it looks like you just styled your padding on the wrong element. Why don’t you try this code:
<!DOCTYPE html>
<html>
<head>
<title>HILIGHTER</title>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style type="text/css">
able.HILIGHT {font-family: Lucida Console; font-size: 20px; color: #000000; }
table.HILIGHT tr:nth-child(odd) {color: #000000; background: #FFFFFF}
table.HILIGHT tr:nth-child(even) {color: #000000; background: #FFFFCC}
table.HILIGHT td { padding: 5px 0px 5px 5px; }
</style>
</head>
<body>
<br>
<div id="evenodd">
<table class="HILIGHT">
<tbody>
<tr>
<td>MOVIE TITLE HERE
</td>
</tr>
<tr>
<td>MOVIE TITLE HERE
</td>
</tr>
<tr>
<td>MOVIE TITLE HERE
</td>
</tr>
<tr>
<td>MOVIE TITLE HERE
</td>
</tr>
<tr>
<td>MOVIE TITLE HERE
</td>
</tr>
<tr>
<td>MOVIE TITLE HERE
</td>
</tr>
<tr>
<td>MOVIE TITLE HERE
</td>
</tr>
<tr>
<td>MOVIE TITLE HERE
</td>
</tr>
<tr>
<td>MOVIE TITLE HERE
</td>
</tr>
<tr>
<td>MOVIE TITLE HERE
</td>
</tr>
<tr>
<td>MOVIE TITLE HERE
</td>
</tr>
<tr>
<td>MOVIE TITLE HERE
</td>
</tr>
</tbody>
</table>
<br>
</div>
</body>
</html>
Tommi, yours doesn’t work because it discards all of my careful Lucida Console instructions.
Stevie U Da Man. It works a treat. Geez I knew this was like a 2-letter fix lol. 
Thanks man.
Actually apart from missing the ‘t’ off table, Tommi’s suggestion would have worked fine.
If you have
table {font-family:'Lucida Console';}
table td {some other stuff}
then as long as you don’t put a conflicting font declaration in the second line, it will still be in Lucida Console, because font styling is inherited.
I just hate it when a character goes walkabout like that. Especially since I missed it lol. 
s
Oops, my bad, found him. The T was hiding under the bed… 