CSS works on index page but not on others

@MintakaDec 15.2010

I have managed to make the navigation rollovers on the right hand side of my index page work, and to turn from blue to black on rollover, but can’t make it work for the other pages, though I can’t see any difference at all in the CSS code.
Can someone please help me spot where I am going wrong with it? I know it is the a: hover property, but as far as i can see, this is the same on the index page as it is on the other pages. Thanks for any help!

~~[URL=”http://www.joekilroy.co.uk”]~~http://www.joekilroy.co.uk[/URL]

to post a comment

CSS

18 Comments(s) _↴

@WizardOfWasDec 15.2010 — #You're using a lot of rubbish css declaration.

Delete:

#wrapper #container #two-columns .col2 .right .content h2 .block li h5 a {

font-family: Verdana, Geneva, sans-serif;

}

#wrapper #container #two-columns .col2 .right .content h2 .block li h5 a {

font-family: Verdana, Geneva, sans-serif;

font-size: 18px;

}

and just use:

h5 a {

font-family: Verdana, Geneva, sans-serif;

font-size: 18px;

color: #09C;

}

h5 a:hover {

color:#000;

}

You also have a redundant closing brace after the css selector below:

#wrapper #container #two-columns .col2 .left .content p {

font-weight: bold;

color: #300;

}

}

Make your life simpler, there is no need to write this:

#wrapper #container #two-columns .col2 .left .content p {

font-weight: bold;

color: #300;

}

When this will work:

#wrapper p {

font-weight: bold;

color: #300;

}

@MintakaauthorDec 15.2010 — #Appreciate you taking the time to look. I changed the CSS as you said, but still the same problem. Rollovers nor working on other pages and now the text goes smaller on the index page when rolled over.

@WizardOfWasDec 15.2010 — #The css is NOTthe same for your other pages. On the index page you have the below in the embedded stylesheet, which does not appear on your other pages.

a:link {color: #333;}

a:hover {

color:#000;

font-weight:bold;

font-size: 14px;

}

a:visited {color: #333;}

a:active {

color: #33F;

}

@WizardOfWasDec 15.2010 — #You need to go through your embedded stylesheet and remove all the redundant selectors plus delete the extra brace I referred to.

It's no wonder its not working as you require, quite frankly its very badly produced.

@MintakaauthorDec 16.2010 — #You need to go through your embedded stylesheet and remove all the redundant selectors plus delete the extra brace I referred to.

It's no wonder its not working as you require, quite frankly its very badly produced.[/QUOTE]

You know, people usually come to help forums because they aren't experts, and need some advice from people, without being told that what they've done is rubbish and badly produced. I think you will find that they already knew this, which is why they asked for help.

I told you I appreciated your help, and you told me the bit of code I needed to change. I went back in and did that, but your advice hasn't solved the problem. The navigation on the other pages has no rollover state change like on the index page.

I am not asking you to do it all for me. I appreciate your time and help, believe me I learn much better when people explain rather than from books and that I would like to be able to do this myself without mistakes.

The first thing is , I don't understand why there are external CSS stylesheets and also an embedded one? Which one has priority?

Also, you can see all the dumb rules I have made in my embedded CSS, like " blue" and "big", and " bigger", this was done because when I tried to change a colour or style attribute manually in Dreamweaver, it asked me " How do you want to apply this rule? To all elements, or to just one element?" Now I thought this was a stupid question, because if I selected a piece of text and tried to colour it blue, using the palette, I just wanted Dreamweaver to do this, without asking me about CSS rules. The designer should be able to click and point and change whatever style elements he wants, without having his head mashed in by questions that only people who know about code can answer. It is not intuitive. So, each time it asked me this question, I chose "Apply to this specific element only", so it would only do what I wanted with that piece of text, and not change everything in my site. Dreamweaver should not sell itself as a program which has 'designer mode' for people who are not coders, if, in fact, they cannot produce a site without having to bend their brains around finicky and tedious bits of code, and when they try to change the colour of just 3 words to green, it changes the whole damn paragraph or page to green.

@WizardOfWasDec 16.2010 — #Trying to produce a webpage WITHOUT knowing some basic html and css plus letting Dreamweaver hold power over you is not going to get you very far.

It's difficult for someone like myself to help when they do go into the code and there is so much redundant and repeatative css it becomes virtually impossible to troubleshoot, unless one strips the whole css out and starts again.

I gave you a solution WHICH works, I tested it myself. Did you insert the css I gave you at the end of the embedded stylesheet so it assumes more importance than that prior to it. I have no idea why it doesn't work for you, I can only do so much to help someone who seems to have so much to learn.

Quite clearly your css on the subsequent pages, which don't act as you would like, is different to that on the index page.

@MintakaauthorDec 16.2010 — #Trying to produce a webpage WITHOUT knowing some basic html and css plus letting Dreamweaver hold power over you is not going to get you very far.

It's difficult for someone like myself to help when they do go into the code and there is so much redundant and repeatative css it becomes virtually impossible to troubleshoot, unless one strips the whole css out and starts again.

I gave you a solution WHICH works, I tested it myself. Did you insert the css I gave you at the end of the embedded stylesheet so it assumes more importance than that prior to it. I have no idea why it doesn't work for you, I can only do so much to help someone who seems to have so much to learn.

Quite clearly your css on the subsequent pages, which don't act as you would like, is different to that on the index page.[/QUOTE]

I think the problem is that the whole thing is such a jumbled mess as you say. It would probably be better to start again. I have taken the drastic solution of copying and pasting the embedded CSS on the index page , into the source code on all pages. The rollovers now work. I suppose you can't make an omelette without breaking eggs, and I guess that unless I overcome my phobia about code, I'll always have the same problems. Thanks again for your time.

@WizardOfWasDec 16.2010 — #I'm pleased you have at least got it working now.

If you can find some time it would be beneficial to become more familiar with the coding environment in Dreamweaver.

Yes, I know its a big leap, because I was once at that stage myself but I can honestly say it is not as confusing as it looks, neither is writing css by hand.

I seriously think one needs to at least get to grips with the basic of both components, html/css. This will open up new possibilities and enhance your confidence to troubleshoot problems and build pages which are solid and act the way you want them to.

Sorry, if I came across a little abrupt, but even with the extent of knowledge that I have built up over the years, it can be a little tiring to have to wade through a lot of messy css code to find an answer.

Good luck and happy web developing.

@MintakaauthorDec 16.2010 — #I'm pleased you have at least got it working now.

If you can find some time it would be beneficial to become more familiar with the coding environment in Dreamweaver.

Yes, I know its a big leap, because I was once at that stage myself but I can honestly say it is not as confusing as it looks, neither is writing css by hand.

I seriously think one needs to at least get to grips with the basic of both components, html/css. This will open up new possibilities and enhance your confidence to troubleshoot problems and build pages which are solid and act the way you want them to.

Sorry, if I came across a little abrupt, but even with the extent of knowledge that I have built up over the years, it can be a little tiring to have to wade through a lot of messy css code to find an answer.

Good luck and happy web developing.[/QUOTE]

Thanks again for your help, I'm an English teacher and believe me, I know all about the tedium of going through the ABC ten times a day. :eek:

I've taken onboard what you said about getting to grips with the coding in Dreamweaver, it would give me a much greater sense of control. Just one last question : Is it really necessary to have separate style sheets if it's all embedded on the index.page HTML? Cheers!

@WizardOfWasDec 16.2010 — #No, it is not necessary to have a linked and an embedded stylesheet on the same page. As long as you don't have any css in one or the other that is needed for the presentation of the site you can delete one or the other BUT I would delete the embedded stylesheet and keep the linked one.

The same linked stylesheet to each page makes it more workflow friendly. Should you need to change the color of the text or background on your webpage etc. you can quickly open and amend it. All changes will then be seen on each of those pages that share the same stylesheet. If you have an embedded stylesheet you will have to open each page and make the amendments. An embedded stylesheet only effects the page into which it is inserted.

Embedded styles are good for the development stage but once the design is approved it's best, in my opinion, to move the css styles to a linked (external) stylesheet.

Embedded styles are useful for occasions where perhaps you want to change something on only one of the pages which is linked to an external stylesheet but not the other pages. If you make sure the embedded style is inserted into the page after the link to the externally linked stylesheet then it will be given preference, canceling the style in the linked one out.

@ManicaiDec 17.2010 — # Is it really necessary to have separate style sheets if it's all embedded on the index.page HTML? Cheers![/QUOTE]

This is an important issue that you have run into here. If you are new to CSS it is imperative that you know the rules of precedence when it comes to CSS. You are an english teacher, but I'm sure you understand basic arithmetic. If this is the case you should be familiar with PEMDAS. This is the order in which math operations are calculated. Well, CSS has similar rules.

There are 3 ways in which you can style certain elements within CSS.
[LIST=1]

[*]Inline

[*]Internal

[*]External

[/LIST]
These are listed in order of precedence.

Inline styles are when you see something like this:



This would change the font size to 14px and would be located within the same element of your HTML code. This will ONLY affect this particular element.

Internal CSS you are familiar with, it is the CSS code embedded within a particular web page. This will ONLY affect this particular web page.

External CSS is the external style sheet that you can link to your HTML page.

So basically, your internal styles override your external styles; and your inline styles will override both internal and external styles.

@MintakaauthorDec 17.2010 — #Hmmm, thank you, in that case it seems simpler than it actually is, because on the one hand you are saying that the external style sheet allows you to make changes to the overall site design, but the embedded one takes precedence by controlling style for individual pages and elements therein. So, now that I have pasted the Embedded CSS for the index.html page into ALL my site pages and it seems to be working well, does this mean that I could now comfortably delete the CSS on the external stylesheets, and paste in the Embedded CSS into the external one, then delete the Embedded style sheet CSS? Sorry if this sounds like utter drivel, I am confusing myself as i speak. :rolleyes:

I'm just wondering if my external CSS is now redundant.

I am slowly trying to streamline my site so it is as 'lean' as it can be, and my next task will be to try to go through all the 25 errors highlighted by my W3 Validation check. Being told what the error is is different from being helped to fix it.

Let me please ask one further question related to the design of my site and how it stands now.

I don't know what has happened, but as you see, all the text on the pages is now double-spaced. I can't see what I would need to change to make it single-spaced. to be honest , I am very wary now of the 'point and click' nature of Dreamweaver and would rather work 'backwards' from the code from now on. Can you point me to the place?

This is quite a challenge for me, not a maths minded person.

Thanks again for your advice.

@WizardOfWasDec 17.2010 — #The answer in reference to the possibility of deleting one or the other of your externally (linked) stylesheet or the embedded css styles is you cannot delete either at this stage as your page is using css from both sources.

You can check this out by removing the link to the externally linked css file from one of your pages and observing the effect it has on the presentation of your site, not good.

Unless you can gather ALL of the css that drives your site together in one place you need them both. The only way to gather ALL the css together is to trawl through it manually, deleting that which is not required. That's why its important to manage your css at the outset because once it becomes a monster out of control cleaning the code up becomes a nightmare, even for a seasoned professional.

As for the double spacing on the site I only see this on the section of text below and that is because you have at the end of each line of text. (I'm viewing in Firefox)

I am an experienced and qualified Cambridge 

CELTA English teacher from the UK. I have 

been teaching English to Russian students in 

Moscow for the past six years and I am now

offering Skype lessons so you can study English<br />
  in the comfort of your own home or office.</p>

@MintakaauthorDec 17.2010 — #Ok, lessons learned for next time then.

thanks for pointing out the code, I have removed it

but that paragraph ( same as the 'About Me' page) is still showing

as double-spaced compared with those underneath.

It's strange. Perhaps beginners can mess things up so thoroughly that

even seasoned professionals can't fix it anymore? :o I tend to have this effect. ?

@WizardOfWasDec 17.2010 — #In your externally (linked) stylesheet you have a redundant bracket after the css selector below. This will stop the css cascade.

.block li a span {font-weight: bold;}

{ /* delete bracket to the left */

.right .block,.right .block li {

border-color: #9999FF;

font-family: Arial;

}

Once you have amended the above add the below css selector to your external stylesheet at the very end.

#wrapper .content p {

margin: 0;

padding: 20px 0 0 0;

line-height: 20px;

}

This will take care of the spacing issue on your 'about' page

@MintakaauthorDec 17.2010 — #In your externally (linked) stylesheet you have a redundant bracket after the css selector below. This will stop the css cascade.

.block li a span {font-weight: bold;}

{ /* delete bracket to the left */

.right .block,.right .block li {

border-color: #9999FF;

font-family: Arial;

}

Once you have amended the above add the below css selector to your external stylesheet at the very end.

#wrapper .content p {

margin: 0;

padding: 20px 0 0 0;

line-height: 20px;

}

This will take care of the spacing issue on your 'about' page[/QUOTE]

Great, it worked a treat. ?

What do you mean by "stop the css cascade?"

@WizardOfWasDec 17.2010 — #Stopping the css cascade means that if there is an error in the css stylesheet any ccs declared after that error is likely not to function as intended or not at all. In other words an error will/can corrupt any following css styles after that error or stop them being applied.

@MintakaauthorDec 18.2010 — #Stopping the css cascade means that if there is an error in the css stylesheet any ccs declared after that error is likely not to function as intended or not at all. In other words an error will/can corrupt any following css styles after that error or stop them being applied.[/QUOTE]

ok, thank you WoW.

Also in #CSS _↴

navigation bar issue propblem with overflow CSS Units Question

Success!

Help @Mintaka spread the word by sharing this article on Twitter...

Tweet This

CSS works on index page but not on others

18 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

CSS works on index page but not on others

18 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

18 Comments(s) _↴

Also in #CSS _↴