27 replies [Last post]
mzimmers
mzimmers's picture
Offline
Enthusiast
CA, USA
Last seen: 9 years 33 weeks ago
CA, USA
Timezone: GMT-8
Joined: 2007-11-12
Posts: 124
Points: 67

(I decided to start a new thread on this, as my problems have shifted a bit.)

In the following files, the class="groups" tag seems to work when applied to the body, but not when applied to the table. Can someone explain this? Thanks.

The .css file:

@charset "UTF-8";
/* CSS Document */
 
/* for table data in the 10/22 article */
 
.groups table {
	width: 500px;
	border: 1px solid #000;
	background: #aaa;
	padding: 0px;
	font-size: .7em;
}
.groups td {
	color: #000;
	background: #f0f0f0;
	border: 1px solid #000;
	padding: 3px;
	text-align: right;
 
}
.groups th {
	background: #f0f0f0;
	border: 1px solid #000;
	padding: 1px;
	text-align: center;
}
 
.groups thead th {
	padding: 4px;
}
.groups tfoot td {
	text-align: left;
}
.fixWidth {
	width: 18%;
}

The HTML file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="groups.css" type="text/css" />
</head>
 
<body >
<table class="groups">
		<caption><strong>Results</strong></caption>
		<colgroup>
			<col />
			<col class="fixWidth" />
			<col class="fixWidth" />
			<col class="fixWidth" />
			<col class="fixWidth" />
		</colgroup>
		<thead>
			<tr class="head">
				<th></th>
				<th colspan="4">Ammunition</th>
			</tr>
			<tr>
				<th>Configuration</th>
				<th>CCI Mini Mag</th>
				<th>Winchester T22</th>
				<th>RWS Target Rifle</th>
				<th>RWS R-50</th>
			</tr>
		</thead>
		<tfoot>
			<tr>
				<td colspan="5">* double entries denote group size including/excluding flyer.</td>
			</tr>
		</tfoot>
			<tr>
			<th scope="row" align="left">Carbine/OEM</th>
			<td>1.62</td>
			<td>2.43</td>
			<td>1.22</td>
			<td>0.96</td>
		</tr>
		<tr>
			<th scope="row" align="left">Carbine w/ KID trigger</th>
			<td>3.75</td>
			<td>3.06</td>
			<td>0.72</td>
			<td>0.92</td>
		</tr>
		<tr>
			<th scope="row" align="left">Full Custom</th>
			<td>1.55</td>
			<td>1.49/0.99*</td>
			<td>0.97</td>
			<td>0.89/0.58*</td>
		</tr>
		<tr>
			<th scope="row" align="left">Target</th>
			<td>2.85</td>
			<td>1.75</td>
			<td>1.40</td>
			<td>0.81</td>
		</tr>
	</table>
</body>
</html>

You can view it at:

Michael Zimmers
Staff Writer
www.scopedin.com

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 8 weeks 3 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

mzimmers wrote: ... .groups

mzimmers wrote:

... .groups table ...

There's the problem.

mzimmers
mzimmers's picture
Offline
Enthusiast
CA, USA
Last seen: 9 years 33 weeks ago
CA, USA
Timezone: GMT-8
Joined: 2007-11-12
Posts: 124
Points: 67

Verschwindende

Verschwindende wrote:
mzimmers wrote:

... .groups table ...

There's the problem.

I'm not connecting the dots here. What's wrong with that line?

Michael Zimmers
Staff Writer
www.scopedin.com

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 8 weeks 3 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

Oh no you don't! Check the

Oh no you don't! Wink Check the example in the other thread. Laughing out loud

mzimmers
mzimmers's picture
Offline
Enthusiast
CA, USA
Last seen: 9 years 33 weeks ago
CA, USA
Timezone: GMT-8
Joined: 2007-11-12
Posts: 124
Points: 67

OK, I take it you're

OK, I take it you're referring to the .groups table instead of table.groups (or table#groups, to be literal)? I thought those would be equivalent, but...obviously not.

So, what is the difference between:

.class tag

and

tag.class

?

Thanks.

Michael Zimmers
Staff Writer
www.scopedin.com

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 8 weeks 3 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

Ah ha! Nice work, sir!Let's

Ah ha! Nice work, sir!
Let's use realworld instead of pseudocode. Well call it
.groups table and table.groups

.groups table targets a <table> that is a descendant of <anything class="groups">
example:

<div class="groups">
    <table>...</table>
</div>

div can be <anything> and every table in that <anything class="groups"> is targeted.

table.groups targets a <table class="groups">
example:

<table class="groups">...</table>

You should go do the tutorials over at http://htmldog.com

mzimmers
mzimmers's picture
Offline
Enthusiast
CA, USA
Last seen: 9 years 33 weeks ago
CA, USA
Timezone: GMT-8
Joined: 2007-11-12
Posts: 124
Points: 67

Well, that is really, really

Well, that is really, really interesting. (I don't pretend to fully understand it, but I do find it interesting.)

So, my question is, are the other constructs (tr, th, td, etc.) working because they're descendants of table? Because, as you saw in my code, I had them all defined that way, and the only one I changed was .

Michael Zimmers
Staff Writer
www.scopedin.com

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 8 weeks 3 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

mzimmers wrote: Well, that is

mzimmers wrote:

Well, that is really, really interesting. (I don't pretend to fully understand it, but I do find it interesting.)

So, my question is, are the other constructs (tr, th, td, etc.) working because they're descendants of table? Because, as you saw in my code, I had them all defined that way, and the only one I changed was <table>.

No, they worked because they were descendants of .groups but table isn't a descendant of .groups so it wasn't targeted. Once you change .groups table to table.groups in the CSS it will target <table class="groups">

mzimmers
mzimmers's picture
Offline
Enthusiast
CA, USA
Last seen: 9 years 33 weeks ago
CA, USA
Timezone: GMT-8
Joined: 2007-11-12
Posts: 124
Points: 67

OK, I have to confess that I

OK, I have to confess that I don't really understand that. My original syntax was the same for all of them, so why wasn't table a descendant of groups like the others were?

Anyway, I think I have the article reasonably whipped into shape. I haven't published it yet, but you guys can get a sneak preview here:

the article

The page is currently password-proteted; the password is "cssgroups".

I'd really be interested in hearing your opinions.

Michael Zimmers
Staff Writer
www.scopedin.com

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 8 weeks 3 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

mzimmers wrote:OK, I have to

mzimmers wrote:

OK, I have to confess that I don't really understand that. My original syntax was the same for all of them, so why wasn't table a descendant of groups like the others were?

Because the TABLE in question holds the class. It isn't a descendant of itself. Think of it this way, if you have a son and that son has a son. Both your son and grandson are your descendants and inherit your class (last name) but you aren't your own descendant are you? You carry the class="lastName". I hope that isn't more confusing. Laughing out loud

table.groups means a table with a class of "groups".
.groups table means any table inside of something (or anything) with a class of "groups".

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 8 weeks 3 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

I can't seem to get into the

I can't seem to get into the article using the password provided.

mzimmers
mzimmers's picture
Offline
Enthusiast
CA, USA
Last seen: 9 years 33 weeks ago
CA, USA
Timezone: GMT-8
Joined: 2007-11-12
Posts: 124
Points: 67

I don't know why the password

I don't know why the password didn't work, but I've removed password protection from the page, so you should be able to get in now. If not, let me know.

Michael Zimmers
Staff Writer
www.scopedin.com

mzimmers
mzimmers's picture
Offline
Enthusiast
CA, USA
Last seen: 9 years 33 weeks ago
CA, USA
Timezone: GMT-8
Joined: 2007-11-12
Posts: 124
Points: 67

V: were you able to get into

V: were you able to get into that page?

Michael Zimmers
Staff Writer
www.scopedin.com

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 8 weeks 3 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

mzimmers wrote: V: were you

mzimmers wrote:

V: were you able to get into that page?

Ah, I see it. Smile Looks good. Great article, too!
Check into those really easy to fix validation errors. Smile

mzimmers
mzimmers's picture
Offline
Enthusiast
CA, USA
Last seen: 9 years 33 weeks ago
CA, USA
Timezone: GMT-8
Joined: 2007-11-12
Posts: 124
Points: 67

Glad you like the

Glad you like the article.

Regarding the validation errors: the first two were evidently due to my trying to use a paragraph somewhere inappropriate. Fixed using a break instead.

The very last one (about the attribute "cols" not specified) is out of my hands, I think. That's coming from the comment area which is supplied by WP; I don't think I have any (official) access to that code.

The two errors coming from the nested list are a mystery to me. I wonder if WP for some reason doesn't like me to nest lists. There's no problem putting an ol inside a ul, is there?

Michael Zimmers
Staff Writer
www.scopedin.com

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 8 weeks 3 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

mzimmers wrote: ... The very

mzimmers wrote:

... The very last one (about the attribute "cols" not specified) is out of my hands, I think. That's coming from the comment area which is supplied by WP; I don't think I have any (official) access to that code.

Do you not have access to the server or the files?

mzimmers wrote:

The two errors coming from the nested list are a mystery to me. I wonder if WP for some reason doesn't like me to nest lists. There's no problem putting an ol inside a ul, is there?

Nested lists are fine.

mzimmers
mzimmers's picture
Offline
Enthusiast
CA, USA
Last seen: 9 years 33 weeks ago
CA, USA
Timezone: GMT-8
Joined: 2007-11-12
Posts: 124
Points: 67

Verschwindende

Verschwindende wrote:
mzimmers wrote:

... The very last one (about the attribute "cols" not specified) is out of my hands, I think. That's coming from the comment area which is supplied by WP; I don't think I have any (official) access to that code.

Do you not have access to the server or the files?

I do, but IIRC that stuff is handled in what WP considers core files, and I don't want to have to update everytime they do a rev. I've tried raising validation issues to the WP folks in the past, but they don't seem to consider it a very high priority.

I also seem to recall some kind of a WP bug regarding nested lists; I'll look into that a bit later.

So, do you think the click-on cell to get the target image is OK, or would light-box be worth implementing?

Michael Zimmers
Staff Writer
www.scopedin.com

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 8 weeks 3 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

mzimmers wrote: ... I do, but

mzimmers wrote:

... I do, but IIRC that stuff is handled in what WP considers core files, and I don't want to have to update everytime they do a rev. I've tried raising validation issues to the WP folks in the past, but they don't seem to consider it a very high priority.

I also seem to recall some kind of a WP bug regarding nested lists; I'll look into that a bit later.

I've never run into a validation issue with Wordpress. Everything can be controlled at the template.

mzimmers wrote:

... So, do you think the click-on cell to get the target image is OK, or would light-box be worth implementing?

I prefer it the way it is.

mzimmers
mzimmers's picture
Offline
Enthusiast
CA, USA
Last seen: 9 years 33 weeks ago
CA, USA
Timezone: GMT-8
Joined: 2007-11-12
Posts: 124
Points: 67

Verschwindende wrote: I've

Verschwindende wrote:

I've never run into a validation issue with Wordpress. Everything can be controlled at the template.

Right you are...the problem wasn't actually in WP core; it was in the theme I'd chosen.

I'm still having a couple of validation problems:

  1. The validator doesn't like when I put paragraphs in the text to the side of my little photos (like the close-up of the barrel muzzle).
  2. It also doesn't like my nested list at the bottom of the page. Also, I notice that when I try to put an ol inside a ul, the ol formats as a ul.

If you have any idea about either of these, I'd love to hear them. I'd like my page(Drunk to validate.

Michael Zimmers
Staff Writer
www.scopedin.com

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 8 weeks 3 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

The first issue is you have

The first issue is you have your paragraph tags closing before you close the italic tag

<i>The KID match barrel features a .920&#8243; diameter along its full length. It is available in three lengths and two finishes. You can also order a threaded tip if you wish to install a compensator or tuner (something the very, very serious .22 folks do).</p><p>Each barrel receives an 11 degree crown and the double ring logo at the muzzle.</i>

The reason your OL list items carry a disc is because this

.custom .entry ul li { list-style-type: disc; } in custom.css 
overrides the standard list-style-type: decimal; of a normal OL. The LIs in the OL are still descendants of the UL surrounding it.

Either make it something like this: .custom .entry ul > li or define .custom .entry ol li {list-style-type: decimal;}

mzimmers
mzimmers's picture
Offline
Enthusiast
CA, USA
Last seen: 9 years 33 weeks ago
CA, USA
Timezone: GMT-8
Joined: 2007-11-12
Posts: 124
Points: 67

Verschwindende wrote: The

Verschwindende wrote:

The first issue is you have your paragraph tags closing before you close the italic tag

<i>The KID match barrel features a .920&#8243; diameter along its full length. It is available in three lengths and two finishes. You can also order a threaded tip if you wish to install a compensator or tuner (something the very, very serious .22 folks do).</p><p>Each barrel receives an 11 degree crown and the double ring logo at the muzzle.</i>

Are you saying that an italic tag can't span multiple paragraphs?

I'm not sure what the root of this problem is. Removing the italic tag allows the page to validate, but...I suspect there's something more going on here. It seems simple enough: an image floating to one side of the page, with multiple paragraphs of (italicized) text next to it. You've looked at my source code; am I somehow doing this wrong?

Quote:

The reason your OL list items carry a disc is because this

.custom .entry ul li { list-style-type: disc; } in custom.css 
overrides the standard list-style-type: decimal; of a normal OL. The LIs in the OL are still descendants of the UL surrounding it.

Ah, OK...that makes sense.

Quote:

Either make it something like this: .custom .entry ul > li or define .custom .entry ol li {list-style-type: decimal;}

I took your latter suggestion. It works (still doesn't validate, though). May I ask what the first one means? I'm not familiar with the use of the ">" character.

Thanks again for all the help.

Michael Zimmers
Staff Writer
www.scopedin.com

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 8 weeks 3 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

mzimmers wrote:... Are you

mzimmers wrote:

... Are you saying that an italic tag can't span multiple paragraphs?

Correct. You also can't just change <i> to <em> if you must, close them before the paragraph closes and reopen. Better yet just put define the paragraphs that way instead of using the emphasis tags. Are you really emphasizing anything?

mzimmers wrote:

... May I ask what the first one means? I'm not familiar with the use of the ">" character. ...

> is a child selector. It selects a direct child but not child of child (grandchild).

using

ol li {
	color: #444;
}
ul li {
	color: #f08;
}
all descendant LIs are targeted
<ul>
	<li>This is pink</li>
	<li>This is pink</li>
	<li>This is pink
		<ol>
			<li>This is pink</li>
			<li>This is pink</li>
		</ol>
	</li>
</ul>

ol li {
	color: #444;
}
ul > li {
	color: #f08;
}
only children are targeted by the second rule (not grandchildren or greater)
<ul>
	<li>This is pink</li>
	<li>This is pink</li>
	<li>This is pink
		<ol>
			<li>This is gray</li>
			<li>This is gray</li>
		</ol>
	</li>
</ul>

I think you have your nested lists improperly nested. Do it like I have it above. <ol> can't be a direct child of <ul>, it can be a child of <li> though.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 8 weeks 3 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

I changed the example because

I changed the example about 300 times to get it right. Sorry if you got a million email updates if you subscribed to this.

mzimmers
mzimmers's picture
Offline
Enthusiast
CA, USA
Last seen: 9 years 33 weeks ago
CA, USA
Timezone: GMT-8
Joined: 2007-11-12
Posts: 124
Points: 67

Verschwindende

Verschwindende wrote:
mzimmers wrote:

... Are you saying that an italic tag can't span multiple paragraphs?

Correct. You also can't just change <i> to <em> if you must, close them before the paragraph closes and reopen. Better yet just put define the paragraphs that way instead of using the emphasis tags. Are you really emphasizing anything?

No, I suppose not, but I prefer the looks of it.

After looking at the generated code a bit more, I think the problem has to do with WP's automatic insertion of paragraph tags. Here's the code as it looks in WP's editor:

<img class="float_left" src="<?php  echo $imagepath; ?>kid_barrel.jpg" alt="KID barrel" /><em>The KID match barrel features a .920" diameter along its full length. It is available in three lengths and two finishes. You can also order a threaded tip if you wish to install a compensator or tuner (something the very, very serious .22 folks do). 
 
Each barrel receives an 11 degree crown and the double ring logo at the muzzle.</em><br clear="all" />

and here's what the "view source" from the browser reveals:

<p><img class="float_left" src="http://www.scopedin.com/wordpress/wp-content/uploads/tests/10_22/kid_barrel.jpg" alt="KID barrel" /><em>The KID match barrel features a .920&#8243; diameter along its full length. It is available in three lengths and two finishes. You can also order a threaded tip if you wish to install a compensator or tuner (something the very, very serious .22 folks do).</p><p>Each barrel receives an 11 degree crown and the double ring logo at the muzzle.</em><br clear="all" /></p>

(sorry that it's all run together on one line)

I think that, as long as WP is going to try to manage my paragraphs for me, I need another technique for vertically spacing text alongside an image. Any suggestions?

Quote:

I think you have your nested lists improperly nested. Do it like I have it above. <ol> can't be a direct child of <ul>, it can be a child of <li> though.

I can't see anything wrong with how I'm nesting; here's the code:

<ul>
	<li><strong>The Carbine model ain't half bad.</strong> Though clearly out-performed by all the other configurations, the Carbine model performed respectably, particularly with the subsonic ammunition.</li>
	<li><strong>The Target model has <em>nothing</em> to be ashamed of.</strong> It is clearly head and shoulders above the Carbine in terms of accuracy. While not on a par with a fully customized rifle, it must be remembered that for the price of the upgrade items in this test, one could purchase <em>both</em> the Carbine and Target models, and have enough left over for some good ammo. For someone looking for most bang for the buck, the Target model deserves a serious look.</li>
	<li><strong>High performance products <em>do</em> matter.</strong> There is no escaping the conclusion that the addition of high quality aftermarket components will dramatically elevate the performance of a 10/22. This tells us two things that experienced rimfire competitors already know:
<ol>	<li>The 10/22 is an outstanding platform for customization, and...</li>
	<li>You get what you pay for. These pricey aftermarket parts really deliver.</li></ol>
	<li><strong>Ammo matters, too.</strong> It didn't show up as vividly when tested in the carbine configurations, but the good stuff really shines in a high-quality rifle. And again, it's worth mentioning that it would be unreasonable to expect the high-velocity CCI ammo to compete with the other stuff here. It's simply intended for  purposes other than ultimate accuracy.</li>
</ul>

Look OK to you?

Michael Zimmers
Staff Writer
www.scopedin.com

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 8 weeks 3 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

No. That's wrong. It should

No. That's wrong. It should look like this:

	<ul>
		<li><strong>The Carbine model ain't half bad.</strong> Though clearly out-performed by all the other configurations, the Carbine model performed respectably, particularly with the subsonic ammunition.</li>
		<li><strong>The Target model has <em>nothing</em> to be ashamed of.</strong> It is clearly head and shoulders above the Carbine in terms of accuracy. While not on a par with a fully customized rifle, it must be remembered that for the price of the upgrade items in this test, one could purchase <em>both</em> the Carbine and Target models, and have enough left over for some good ammo. For someone looking for most bang for the buck, the Target model deserves a serious look.</li>
		<li><strong>High performance products <em>do</em> matter.</strong> There is no escaping the conclusion that the addition of high quality aftermarket components will dramatically elevate the performance of a 10/22. This tells us two things that experienced rimfire competitors already know:
			<ol>
				<li>The 10/22 is an outstanding platform for customization, and...</li>
				<li>You get what you pay for. These pricey aftermarket parts really deliver.</li></ol>
		</li> <<<--- you left out the closing tag for the "High performance products ..." list item
		<li><strong>Ammo matters, too.</strong> It didn't show up as vividly when tested in the carbine configurations, but the good stuff really shines in a high-quality rifle. And again, it's worth mentioning that it would be unreasonable to expect the high-velocity CCI ammo to compete with the other stuff here. It's simply intended for purposes other than ultimate accuracy.</li>
	</ul>

mzimmers
mzimmers's picture
Offline
Enthusiast
CA, USA
Last seen: 9 years 33 weeks ago
CA, USA
Timezone: GMT-8
Joined: 2007-11-12
Posts: 124
Points: 67

Well, awcrud. You're 100%

Well, awcrud. You're 100% right. Don't know how I missed that one.

So...any suggestions on the pics/side text?

Thanks.

Michael Zimmers
Staff Writer
www.scopedin.com

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 8 weeks 3 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

mzimmers wrote: So...any

mzimmers wrote:

So...any suggestions on the pics/side text?

Take out the <em> or <i> and just give the paragraphs the necessary styling.

mzimmers
mzimmers's picture
Offline
Enthusiast
CA, USA
Last seen: 9 years 33 weeks ago
CA, USA
Timezone: GMT-8
Joined: 2007-11-12
Posts: 124
Points: 67

Verschwindende

Verschwindende wrote:
mzimmers wrote:

So...any suggestions on the pics/side text?

Take out the <em> or <i> and just give the paragraphs the necessary styling.

I'll be damned...that actually worked. I guess when WP saw that I'd put in my own paragraph tags, it didn't try to do it for me (which is what got us screwed up originally). It seems to be working as desired now.

I pass validation now! CSS, too (except for the border radius stuff which I'm going to ignore).

Thanks for all the help, V. And...just wait for my next question; it's going to be a doozy!

Michael Zimmers
Staff Writer
www.scopedin.com