CSS Classes not showing in Firefox

[jasonweb]

I needed to change over for divs that were working but were not valid to classes that are showing correctly in Internet Explorer but not Firefox.

1) The first class shows up correctly in both browsers. Here are the two classes;

p.first{
font-family:Arial, Helvetica, sans-serif;
font-size:0.6em;
color:#FFFF33;
font-weight:lighter;}
}

p.second{
font-family:Arial, Helvetica, sans-serif;
font-size:0.6em;
color:#0AB67D;
font-weight:lighter;}
}

They are both the same expect for a colour change so perhaps theres a mistake in the HTML file but thats validating.

2) How do I how the smaller coloured text directly below the link like I had it when I was using DIV's instead? Will I have to make up loads of new DIV's?

3) The stars that should be in front of the links using LI are not showing at all using Internet Explore, can this be resolved?


TankCetra - Who are we
http://www.tankcetra.com/temp/style.css

[speed]

1) You've got an an extra } after each class. Firefox doesn't like bad code much.

2) Sorry, not sure what you mean. It looks like it's in a p tag therefore you can style that.

3) Does fixing 1 fix this by any chance?

[speed]

3) Looks like you need to add some left margin/padding to the list as it seems to go under the main body.

[jasonweb]

Thanks a million speed I never even thought that the stars might be hidden under another layer I thought I'd already resolve that earlier.

Do you know anyway to have the smaller text directly underneath the links? For example;

(Suppliers of Life Support Equipment) directly under Aqua Medic without any space?

[speed]

Play with the top and bottom margins on the p tags that contain that text. Setting the top margin to 0 should move the text hard against the link.

[drummin]

This brings up a question...
Seems that labeling the name as "p.first" doesn't define the <p> within the class of "first".
If you had a <div class="first"><p>Bunch of text.</p></div>, the <p> is still general. You'd need to add the class to any <p>'s as in <p class="first">Bunch of text.</p>

Shouldn't it be labeled as ".first p{whatever} so all <p>'s within the class of "first" would be defined???
Does this make sense?

[speed]

If the CSS is p.first then the HTML is <p class="first"></p>, that is .first is a class of tag <p>

If the CSS is .first p then the HTML is <div class="first"><p></p></div>, that is <p> within a container with class .first applied to it takes this style.

The 2nd applies to all <p> within the container with class first applied, while the 1st allows you to select individual <p> to apply the class to.

Which is right depends on the page structure and the effect you are trying to achieve.

You can get really creative by adding more levels, e.g. #menu li ul .first

[drummin]

As I thought.
Thanks Speed for the clarification!

It seemed to me that jasonweb was not going to get the results he was hoping for with the css naming he was using. He'd have to "class" each <p> instead of styling an area such as main content. This is why I brought it up. I wasn't sure that the css naming he was using would apply as expected.

[speed]

He's after alternating the small text colour, so yes giving all <p> tags a class will do that. However it could be simplified by using a default style for <p> within the area, then only giving the class to alternate rows, therefore:

<div id="Links">
<ul>
<li><a></a><p class="second"></p></li>
<li><a></a><p class="first"></p></li>
</ul>
</div>

Would become:

<div id="Links">
<ul>
<li><a></a><p></p></li>
<li><a></a><p class="alt"></p></li>
</ul>
</div>

Then the style that was .second would become the following and the default style for <p>:

#Links p { }

The style that was .first would become the following, as it would inherit all of the above <p> style one would only need to set the colour colour:

#Links p.alt {}

I think the wrapper div can be removed and the id="Links" applied to <ul> directly, however that may break IE6 so would need testing.