Solved

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

Posted on 2013-06-09
5
435 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
5 Comments
 
LVL 30

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 22

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

Enroll in June's Course of the Month

June's Course of the Month is now available! Every 10 seconds, a consumer gets hit with ransomware. Refresh your knowledge of ransomware best practices by enrolling in this month's complimentary course for Premium Members, Team Accounts, and Qualified Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

718 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