I'm an idiot - Re: tables and external css

[brianellisrules]

Hi, I'm trying to do probably the most simple thing in the world... format a table using an external stylesheet.

<table class="blah">
<tr>
<td>data1</td>
<td>data2</td>
</tr>
<tr>
<td>data3</td>
<td>data4</td>
</tr>
</table>

And my stylesheet would look something like:

.blah {border: 2px solid black; font-family: arial; }
.blah td {text-align: center; }

I've tried this and about a gozillion variations of this, but to no avail. I've tried wrapping the table in div's, but that didn't work either. I've been fighting with this for a while and I even searched the web but my idiotness must be carrying over to general internet use because I couldn't find anything to help.

And I was able to get some php to work, but I guess some simple CSS is out of my league...

 

[steelphantom]

I'm pretty sure you have to do this:

<table>
<tr>
<td class="blah"></td>
</td>
</tr>
</table>

Basically, apply the classes to each individual cell, not the entire table. That should work.

 

[MrSmith]

Try:

td {text-align: center; }

No need to declare the class in the td tags.

 

[londonweb]

If all your tables are going to be the same, you could redefine your td styles, like this:

td {text-align: center;
border: 2px solid black;
font-family: arial;}

That way, every time you have a td the same style is applied, and if you want different text styles within each cell, just use a div.

Edit - The phone rang while i was writing this and Mr Smith beat me to it!

 

[MrSmith]

Rather than use a div where you want a different style in a particular cell, surely it's easier to use an in-line style:

<td style='text-align: right'>

 

[londonweb]

Rather than use a div where you want a different style in a particular cell, surely it's easier to use an in-line style:

<td style='text-align: right'>

Yes, that would work. More than one way to skin a cat, as they say

 

[richjtg]

I know this might sound obvious, but you are linking to the external stylesheet correctly?

 

[brianellisrules]

Hey everyone, thanks for the responses. A couple of things:

Yeah, the stylesheet is linked correctly. Other parts of the page are formatted correctly, just not the table.

I thought of using the generic td {text-align: center} type of option, but I have more than one table on my site and I don't want to start mucking things up.

I also thought about using an in-line style declaration, but that could get messy as the table gets bigger if I'm going to have to go by hand and change 30-something td tags...

I'll try applying the class to just the td tag and see how that works.

Thanks for the help everyone.

 

[MrSmith]

Of course a purist would say the idea of styles is to replace things like tables

But moving on...in your case I would probably set a default syle for the most common scenario, eg:

td {text-align: center;
border: 2px solid black;
font-family: arial;}

then set up styles for the other cases:

td.onestyle {blah blah;}
td.anotherstyle {blah blah;}

and declare as necessary in those td cells:

<td class="onestyle">

Then every kind of td style can be changed in your external style sheet.

 

[Salasm]

And my stylesheet would look something like:

.blah {border: 2px solid black; font-family: arial; }
.blah td {text-align: center; }

Did you try:

table.blah {border: 2px solid black; font-family: arial; }?

Classes need a parent.

 

[MrSmith]

Huh? You can set a class as '.class' and declare it in any element. Using 'table.class' merely restricts the declaration of that class to the table element. It isn't a requirement.

 

[brianellisrules]

Tables are still used to display tabular data though... right?

After some searching and some experimenting, I can get the table formatted correctly using CSS that's placed in the header of the document, but when I put it in an external stylesheet, it craps out on me. Weird.

And I know the stylesheet is linked correctly because there are other elements on the page which reference the stylesheet that are formatted correctly.

http://www.brianellisrules.com/milkshakes/index2.php > style in the header (good)
http://www.brianellisrules.com/milkshakes/index3.php > style in a separate sheet (bad)

The idea is to pull data from a mysql database and display it in a table. Seems simple enough... and I can get the php/mysql portion to work. It's just the formatting that's hosing me now.

As far as I can tell, my html and css is valid.

 

[MrSmith]

Not important, but I always link my external stylesheets with the relative address rather than the absolute. Also there's no reason the body style can't go in the external as well.

But more to the point, I notice in your external file you still have the likes of:

.milkshake td { font-size: .75em; vertical-align: top; }

This should be:

td.milkshake {...}

There could be others. It's a whopper of a style sheet and I can't find the energy to check it all

 

[brianellisrules]

Not important, but I always link my external stylesheets with the relative address rather than the absolute. Also there's no reason the body style can't go in the external as well.

But more to the point, I notice in your external file you still have the likes of:

.milkshake td { font-size: .75em; vertical-align: top; }

This should be:

td.milkshake {...}

There could be others. It's a whopper of a style sheet and I can't find the energy to check it all

C'mon, 10KB stylesheets aren't *that* big, are they?

Thanks for taking a look. The group of 5 milkshake-related ones towards the top are what's giving me a problem. And I'm not doubting the correctness of your suggestion, but it worked that way for the internal CSS... does it need to be changed for an external sheet? I'll give it a shot and see what happens.

Edit: no change :\

 

[MrSmith]

I can still see this in your external sheet

/*Milkshake Table! /*
.mcenter { text-align: center; padding: 15px 0 0 0; }
.mcenter table { margin: 0 auto; width: 70%; }
.milkshake { text-align: center; font-family: "trebuchet ms", verdana, helvetica, arial, sans-serif;}
.milkshake th { font-size: .8em; font-weight: bold; border: 1px solid black; }
.milkshake td { font-size: .75em; vertical-align: top; }

 

[brianellisrules]

Yeah, I tried changing it and it didn't make a difference so I switched it back. It works that way when it's in the header so I don't see how that could be the problem.

Also, I checked my CSS with the w3c validator and it didn't flag that as an error.

 

[MrSmith]

Have you tried deleting everything from the external style sheet except the milkshake bit? There could be something else in the cascade interferring. The external sheet is a lot bigger than the styles in the head...

 

[brianellisrules]

Have you tried deleting everything from the external style sheet except the milkshake bit? There could be something else in the cascade interferring. The external sheet is a lot bigger than the styles in the head...

Those 5 lines of CSS are now the only thing in the stylesheet and still no dice.

Edit: I changed it back because that's the sheet for the rest of my site and it looks like garbage without it.

 

[Benjamin]

your problem is that this line...

/*Milkshake Table! /*

should be...

/*Milkshake Table! */

you have commented out of all of your Milkshake Table! stuff when you used /* to close your comments. you should get yourself a colorized syntax editor... like Smultron or BBedit.

 

[brianellisrules]

your problem is that this line...

/*Milkshake Table! /*

should be

/*Milkshake Table! */

you have commented out of all of your milkshake table! stuff when you used /* to close your comments. you should get yourself a colorized syntax editor... like Smultron or BBedit.

You sir, are a genius. And I am an idiot, just like the thread title implies.

As far as an editor goes... Right now I'm using Davor's PHP Editor which is colorized for php stuff, but not css. I'm also on a PC, so I'm guessing that Smultron and BBEdit are for Mac's...?

Anyhoo, thanks a million for helping me out. That was driving me insane.

 

[Benjamin]

Ah a PC editor, not sure, but yeah colorized for CSS editor would help, and it does help a lot. You aren't really an idiot, a comment error like that won't show up in validating it, which is what I tried first but the error wasn't picked up. Anyway NP, glad I could help.