css class question

Bare
(@bare)

14 years ago
I realize this isn’t a WP specific question, but I’ve scoured the internet, W3schools, etc and everything sure looks like I’m doing this right but it’s not working…

I am setting CSS for my tables, I have a “header” (it’s not a true header, just an extra row) above my regular header. You can see it here:

http://tech.bareasschoppers.com/engine/alternate-oil-filters-vtx/

It is the line on top of the table that says “Replacement Oil Filters…”

Now, I have regular styling elements in a class called “.vert_table” which do the styling for the regular header and the cells below. I also created another class called “.table header” to style this very top line. All the elements of the styling are working except for the padding. I realized that it may be because I need to specify padding for a “td” element, so this is my class code:
```
.table_header {
	background: #e6e6e6;
	font-size: 1.4em;
	color: #900b0c;
	font-weight:bold;
	text-align:center;
}

.table_header td {
	padding: 15px 15px;
}
```
And as I said, everything in the top class works but the bottom “td” section with the padding does not. What is confusing is that I have other classes setup in this same manner and the padding does work.

Is it possible that something is over-riding it? I do have another class defined for the entire table, but I thought that this specific class would over-ride that.

PS – I know that the 15px padding is huge, I’m just using it so I am sure to notice when it’s fixed.

Thanks in advance to anyone who takes a minute to look at this and help.

Viewing 10 replies - 1 through 10 (of 10 total)

Anne Dorko
(@annedorko)

14 years ago
```
tr td.table_header {
padding: 15px;
}
```
That ought to do the trick!
Andrei Olsen
(@nebulus)

14 years ago

Almost 🙂 .vert_table td on line 148 overrides your padding values.

Btw, your table is missing <tr> start tag just above <th>Motorcycle Specific Filters</th>

Thread Starter Bare
(@bare)

14 years ago

That sure did fix my problem.

Can you tell me why I have some CSS setup exactly as I mention above (I got the code from the W3schools website) and it works perfectly, but in this case I had to change it to what you have to get it to function properly?

I really appreciate your help, I’m just hoping to better understand the solution in the hopes of helping both myself and others in the future. =)

Anne Dorko
(@annedorko)

14 years ago

I just did a quick test in Firebug for Firefox to figure out the fix.

CSS cascades styles through, if you’ve specified something to have a certain padding, then don’t address the thing you’d like to override properly it won’t go.
Andrei Olsen
(@nebulus)

14 years ago
.table_header td means the styles will be applied to <td> which is inside some element with the class “table_header”, e.g.
```
<div class="table_header">
    <table>
        <tbody>
            <tr><td>test cell</td></tr>
        </tbody>
    </table>
</div>
```
Now, since you had <td class="table_header"> you need td.table_header. This means table cell <td> with the class “table_header”. Or you could just use .table_header.

EDIT: Btw, note that td.table_header will override .table_header due to specificity.
Thread Starter Bare
(@bare)

14 years ago
OK, I think I understand everything you both said… =)
I wish I understood this stuff the way you guys do, I run a help website/forum for people with motorcycles so I’m good with that stuff but this confuses me, lol.

I’m trying hard to learn how to better implement CSS in my site. I feel that running through the W3schools, HTML Dog and similar sites help, but more than anything “real world” experience and trial and error have been my best educators (while having great people like you as a safety net).

I want to use CSS to style my tables, I grabbed some sample code from the W3schools site and expanded upon that, but is this the smartest way to do what I want?
```
/* begin style for overall table header */
.table_header {
	background: #e6e6e6;
	font-size: 1.4em;
	color: #900b0c;
	font-weight:bold;
	text-align:center;
}

tr td.table_header {
	padding: 15px 0;
}
/* end style for overall table header */

/* begin styling for table with vertical stripes */
.vert_table {
	border-collapse:collapse;
	margin-left:auto;
	margin-right:auto;
}

.vert_table td, .vert_table th {
	border:1px solid #5b5b5b;
	padding: 2px 5px;
}

.vert_table th {
	background: #900b0c url('images/tabletread.jpg');
	font-weight:bold;
	text-align:center;
	vertical-align:middle;
	color:#ffffff;
}

.vert_table tr td {
	background-color:#eeeeee;
}

.vert_table tr td.alt {
	background-color:#dddddd;
}
/* end styling for table with vertical stripes */

/* begin styling for table with horizontal stripes */
.horiz_table {
	border-collapse:collapse;
	text-align:center;
	vertical-align:middle;
	margin-left:auto;
	margin-right:auto;
}

.horiz_table td, .horiz_table th {
	border:1px solid #5b5b5b;
	padding: 2px 5px;
}

.horiz_table th {
	background: #900b0c url('images/tabletread.jpg');
	font-weight:bold;
	color:#ffffff;
}

.horiz_table tr td {
	background-color:#eeeeee;
}

.horiz_table tr.alt td {
	background-color:#dddddd;
}
/* end styling for table with horizontal stripes */

/* begin styling for PC3 maps table */
.pc3 {
	font-size:0.8em;
	border-collapse:collapse;
	text-align:center;
	vertical-align:middle;
	margin-left:auto;
	margin-right:auto;
}

.pc3 td, .pc3 th {
	border:1px solid #5b5b5b;
	padding: 3px 2px;
}

.pc3 th {
	background: #900b0c url('images/tabletread.jpg');
	font-weight:bold;
	color:#ffffff;
}

.pc3 tr td {
	background-color:#eeeeee;
}

.pc3 tr.alt td {
	background-color:#dddddd;
}
/* end styling for PC3 maps table */
```
To break this down, the first header is this “overall header” that we discussed in this post. The next table is supposed to be a vertically striped table, the one after that is a horizontal striped table (striped for ease of reading). The last table (pc3) is a specific one I setup to shrink the text because it was so big it wouldn’t fit otherwise.

Am I going about this in the wrong manner? Is there a better way to establish the same effect? I realize that there must be a better way to do this, but I also know that I need to finish this thing at some point…

Thanks very much to both of you for taking the time. As someone who has run “help” type websites for almost 10 years I can really understand and appreciate your time spent helping me.
Anne Dorko
(@annedorko)

14 years ago

A great way to check for redundancy and make sure that you’re writing “valid” CSS is to run it through the W3C’s CSS Validator. You can upload from a URL, local file, or copy & paste directly, so it’s very easy to use.

Upon running your CSS here through it looks like you’re pretty solid. The only recommendations it offered was to be sure to set a “color” where you’ve set a background color to be sure that the text is readable.

If you want to read up on some CSS Writing techniques, check this article out by Pro Design Blog (I love em). Take the suggestions with a grain of salt and read the comments too, they’re not all perfect suggestions but are worth considering if they’ll fit with your style.

Thread Starter Bare
(@bare)

14 years ago

Thanks very much for the design blog link, that site was an excellent read and actually helped me make some changes I really wanted to address. I had been wanting to move my search box to my header and setup my logo in the header better than I had it previously. Both were done with some guidance by that site and some fancy googlin’. =)

About the validator, thanks for the reminder because I keep forgetting that thing is there and I should be using it… When I input my CSS I didn’t see it making recommendations, am I missing that part?

Also, in regards to the tables CSS I posted above, can you tell me if my current format is the best way for me to accomplish my goal, or is there a superior or shorter way? I guess I’m mostly confused by the fact that my existing code worked for most of my tables, but I needed you to help me make the change to my class (.table_header). This is compounded by the fact that I have 2 tables and the .table_header has resulted in different font sizes in both – even though I specified a font size in the CSS.

Examples:

http://tech.bareasschoppers.com/power-commander-pc3-maps/

http://tech.bareasschoppers.com/engine/alternate-oil-filters-vtx/

If you look at the very top table headers (.table_header) the fonts are different sizes. I know it’s because my .pc3 class (first link) calls for a smaller font, and I’m guessing that the .table_header is then enlarging this already smaller font…

Thanks again to you both for getting involved.
Anne Dorko
(@annedorko)

14 years ago
What it comes down to is the organization and specificity of your CSS (like nebulus was saying). Just making sure that you’re consistently calling things in order.

Sometimes CSS can be picky. If you are styling td’s by calling out the td tag itself, sometimes it wants you to be specific when modifying a specific td instance using a class.

So instead of:
```
td {
    /* your styles here */
}

.specialtdclass {
    /* your styles here */
}
```
It may want you to do something more like:
```
td {
    /* your styles here */
}

td.specialtdclass {
    /* your styles here */
}
```
As for the recommendations, there’s a drop-down to select the types of warnings you receive, if you put it to “all” you should see what I’m talking about.
Thread Starter Bare
(@bare)

14 years ago
Annedorko, thanks so much for all the help and advice. I found the pull down on the CSS page, I must have been blind because I sure looked for it the first time and I didn’t find it…

My questions/concerns about my table-related CSS are basically because I want to set this up one time and have it work for me throughout. I prefer to have a good foundation to work from.
```
/* begin styling for table with vertical stripes */
.vert_table {
	border-collapse:collapse;
	margin-left:auto;
	margin-right:auto;}
.vert_table td, .vert_table th {
	border:1px solid #5b5b5b;
	padding: 2px 5px;}
.vert_table th {
	background: #900b0c url('images/tabletread.jpg');
	font-weight:bold;
	text-align:center;
	vertical-align:middle;
	color:#ffffff;}
.vert_table tr td {
	background-color:#eeeeee;}
.vert_table tr td.alt {
	background-color:#dddddd;}
/* end styling for table with vertical stripes */
```
This is my CSS for a table with vertical stripes. Something like this:
http://tech.bareasschoppers.com/engine/alternate-oil-filters-vtx/
I got the building blocks for this from this page on W3schools:
http://www.w3schools.com/css/tryit.asp?filename=trycss_table_fancy
Based on the problem I had that started this thread and our discussion, would it be smarter for me to change these classes to have the td, th, tr, etc at the beginning?

I have the same question regarding my horizontal striped table:
```
/* begin styling for table with horizontal stripes */
.horiz_table {
	border-collapse:collapse;
	text-align:center;
	vertical-align:middle;
	margin-left:auto;
	margin-right:auto;}
.horiz_table td, .horiz_table th {
	border:1px solid #5b5b5b;
	padding: 2px 5px;}
.horiz_table th {
	background: #900b0c url('images/tabletread.jpg');
	font-weight:bold;
	color:#ffffff;}
.horiz_table tr td {
	background-color:#eeeeee;}
.horiz_table tr.alt td {
	background-color:#dddddd;}
/* end styling for table with horizontal stripes */
```
Something like this:
http://tech.bareasschoppers.com/power-commander-pc3-maps/

I’m basically wondering most of this because of the issue I had with my header CSS:
```
.table_header { /* style for overall table header */
	background: #e6e6e6;
	font-size: 1.4em;
	color: #900b0c;
	font-weight:bold;
	text-align:center;}
tr td.table_header {
	padding: 15px 0;}
```
Which you were kind enough to help me resolve.

Lastly, I made this special table class because I needed the font to be smaller:
```
.pc3 {
	font-size:0.8em;
	border-collapse:collapse;
	text-align:center;
	vertical-align:middle;
	margin-left:auto;
	margin-right:auto;}
.pc3 td, .pc3 th {
	border:1px solid #5b5b5b;
	padding: 3px 2px;}
.pc3 th {
	background: #900b0c url('images/tabletread.jpg');
	font-weight:bold;
	color:#ffffff;}
.pc3 tr td {
	background-color:#eeeeee;}
.pc3 tr.alt td {
	background-color:#dddddd;}
```
For this .pc3 class can’t I just use my existing horizontal table class (which is pretty much the same) and only use this .pc3 class to tweak my text?

I know that I can test all this stuff out, so I’m not trying to seem like a freeloader – but my trial and error ends up with code like we discussed above… Sometimes it works, sometimes it doesn’t and sometimes it doesn’t conform to CSS standards.

Thanks again to those who have helped, I’ve really learned a LOT from this discussion so far.

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘css class question’ is closed to new replies.

css class question

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics