“off color links” … you wish, Ryan.
Went a different direction on this mockup and am (moderately) pleased with the result – for one, the navbar doesn’t break the scheme in IE anymore.
But this is too weird. In IE6, the top three sidebar links are white instead of their designated color. Here’s the CSS:
#listcolutilities { padding-top: .5em;}
#listcolutilities a:link, a:visited,
#listcolutilities2 a:link, a:visited {
color: #333;
border-bottom: none;
}
#listcolutilities a:hover,
#listcolutilities2 a:hover {
background-color: #f7f7f7;
color: #26466D;
border-bottom: none;
}
#listcolutilities li,
#listcolutilities2 li {
font-size: 1em;
padding: .25em;
list-style-type: none;
}
and here’s the pertinent HTML:
[highlight=“HTML 4.01 Strict”]<div id=‘font_change’>
<ul id=“listcolutilities”>
<li><img src=“images/icons/font_add.png” alt=“Increase Text Size”><a href=“#” id=‘large’> Increase Text Size</a></li>
<li><img src=“images/icons/font_delete.png” alt=“Decrease Text Size”><a href=“#” id=‘small’> Decrease Text Size</a></li>
</ul>
</div>
<ul id=“listcolutilities2”>
<li><img src=“images/icons/printer.png” alt=“Print this page”><a href=“#” title=“Print this page” onClick=" window.print(); return false"> Print this page</a></li>
<li><img src=“images/icons/sitemap_color.png” alt=“Sitemap”><a href=“sitemap.html” title=“Sitemap”> Sitemap</a></li>
</ul>
(I created the listcolutilities2 designation so I could use separate IDs instead of the original "listcolutilities" classes, thinking it might be an issue with the original class being superseded by link classes later on in the CSS. Haven't changed it back, and it didn't seem to make a difference.)
The only difference I can see is the placeholder links: `<a href="#">` Changing them to actual URLs, such as `foobar.com`, solves the problem. However, I can't change the # placeholders in these three, because they don't actually go anywhere, but trigger behaviors -- increasing font size, decreasing font size, and printing.
And just for more fun, inserting a `!important` in this line:
```css
color: #333;
“fixes” the problem, but also forces a color change in the first row of links in the footer.
To quote Stomme, I be confuzled. Why would a # placeholder link send IE into a snit? And how can I fix it?