Why aren't these colgroups working?
I am trying to use colgroup to style two sets of columns.
Here is the HTML:
<table class="likert">
<colgroup class="questions" />
<colgroup class="ratings" span="5" />
<thead>
<tr>
<th scope="col"> </th>
<th scope="col">strongly disagree </th>
<th scope="col">disagree</th>
<th scope="col">neutral</th>
<th scope="col">agree</th>
<th scope="col">strongly agree </th>
</tr>
</thead>
<tbody>
<tr>
<td>I thought the website was easy to use. </td>
<td><input type="radio" name="general-1" value="strongly disagree" /></td>
<td><input type="radio" name="general-1" value="disagree" /></td>
<td><input type="radio" name="general-1" value="neutral" /></td>
<td><input type="radio" name="general-1" value="agree" /></td>
<td><input type="radio" name="general-1" value="strongly agree" /></td>
</tr>
<tr> {{ rest of table }}Here is the CSS:
/* likerts scale tables */
#contentbox table.likert .questions {background-color:: blue;}
#contentbox table.likert .ratings {text-align: center; background-color: green;}(those are just sample colours while I try to get it to work. Don't worry, I wouldn't leave it that way!)
Here is the actual page:
http://www.housing.uwaterloo.ca/surveys/usability_survey.php
I have used this successfully in that past (see this example) but this time it will not work.
Any ideas?
demonhale posted this at 03:37 — 13th March 2007.
He has: 3,278 posts
Joined: May 2005
I tried this on the css for general scope: (removed color call for secondary attribute to background and then on ".questions" theres a double colon, removed the other and heres the css that worked...
/* likerts scale tables */#contentbox table.likert .questions {background: blue;}
#contentbox table.likert .ratings {text-align: center; background: green;}
Megan posted this at 13:19 — 13th March 2007.
She has: 11,421 posts
Joined: Jun 1999
Duh, double colon
Edit: no, that's not quite right. It is working but it is being overridden by the table rules in the default stylesheet. I'm not sure why that is, since the default fonts-colours.css is called before the forms.css....
Megan
Connect with us on Facebook!
JeevesBond posted this at 14:20 — 13th March 2007.
He has: 3,956 posts
Joined: Jun 2002
It goes firstly in order of specifity, if two conflicting styles have the same specifity then the one defined last is used. So the style defined in forms.css will override that of fonts-colours.css.
At least I think that is what's happening?!
a Padded Cell our articles site!
Megan posted this at 14:22 — 13th March 2007.
She has: 11,421 posts
Joined: Jun 1999
That's what I thought too, and I've tried various permutations. The specificity is the same for both. I think the problem is that the td's aren't children of the colgroups. So anything I do in the colgroup - even if it's got an !important on it, is overriden by what I've got specified for td. What I am actually trying to do is center the td's inside those colgroups. This must be why there is a valid align=" attribute for colgroups.
Megan
Connect with us on Facebook!
demonhale posted this at 00:27 — 14th March 2007.
He has: 3,278 posts
Joined: May 2005
My bad, wasn't paying attention to the two previous css... the default fonts-colours.css has the master call since it doesn't call the colgroups to style the elements, instead it calls on td and th which precedes the stylings of colgroup... The only way I could see this work is to call classes inside each cell elements (i.e. I thought the website was easy to use. ) ... other than that the style is over-ridden by the th and td classes on default fonts-colours.css
Megan posted this at 13:07 — 14th March 2007.
She has: 11,421 posts
Joined: Jun 1999
I specifically wanted to avoid putting classes on table cells. That's just a big mess.
As I said, I think this is why there is a valid align= attribute on colgroup. That works fine.
Megan
Connect with us on Facebook!
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.