01-12-2011, 09:47 AM
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
Code:
(padding: 5px 0px 5px 5px
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:
<!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>
I'd like 5px of padding surrounding the top, bottom, and left sides
Code:
(padding: 5px 0px 5px 5px
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:
<!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>