Hi,

 I created a class in the advanced template modification section (the local .css page) that is to apply to a controlled jump called a resource. My class specifies that they be a particular shade of orange and that there is no text decoration. I marked up the items I want to reflect his using a <span class=...> argument in the html. Why does it work sometimes and not others even when the code looks good. Is there a special trick I need to know about local files?

 

Thx, M
 

The CSS editor on the advanced section of the theme builder should override any of the course layout and styling.  Can you post the class, a snippet of the HTML where the class works and a snippet of where it's not working?  That will give us a much better idea what's wrong and what to do to fix it.

This is what is in the CSS

body {
background:#FFF url(content_bg.gif) 0 99px repeat-x;
}

.nav {
background:#FFF url(nav_bg.gif) repeat-x;
}

.infoBar {
background:#FFF url(infobar_bg.gif);
}

.resource {
color:#FF6500;
background-color:ffffff;
text-decoration:none;
}



This is what doesn't work

Because pregnancy is not the result of a physiological disorder, it is not an impairment. Complications resulting from pregnancy, however, may be impairments.
<br>
<br>
<br>
<br>
<h3>
<span class="resource">
<a href="http://www.adaptiveenvironments.org/neada/documents/tam1wadd.html#pregnancy" title="Pregnancy reference" target="_blank">
Technical Assistance
</a>
</span>
</h3>

This one does work

<a target="_blank" title="Who must comply with Title 1 of the ADA reference" href="http://www.adaptiveenvironments.org/neada/documents/tam1wadd.html#comply"><span class="resource"><h3><hr>Title I Technical Assistance Manual<br></h3></span></a><br>

 

Thanks for anything you can tell me... 

Hi,

I think that I understand the problem, CSS and HTML are hierarchical structures with the bottom most element in the hierarchy or cascade having the most importance.  For instance in a CSS file if you set a class to have a red background and then farther down in the document you set again it with a blue background, your class is going to have a blue background.  In an HTML file the styles of a span inside an p tag over ride the styles of the p tag.

In your first example you have the span outside the a tag, so because the a tag is farther down the hierarchy of the HTML and it's styles over ride those of the span.  The second example works because the span is inside the a tag so the styles of the span over ride the styles of the a tag.

However there's an even easier solution, simply put the class on the a tag itself.  And if you always want the resource links to be bold and larger you don't need an H3 tag you can just put those styles into the class.

so your class goes from:

.resource {
color:#FF6500;
background-color:ffffff;
text-decoration:none;
}

to:

a.resource {
color:#FF6500 !important;
background-color:#ffffff !important;
font-size: 16px !important;
font-weight: bold !important;
text-decoration:none !important;
}

Your HTML goes from:

<h3>
<span class="resource">
<a href="http://www.adaptiveenvironments.org/neada/documents/tam1wadd.html#pregnancy" title="Pregnancy reference" target="_blank">
Technical Assistance
</a>
</span>
</h3>

to:

<a href="http://www.adaptiveenvironments.org/neada/documents/tam1wadd.html#pregnancy" title="Pregnancy reference" target="_blank" class="resource">
Technical Assistance
</a>

So as you can see that should drastically simplify your HTML since you no longer need the span or h3 tags in there.  Let the CSS do the styling work for you.  Two things to note, first make sure your class is in your CSS as "a.resource" not just ".resource" so that you're specifically targeting a tags with the resource class.  The second is I've added "!important" after the CSS class attributes, this makes certain that Firefox and IE7 absolutely positively follow these attributes.  I hope this has been helpful.
 

Excellent! thank you.That makes so much sense. It will simplify my work greatly.