[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 444
  • Last Modified:

CSS - I have right padding on table cell but text still butts with text in next cell

At the page below you can see the cell text in the 5th column butts up with the text in the 6th column even though I have TD right padding set to 5px;

http://www.housecarers.com/test4/photo_view2.cfm?mem=2145575946&slide=1

Please help
.ThumbTable   { table-layout: fixed;
			 	width: 800px;
}
.ThumbTable td th { padding:5px,5px,0,0;
                 text-align:left;
				 vertical-align: text-top;
				 vertical-align:top;
				 width:80px;
				 overflow: hidden;
				 }

Open in new window

0
Ian White
Asked:
Ian White
2 Solutions
 
Randy DownsOWNERCommented:
It doesn't look that way in Chrome.  Which browser are you using?
0
 
vuhanguyenCommented:
Your problem is:

.ThumbTable td th { padding:5px,5px,0,0;
                                 text-align:left;
                         vertical-align: text-top;
                         vertical-align:top;
                         width:80px;
                         overflow: hidden;
                         }

1. Your text is in a "td" not "td th"
2. There is no comma between values of padding command

It should look like this:
.ThumbTable td th { padding:5px 5px 0 0;
                                 text-align:left;
				 vertical-align: text-top;
				 vertical-align:top;
				 width:80px;
				 overflow: hidden;
				 }

Open in new window

0
 
Kim WalkerWeb Programmer/TechnicianCommented:
vuhanguyen has it almost right. He forgot to correct the "td th" issue that he mentions. If you want the css to be valid for both td and th, it should be:
.ThumbTable td, .ThumbTable th { padding:5px 5px 0 0;
                                 text-align:left;
				 vertical-align: text-top;
				 vertical-align:top;
				 width:80px;
				 overflow: hidden;
				 }

Open in new window

".ThumbTable td th" would only apply to a <th> tag that is a descendant of a <td> tag which is a descendant of an element with a class name of "ThumbTable." This would only work if you have nested tables and then only to the <th> tags in the nested table.
0
 
vuhanguyenCommented:
Thanks xmediaman, i forgot it :D
0
 
Ian WhiteAuthor Commented:
Thanks, that works
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now