Forum Moderators: not2easy
The document has a div 'content'.
Within 'content' is a ul 'zonenav'.
The ul is getting unwanted style from content - even though specified in ul id="zonenav", link size etc are from 'content'.
CSS
#content :link, #content :visited
{
font-size: 12px;
color: #666;
font-weight: bold;
text-decoration: none;
border-bottom: solid 1px #666;
}
#content :hover
{
color: #333;
border-bottom: solid 1px #333;
}
#content :active
{
color: #c00;
border-bottom: solid 1px #c00;
}
ul#zonenav li :link, ul#zonenav li :visited
{
color: #999;
font-weight: bold;
text-decoration: none;
}
ul#zonenav li a:hover
{
color: #666;
}
ul#zonenav li a:active
{
color: #000;
}
ul#zonenav li#current
{
color: #000;
}
HTML (links changed to demo names)
<ul id="zonenav">
<li id="current">one</li>
<li><a href="#">two</a></li>
<li><a href="#">threee</a></li>
<li><a href="#">four</a></li>
<li><a href="#">five</a></li>
</ul>
In your code you have #content :link. It may be that this lack of selector causes the entire style to be ignored...?
Try explicitly adding the a...#content a:link...and see if it works.
Not a solution though. ;-)
I'd posted elsewhere [webmasterworld.com...] on the subject of links - following which I restyled the links to be as posted.
Plus, that ul/li code is identical to two others on the page - both renamed with specific id - and they work fine.
It's clearly something to do with the div within which they're positioned - though I can't see why as specifying at ul/li level should remove any unwanted styling.
If I remove the link style code for that div, it works fine. But that causes other issues.
createErrorMsg: Using the a element selector when defining link styles is not the right way to style links. Links should be styled like this: [dbaron.org...]
ul#zonenav li...
Change that to:
#content ul#zonenav li
Good call. Thanks. With my eyes and brain bleeding from staring at the code and trying to figure **** is wrong, I'd missed that.
Duly corrected - although not the cause - I'd subsequently removed it... and in so doing reduced the effects on Safari and Mac/Moz - which ripples the whole page and applies hover behaviour to id on mouseover if the border is set... and without it the links simply get 12px rather than 11px and otherwise behave.
Plus, the sheet's been validating all week - even with incorrect shorthand.
And...
Change ul#zonenav li to:
#content ul#zonenav li
Tried that too. And also added another div within 'content' into which I put the ul.
Neither worked.
What am I missing here?
Whilst font, font-family, font-weight and line-height inherit, font-size shouldn't.
Cos the W3 say it shouldn't.
[w3.org...]
The computed value is inherited.
More at
[css.maxdesign.com.au...]
from which I quote...
-------
Font-size and inheritance
The font-size property is not directly inherited like other properties. Rather than the entire declaration being inherited, only the calculated value is inherited. This is not obvious when you set an absolute value like 14px, but becomes very obvious when you use relative values such as 80% or .8em. Relative values are calculated before being passed on to the child element only.
For example, if you set a relative font-size on a <div> element, this will only be passed down to the children, not all descendants. So, the <em> and <p> elements directly under the <div> will inherit the calculated size, but the descendants, such as the <strong> element, will not.
Font-size calculation can sometimes have some strange side-effects. For example, if you apply relative font-size of 80% to a <div> element, other nested <div> elements will also inherit the size - which means that they will have a font size of 80% x 80% = 64%.
The solution is to either apply relative font sizing at one level only, or to target specific instances of an element.
-------
;-)
So, whatever W3 says, font-size on links in that list is being got from the 'content' div in which it sits.
I can workaround this simply by setting the font-size and line-height at li level. Size is fine then.
What isn't fine is the behaviour with the #content links having a bottom-border... this causes Safari/Mac Moz to have the link active on invisible areas - the full width of the div not just on the word - and causes a hover effect on any link in #content to apply a border about an inch below the link and ripple the text.
So, meantime I simply turn off that border and simply distinguish #content links with color... not good, though - as padding+bottom-border is better in low-contrast situations.
Removing border-bottom from #content :hover and active links solves the problem.
Leaving it on hover was fine for Safari - but caused Moz to leap around even on pages in which the zonenav list didn't appear.
And leaving it on active was fine for Moz - but caused Safari to leap around and add borders an inch away from the action when the link was active.
All very strange. Probably some oddity in my code - though it all validates.
Who even cares. I'm off to find my life. Next week I'm getting a copy of frontpage and going back to tagsoup.
