Forum Moderators: not2easy
In my site, the body tag of each page distinguishes which part of the site it belongs to. For example <body id="news" class="listitem5"> would refer to the 5th page in the news section of the site.
I use CSS to format my menus, so that - if a surfer was viewing a page within the "news" section of the site, then the "news" link at the side of my page would be highlighted.
A typical CSS entry might be:
#news #news a, #news #news a:hover,
{
color:#000000;
padding:4px 5px 4px 5px;
margin-top:0px;
margin-bottom:0px;
border-top: solid 1px #000000;
border-left: solid 1px #000000;
border-right: solid 1px #000000;
background-color:#5151FF;
}
[and a similar version for .listitem5 #listitem5 a; which I won't reproduce in full right now]
This used to work fine in most (possibly all) browsers, but in IE8, does not work at all. Is there any way I can slightly modify the CSS code so that it works in IE8 too?
Your CSS (might be a cut and paste error) has a syntax error in it ...
Make sure your CSS validates. [jigsaw.w3.org...]
The other is "#news #news a, #news #news a:hover" might just as well be #news #news a" unless you need to override another hover effect.
The next is that your html is likely having validation problems as well an id is only allowed at most one tie in a html file and #news #news to match anything would mean there are two nested elements with that same id.
[validator.w3.org...]
Ie8 is stricter in what it accepts, so make sure it validates.
I do need the hover effect overrided, as you correctly realised. Can you just clarify what the syntax error that might have been a cut and paste error is? I just want to check I'm sgetting your meaning fully
From what you say, the double id tag is most likely the source of the problems - I shall have to validate HTML later. The first id tag is in the body (<body id="news" class="listitem5"> ) and the second one is in the relevant link (<a href="news.html" id="body">)
Would it work if I was to have two class tags on a page e.g. (<body class="news listitem5"> , and changing the link tags to be class="news" instead of id?
Plus I put the wrong code for my links in -the 'a' tag is not as i put it above
instead my list is formatted as (for example)
<li id="news"><a href="news.html" class="sidelink" >News</a></li>
so I suppose I'll have to change the body tag to (<body id="news" class="listitem5"> and the list to
<li><a href="news.html" class="sidelink news" >News</a></li>
The "listitem5" tag is used for a separate menu elsewhere. The "sidelink" class is used to format the entire menu bar
Hope that makes sense. I'm never too sure how to explain these things to other people - most of the time I just do it! :)
#news #news a, #news #news a:hover,
{
As for the classes and ids: you're on the right track on knowing when to use a id and when to use a class, but I fear you might be overusing classes and ids.
Go easy on them e.g. if you have <ul> used as a menu, there most often is no need whatsoever to have every <a> of the menu have the same class, add a class or id on the <ul> and select the <a> using the parent's class ...
Embarassingly, it was the trailing comma that was causing the problem
I take your point about overuse of class and li. I don't really have time to rewrite stuff right now, but I'll definitely try to simplify things when I next rewrite
