Off-color links

HTML & CSS
1
Off Topic:

“off color links” … you wish, Ryan. :slight_smile:

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?

2
Off Topic:

Huh? I don’t get it

Hi, the white color links are set later in the CSS file then the #333 color link and as a result (they have same specificity it looks like) IE6 is using that.

Place that code you have later in the source file (after the #headerlink a stuff)

3

Specificity, that was the word I wanted. I thought it might be something along those lines. IE6 just can’t keep its link colors within their designated classes, it seems… A much easier fix than the last one, thanks.

Off Topic:

Off-color

4

Still don’t get it but whateer lol :). I’m slow with that stuff. Anything non CSS ;).

You’re welcome :slight_smile:

5

Max, just a quick note: In a high resolution (like mine) the header (etc) doesn’t span the full width of the page, yet the search and social network function does, meaning the design looks slightly wonky on that side (as it’s floating out there like an island on it’s own). The footer suffers a similar offset problem! :slight_smile:

6

Mph. What display are you using? Got any ideas on resolving those?

7

I use 1366 x 768 (Wide-screen laptop). My guess (Without looking at the code) is you have absolute positioning on the right hovering element and a fixed width value to the main body of content (overflowing), you would need to either use CSS floats so it’s contained within the content or make the content span 100% width :slight_smile:

8

It’s not going out past 1200px because of hte max-width set on the body

9

You realise that all visited links are being styled here and not just the listcolutilities ones?


[COLOR=#CC00CC]#listcolutilities[/COLOR] a[COLOR=#3333FF]:link[/COLOR], [B]a[COLOR=#3333FF]:visited[/COLOR][/B],

[COLOR=#CC00CC]#listcolutilities2[/COLOR] a[COLOR=#3333FF]:link[/COLOR], [B]a[COLOR=#3333FF]:visited[/COLOR][/B] [COLOR=#66CC66]{[/COLOR]

[COLOR=#000066]color[/COLOR]: [COLOR=#CC00CC]#[COLOR=#993333]333[/COLOR][/COLOR];

[COLOR=#000066]border-bottom[/COLOR]: [COLOR=#993333]none[/COLOR];

[COLOR=#66CC66]}[/COLOR]

It should be of course:


#listcolutilities a:link,[B]#listcolutilities a:visited,[/B]
#listcolutilities2 a:link,[B]#listcolutilities2 a:visited [/B]{
color: #333;
border-bottom: none;
}
10
Off Topic:

I saw that in the beginning I just never got around to mentioning that lol

11

Paul walked me through fixing something like this a few months ago; being the chucklehead I am, I made the same error this time around. :goof: Also fixed the listutilities link, and the searchbox positioning issue, using float:right and a negative top margin. Made those changes (along with getting rid of the social icons – client doesn’t want 'em). It seems to work in a higher display now. What do you guys think?

If this passes muster, I’m just going to center the content and let it be until I get some material from the client to begin putting the whole site together.

12

It seems very stable, I went thorugh and did a minor test on it (not very thourough) but it seems to be a very well built page!

Very nice lookin’ too :slight_smile:

13

Well, thank you, kind sir. I blush, I simper. :smiley: If you or anyone wants to put it through more rigorous testing, please do. I’d like it to be bulletproof!

I actually wonder if the design/color scheme isn’t a bit bland, but I’m going to wait for the client to take a look and give me some input before I go a-tweaking. It will more than likely end up in Website Reviews, where all the guys whose designs I diss can have their revenge. :lol: