Problem with colour of section links

[stormyweather]

I can't seem to change the hover colour of the menu links on the left hand side of my page. The site is hosted at a test location here : http://rantandrage.purpleparasol.com/ .

The vertical menu on the left reads Sale Room, Babies, Girls Clothes etc, and I have see that the CSS is called product_section. So I went to actinic.css and changed the a.product_section:hover code to have an orange background and white text (see below), but it remains brown with orange text.

Why does the background-color and color CSS not take effect? I can change the hover CSS to do all sorts of things and that works - like say putting a pink border on the hover, but changing the text colour to white and the background to orange is being ignored.

a.product_section:hover {
color:#FFFFFF;
background-color:#FF6600;
}

Help.

[stormyweather]

Well, I've answered my own question. Actually "answered" is a little optimistic. Rather, in desperation I did a view source of the HTML web page and found that there is another CSS class dictating the background colour of my hover.

What frustrates me is that I had to find it by doing that. No amount of clicking in the design view indicated to me that the class "indented-link" had anything to do with my hover problem. How was I supposed to find that using just the Actinic interface. This is a mystery to me.

[jont]

They are all there somewhere but can be tricky on some of the more nested layouts and especially lists which often have code in the layout list matrix itself. The quickest solution to find what is styling what is to use Firefox to preview the page and use either the Web Developer or FireBug plug-in and with these active you simply hover over the element and the css in play is shown (you can even edit on the fly to test out changes). This is a God-send when designing and tweaking a web site.

[stormyweather]

You are very wise! I will take that on board for next time.

In the end I really couldn't figure out what on earth was going on so I used the "back to factory settings" button on a number of sections or selectors, or whatever they are called, all around that menu area, then started again. After that, the obvious worked - I was able to change the CSS and have the changes work. Previously I must have screwed up the CSS by doing too many changes both in CSS and in the point and click windows.

Lesson? Well, only do one thing and then take a snapshot, then drink gin. The Firefox plugin is a good tip though, thanks.

[parklifeclothes]

Lesson? Well, only do one thing and then take a snapshot, then drink gin.

Yet another forum member hitting the bottle!!!