ansaurus

Question

code for highlighting current page with CSS not working on IE

Answer 1

+1 A:

could it be this selector?:

.navigation a:link {color: #FFFF00; text-decoration:none;}

Honestly, I never used it. If you simply have static pages, best approach is to add a class .current to the page you're on and you're done.

Claudiu 2010-10-23 15:29:41

Hi Claudiu, sounds good but how can i implement the class '.current' ? using scripting? would not each page need to have this class and hence cancelling out the effect?

Baba 2010-10-23 15:39:17

What scripting language? I tought you have static pages. Do you use PHP?

Claudiu 2010-10-23 15:40:39

Hi Claudiu, i see what you mean now. my list of <li>'s would only have one id per html page. David fixed my code but i will certainly give yours a try as well. thanks for your answer

Baba 2010-10-23 16:03:39

No worries, anytime. David made some good suggestions there

Claudiu 2010-10-23 16:05:44

Answer 2

+2 A:

There are several problems:

You can't have two elements with the same id in a document, so most of your selectors will never match anything in a valid HTML document (and invalid documents invite error recovery in different ways by different browsers)
The current link and all :visited links are black, so how would you tell the difference?
#acontact should be a#contact (except for the duplicate ID issue mentioned above)

David Dorward 2010-10-23 15:42:30

Hi David, thanks for that. The problem was 'a:visited' ; this caused no issue in Firefox but only by fixing that and giving it the same color as a:link it also worked in IE. thanks again!

Baba 2010-10-23 16:00:47

Answer 3

A:

You'd do something like this:

body.homepage a.homepage {
    color:red;
}

For each of those links in your navigation.

That said, I'd append a "active" class via server-side code to the currently active link element's class name instead -> less verbose CSS.

DanMan 2010-10-23 15:43:09

`:active` has a specific meaning in CSS, so `.active` is a fairly confusing name. `.current` is usually a better bet.

David Dorward 2010-10-23 15:54:55

Answer 4

A:

You don't have anything with a navigation class so the selectors at the top are not contributing anything to the page style and you are duplicating IDs. Either change the IDs to classes or rename the IDs on the body to something else like gallerypage, biographypage, etc.

Given that you are specifically calling out IE, you may find you have difficulty if you are changing the id of the body tag on the body tag at runtime with Javascript. IE can have difficulty recognizing style changes to child elements when you change the class on a parent element. Changing something about the child elements will force IE to recognize the change. You could, for instance add, a dummy class to all the elements that would be affected.

If you are going that far then you might want to just add a .current style and add the class to the relevant link. Of course you will need to remove the current class from all the other navigation links.

You also might want to change the style to something more obvious, like turning on a border, to aid in debugging since there are other problems with your styles and just turning the colour black is likely to be unnoticeable (especially if you get your .navigation rules to work).

lambacck 2010-10-23 15:49:38

Answer 5

A:

A technique like this should definitely work in all browsers. However, as you've already been told, you can't have the same ID twice in the same page.

The way around this is simple: Just use similar IDs on the body and menus, rather than identical ones. There's nothing in the technique that requires the IDs to be identical.

Spudley 2010-10-23 15:55:13

ansaurus

tags:

views:

answers:

code for highlighting current page with CSS not working on IE

related questions