jump to navigation

NOTE: The spam filter is being unusually aggressive. If you comment does not immediately appear, it has simply been placed in moderation and I will approve it as quickly as possible. Thank you for your patience.

"Murphy was an optimist!"

Programming self into corner July 28, 2008 10:52 pm

Posted by Doug McCaughan in : CSS, Programming, Technology
, trackback

With programming, over thinking a problem is a common pitfall. Sleeping on a problem often results in a quick solution for the mere fact that you quit thinking about the issue long enough to see the simpler solution. As we contrive our Rube Goldberg devices to solving programming challenges, we become like plumbers simply adding more pipes to divert the water to the end result. Quickly we paint ourselves into a corner and waste valuable time. I am there right now on what should be some simple css.

If I have a <tr> that has a class <tr class="foo"> and the <td> within the tr has an <a href> how do I style the anchor?

Before anyone jumps on the "Don’t use tables" bandwagon, this is semantically correct because the output is tabular data.

The solution should be tr.foo td a { }. But nothing changes. CSS is not magic; not spooky. CSS is relatively simple, and fun! But hiccups like this drive me to the brink!

Comments after advertisement


1. Barry - July 29, 2008

Don’t embedded classes supercede their parent classes? If I first set up:

a.class1 {color: White;}

gave <a href="" rel="nofollow">, then even if the class assigned to the statement the <a> statement is embedded in says {color: black}, the link color will be white. Right?

2. Barry - July 29, 2008

Hmm… talking about coding in a comment doesn’t work well, does it?

3. Doug McCaughan - July 29, 2008

I did a little editing in the comment and now it looks right. Speaking of right. The solution to my problem to move the import reference. My style sheet read:

.this{ … }
#that { … }
@import (url);

The correct way to do it is to include the imports before any declarations:

@import (url);
.this{ … }
#that { … }

Then the styles work.