Solved

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

Posted on 2013-06-09
5
397 Views
Last Modified: 2013-06-11
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
Comment
Question by:Ian White
5 Comments
 
LVL 29

Expert Comment

by:Randy Downs
ID: 39233736
It doesn't look that way in Chrome.  Which browser are you using?
0
 
LVL 1

Accepted Solution

by:
vuhanguyen earned 300 total points
ID: 39233775
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
 
LVL 21

Assisted Solution

by:Kim Walker
Kim Walker earned 200 total points
ID: 39234921
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
 
LVL 1

Expert Comment

by:vuhanguyen
ID: 39239896
Thanks xmediaman, i forgot it :D
0
 

Author Closing Comment

by:Ian White
ID: 39240037
Thanks, that works
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
lastpass auto fill login form 5 25
Urgent need help ASAP With CSS 5 24
jQuery Canlendar click function 5 22
SVG Logo 4 20
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now