Post Reply 
 
Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Need a fix for a basic padding issue I'm having, help? >>nth-child
01-12-2011, 09:47 AM
Post: #1
Need a fix for a basic padding issue I'm having, help? >>nth-child
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 5pxWink

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>

Web Designers Directory | Advertise Web Design Business | Website Design
Find all posts by this user
Quote this message in a reply
Post Reply 


Messages In This Thread
Need a fix for a basic padding issue I'm having, help? >>nth-child - justinOrel - 01-12-2011 09:47 AM

Forum Jump:


User(s) browsing this thread: 1 Guest(s)