CSS only partly works

[Ratscallions]

I am uncertain if this is a CSS problem or a HTML problem. As such I can't insert the code, as there would be pages of it, so I will try to explain the problem instead. <snip>

I'm an amateur, so am using tables and frames. iFrames in this case. The left iFrame is the menu for the site. The right iFrame is the main content.

I have two css files. menu_css.css for the menu. And css.css for the main frame. They are identical except for the colours of the text and links. I used coffeecup css generator to create the css files (coz I'm lazy).

The css is working perfectly for the menu.

The css for the main frame is not working properly. The only part of the css that IS working is the links. The rest isn't working.

Help?

[edited by: swa66 at 2:11 am (utc) on Dec. 4, 2008]
[edit reason] keep discussions in the forum please. [/edit]

[londrum]

have you linked to the css file from the page that's inside the iframe?

anything inside an iframe is totally isolated -- it won't be able to read the css file from the main page.

if you've linked to both css files on the same page, then make sure you're linking to them in the correct order. the second one might be overriding some of the settings in the first one.

[Ratscallions]

Yep it's linked properly.

I just got it working (embarassing how that always happens isn't it), but I still have no idea why it didn't work to start with lol.

I suddenly realised that the reason the left menu appeared to be working while the right main page didn't, was because all the text in the left is links. And it was only links working in the main one. So I dug up an old css file that I knew worked (old website) and edited the css from that one to work. Looks the same to me. My brain must be wonky lol.

Thank you for your reply :)

[swa66]

Don't forget specificity.

[Ratscallions]

Sorry?

[swa66]

Specificity is probably best explained here:
[webmasterworld.com...]

Specificity is really an important concept to grasp properly (and I simply cannot explain it in 2 sentences) as it'll lead to surprises every so often till you do get it.

If you have e.g.
#id p {color:green; } /* specificity: 1.0.1 */
.class p {color: red;} /* specificity: 0.1.1 */

then

<div id="id">
 <div class="class">
  <p>green, not red</p>
 </div>
</div>
<div class="class">
 <p>red</p>
</div>

[Ratscallions]

Sorry for being a thickie, but I have no idea what it is .. even after reading that and the links from it lol. What's the aim of it?

As I said in my original post I'm still only using tables and frames. I'd be really interested to learn about divs though ... which part of the forum would I look at to learn that?

[rocknbil]

CSS only partly works

While on this page, in FireFox, click a background area of the offending page and select View Page Info.

Look at Render Mode. If is says Quirks Mode as opposed to Standards Compliance Mode, this is the root of the problem.

The difference is many CSS selectors will fail in Quirks mode. The first step to Standards Compliance is a full valid document type; the next is validating the pages 100%:

[validator.w3.org...]

Get it rendering in Standards Compliance mode, then see what ya' got.

[Ratscallions]

Well that's peculiar. One of the pages says Standards Compliance Mode. Another says Quirks Mode. Lol. Typical me huh!

I think I need to start doing the CSS myself, rather than relying on a generator.

Thank you for that .. I'll have a look at the validator site too :)