My family has three personal websites under the account avnertheeccentric.com. The other two are juliegoell.com and zeveisenberg.com. I created a 404 page here: http://www.avnertheeccentric.com/errors/404.html. It needs to serve all three sites, so I created three divs with each site's error message and links back to the site. I assigned an id to each div (left, right, center), and styled each id to match its respective site's colors and styles. The problem is with the links. I've styled the links thusly (for example): #left a:hover, a:active {blah;}. They're different for each one, but the link styling doesn't work. It shows the wrong colors for some of the links, but all the "hover" states work correctly. The page functions perfectly in Opera and IE5/Mac (yeah, the obsolete one), but it breaks in FireFox 2 and even more in Safari 3 beta. My code validates. What's wrong?
I don't see any problems. What did you think was wrong. Works fine in FireFox. Your CSS does not seem to have anything in it that would be a problem.
Well, it seems to be working now in FireFox for reasons unknown—I haven't changed anything. It's still broken in Safari, however. Here's a screenshot (http://www.zeveisenberg.com/notworking.png) of the page not working in Safari and working in FireFox and Opera. I just checked on Safari 2 (latest stable release) and it's broken the same way.
What's weird is the way Safari is coloring the links. It's doing the first two links of the first two divs orange, and the third link normal. All the a:hover, a:active styling works perfectly across the board. I've reported this to Apple.
iGeek,
I duplicated this accidentally I think. When I first pulled the page, it looked like the two examples in the image you posted. While I was there, I went to both the left and center sites. When I reloaded the 404 page, it looked like the single page that you are thinking contains the error.
Is this an issue where in one of the browsers you've visited the sites and in the other two, you haven't?
Scott
Great Scott, I think you're on to something, by Jove! If I clear my Safari history and cache (even Safari beta), the links work. If I go to AvnerTheEccentric, then go back to the 404 page, the first two links in the first div go orange. Strangely, the third link doesn't. Is it because it's a mailto? I don't have time to test it now. Anyway, if I go to the second page, then back, the second div's first two links go orange. The last one is always unaffected. Maybe I'll try switching the orders.
So yes, it's the same problem in all those browsers. I thought it was Safari only because that's my default browser so I had a populated history. OK, problem established. Now what? Is there a workaround? DreamWeaver's browser check and w3c check show perfect code.
Yep I am seeing the behavior now. :) Since it is the mailto link you may creating a class for those three and setting the mailto class to those perspective classes.
Except that Mailto: is the only one that's behaving correctly. I just confirmed, by the way, that the same problem occurs on IE7/Vista. So why are the non-mailto: links picking up the a:link styling (and no other styling) from the #right id's child selectors? Weird, no?