Hello everyone, I would be pleased to get your help on something I can't get working correctly with a static website I'm building in CSS & HTML.

The problem is about my CSS, i would like to have my text menu colored in red when we are on the selected page, but for a reason I don't know yet, the text keeps being displayed in grey. I can't find a solution.

Here is the CSS code for that :

 

.current{


font-family:arial;
font-weight:bold;
padding-top:45px;
background-image:url(../images/selected_g.PNG);
background-repeat: no-repeat;
background-position: center;
color:red;  #should display my text in red but doesn't work


}

 

 

It's in french, my mother language, sorry about that... But at least you'll be able to test the menu and see what i mean.

http://users.skynet.be/fa341830/alpha.html

Beside this, if you have any suggestion about the way i coded that, tell me, I'm not a pro at all, I'm learning right now and I'm willing to hear any criticisms which would help me to get better.

I know as well I haven't used HTML5 tags for my HTML, but I'll probably change that, I'm about to learn it as well.

And finally, the webdesign is quite simple but I didn't want it to be too much sophisticated... All was created by me including the little mascot (with Blender).

Hope you'll be able to help me with that menu ! See you soon.

Edited February 13, 201313 yr by Azuk

It's being overridden by a more specific selector. It's hard to explain what I mean, and for the life of me I can't remember the term used to describe this behaviour, but here goes:

.current{
  color:red;
}

Is seen less important than:

#main a{
  color:#666;
}

This is because #main a is a more specific rule. It is the very nature of cascading stylesheets.

 

So to answer your question, this would be a solution:

#main a.current{
  color:red;
}

Wayyy too fast Andy!

Anyhow, to build on what he said: CSS Specificity. Quite a long article but if you're interested in this concept then you could look through it and they also mention about the weighting and hierarchy of CSS specific rules.

Thank to both of you, that's the first time I encouter that kind of issue. You solved it and I've learnt something else with that CSS specificity !

sorry to hijack thread, i cant post a new thread.

 

wanhandbagsjewelry.c o u k

 

my website styles work in chrome but not in ie and firefox?????? any help is much appreciated

Top tip - Don't use ID's as they'll often screw you over down the line somewhere!

Top tip - Don't use ID's as they'll often screw you over down the line somewhere!

Why do you say that? Personally I've never had any problems with IDs

Don't see any point in using IDs other than for JavaScript. Using IDs just leads to issues like the one the thread is about, and also leads to over complicated selectors. Why would you use an ID when you can use a class?

Top tip - Don't use ID's as they'll often screw you over down the line somewhere!

I can see where you're coming from, but I think your stance is a bit OTT.

 

There are certainly times when you've used an id and then want to use it again on the same page, so have to edit the markup and css to a class.

 

However, I think it's still a good idea to use an id in a global sense, like for a nav, then you can have a #nav id and classes for markup within the #nav - and then a different id for say #footernav and use the same classes within that, which will take the global styles from #footernav instead of #nav

sorry to hijack thread, i cant post a new thread.

 

wanhandbagsjewelry.c o u k

 

my website styles work in chrome but not in ie and firefox?????? any help is much appreciated

I ran it through the validator http://validator.w3.org/ and it showed several major errors and gave up validating at a certain point. "Cannot recover after last error. Any further errors will be ignored." Sort these first, then look closely at the css file (there's a validator for that too http://jigsaw.w3.org/css-validator/

Honestly, now I 've read about CSS specificity and I'm aware about that. I have no problem using id. I'll now how to fix that kind of issue If ever I get again that trouble.

 

I've found cool picture on the web called specificitywars with starwars characters to explain it, unfortunately I can't share it as I don't have 25 posts yet .

 

But just google it and you'll find this picture !

Edited February 14, 201313 yr by Azuk

I can see where you're coming from, but I think your stance is a bit OTT.

 

There are certainly times when you've used an id and then want to use it again on the same page, so have to edit the markup and css to a class.

 

However, I think it's still a good idea to use an id in a global sense, like for a nav, then you can have a #nav id and classes for markup within the #nav - and then a different id for say #footernav and use the same classes within that, which will take the global styles from #footernav instead of #nav

 

I've seen many of your quality posts on this forum and know you are far more experienced and advanced than me but I'm really not seeing why you'd use an ID in that example over a class. Perhaps in times before HTML5 but now you'd just use <nav> and <footer>, which are less specific than both and ID and a class.

Don't see any point in using IDs other than for JavaScript. Using IDs just leads to issues like the one the thread is about, and also leads to over complicated selectors. Why would you use an ID when you can use a class?

 

 

The issue in this thread is caused by using a class... IDs take precedence over classes. I also believe that it's more semantic to use IDs than Classes in cases where you know that the use of it's styles will be unique.

 

 

 

I've seen many of your quality posts on this forum and know you are far more experienced and advanced than me but I'm really not seeing why you'd use an ID in that example over a class. Perhaps in times before HTML5 but now you'd just use <nav> and <footer>, which are less specific than both and ID and a class.

 

I think Wickham was just using an example and still many people choose not to use HTML5 tags because of their incompatibility with IE 8 and lower without using a JSfix.

The issue is caused by the ID surely? If he had

.main {
       color:grey;
}

.current {
       color:red;
}

 

That would work and it's less mark up, and avoid the selector build up, i.e #main .current.

 

Also the example above would allow you to use the styles again anywhere else on the page, unlike #main .current which would only work within an ID of #main.

The issue is caused by the ID surely? If he had

.main {
       color:grey;
}

.current {
       color:red;
}

 

That would work and it's less mark up, and avoid the selector build up, i.e #main .current.

 

Also the example above would allow you to use the styles again anywhere else on the page, unlike #main .current which would only work within an ID of #main.

 

I can see your argument but the way I see is that he's already assigned a colour to the text using a more specific CSS selection elsewhere which may be an ID, may be an inline style or may be a chain selection. I try to create my global classes early on to prevent this inconvenience from arising. It's just poor markup/code management which something that he/she will improve on as they gain more experience.

I also believe that it's more semantic to use IDs than Classes in cases where you know that the use of it's styles will be unique.

This, 100% agree. It's almost down to personal preference unless, as previously mentioned, JavaScript comes into play.

 

I ran it through the validator and it showed several major errors and gave up validating at a certain point. "Cannot recover after last error. Any further errors will be ignored." Sort these first, then look closely at the css file (there's a validator for that too...)

It seems in the meanwhile I fixed all the errors, because I've just tested and It says: Congratulations! No Error Found.

 

The issue is caused by the ID surely? If he had

.main {

color:grey;

}

 

.current {

color:red;

}

 

That would work and it's less mark up, and avoid the selector build up, i.e #main .current.

 

Also

the example above would allow you to use the styles again anywhere else

on the page, unlike #main .current which would only work within an ID

of #main.

Thank you, I'll look at this closely once back at home, I'm at least aware of CSS specifity concept now. Which is important. I take in consideraton as well the input of eveyone about that... It's going to help me !

Otherwise, I'm ashamed to ask it but I'm having trouble with my top menu under IE8. I would like to fixe It but I don't know how really to manage this. If you check through IE8 you'll see in my top menu, I have

that kind of selector (the little arrow), It's not displayed correctly, we hardly see this little selector, It's like cut...

 

It doen't prevent from using the menu, but It's not nice esthetically ! Is there a way to have another CSS file for IE8 ? And put a condition in my HTML code such as IF IE8 => load this css..

Does it worth the pain ? Well, In summarize what's the best way to deal with it please..

 

Once again, thank you for all the help brought to me ! I'm grateful for this.

Edited February 16, 201313 yr by Azuk

Yes, you can use a conditional statement to load an IE8-only stylesheet:

 

<!--[if lte IE 8]>
	<link rel="stylesheet" type="text/css" href="ie8andlower.css" />
<![endif]-->

 

This will load a custom stylesheet if the user is using IE8 or lower... just point to your stylesheet in the href.

However, this is not best way to fix this issue... you're better of trying to find out what's causing it to display incorrectly and try to fix it without using a second stylesheet; if I get time today I will take a look for you

Thank you, I'll look how to fix this under IE8 once at home, but I'm afraid of solving the problem under IE8 and then to cause trouble with others browsers. I'm pretty sure, It's something about padding being interpreted differently under IE8, I'm not sure yet.

I've noticed it by checking at my job, where we have to use IE8...

 

I don't know in this case If It's possible to make it compatible with every browser whitout using another CSS... Not yet enough experienced.

You know at the moment I'm most of time doing it like a handyman lol. I just edit and test my code, line by line when It doesn't work, or almost.

 

I'm not yet aware of the differences between all the browsers, I just know some important stuff such as HTML 5 being ok with IE9, PNG transparency not ok under IE6 and etc... Well basics stuff !

 

That's why your inputs are valuable !

Edited February 16, 201313 yr by Azuk