View Full Version : Grrr... Mysterious Link States and Browser Buttons

10-25-2007, 12:49 PM
Hi All,

I'm putting together a website for my company and am doing reasonably well at the moment (please don't slaughter me for not using more css, i'm just not familiar enough and have had sooo many problems x-browser :) )

The Problem:

I have defined my link states using the LVHA rule and everything seems to work fine....

until I click the 'back button' in IE (I'm using IE7)

... then for some reason i can't fathom one of the links on the page displays as an active state.

... also, when i check in firefox, the link also displays as an active state when you click the back button - but only so long as the mouse cursor stays over the back button at the top of the browser!

I'm totally stumped, it would be awesome if anybody could help out!

for your ref you can see the development site in question at :


the links I am talking about are the two green ones under 'Steelhenge Press'


10-25-2007, 01:10 PM
Target: http://ccgi.dcockram.force9.co.uk/ne...hp?page=link01
I/O Error: http://ccgi.dcockram.force9.co.uk/ne...hp?page=link01: Not Found

This is the error from W3 validator.

There are also HTML errors.

Maybe this is your problem.


10-25-2007, 01:33 PM
he effpeetee,

i wasn't able to replicate the error you mention regarding the link on the w3 validator - i put the site through see here (http://validator.w3.org/check?uri=http%3A%2F%2Fccgi.dcockram.force9.co.uk%2Fnewstest.php%3Fpage%3Dlink01&charset=%28detect+automatically%29&doctype=Inline&ss=1&outline=1&group=0&No200=1) put it only tells me about the html errors.

I was hoping someone might be able to suggest how i might fix the problem? I'm well out of my area of understanding when it comes to doctype's etc.. and there are only a couple of html errors?

Many thanks all,


10-25-2007, 02:24 PM

I have now ammended the code so that it passes the w3 validator for html.

the css also passes validation (apart from from png hack for ie5/6)

But still the problem persists!

Also, now, after slightly changing the code for the two green links, mozilla no longer uses the bullet image i have specified (see page in IE7) on rollover..?


10-25-2007, 03:08 PM
I have to admit that I don't know quite what your problem is.
Both of the hyperlinks seem to work normally for me, although they seem to go nowhere.

As you have it at present, they just seem to reload the same page.
Perhaps that is your trouble.

Can't you give them a dummy page to go to?

Can you explain again what you expect them to do? I'm probably missing something.


EDIT:You may find this program useful.


You can alter the css while you watch the response in IE and FFox.

10-25-2007, 04:08 PM
Hi Frank,

thanks for having a look, hopefully the following info will help:

The page was set up to test a php requireonce (hence: page=link01 at the end of the url) function that i have added to the links, which seems to be working ok.

My apologies that the links don't seem to be going anywhere, that's my fault as I haven't made the difference very clear at all.

As you click the two green links on the left, you will notice that the small grey content on the right changes:

from link01 content here
to link02 content here

What the links are doing is reloading the page with either the link01 file or the link02 file in the content area on the right hand side.

By all accounts this is working satisfactorily and I am happy.

While I was testing I noticed a strange behaviour that i had never seen before and was wondering if anybody on these forums had an idea.

Lets say you follow the link to the page click the link here (http://ccgi.dcockram.force9.co.uk/newstest2.php?page=link01)

It loads the newstest2.php page with the link01 page content in the right hand side. All ok so far.

Now, click the green links on the left a couple of times and you will see that they successfully change the content on the right. All good so far.

You will also notice that, as planned, the links roll over and become grey, with a nice blue arrow appearing to the left. Still ok.

When you move the mouse away from the link it returns to its normal (green) state. Still ok.

Now click the back button on the browser -

for some reason i can't fathom, one of the links now appears in it's 'hover' state instead of it's 'link' state. This is what I can't work out!

even more bizarrely, try the same process in mozilla. Click the back button, release it and leave your mouse pointer over the back button - you will see that as the page goes 'back' the same problem occurs. Now, just move your mouse pointer off the back button and watch as it returns to its 'link' state.??

Now I'm totally confused.

Ultimately it's not a deal-breaker, but i do like to try and understand why things happen and it will drive me mad not to find out, so if you have any ideas at all please please let me know!



10-25-2007, 06:29 PM
Ultimately it's not a deal-breaker, but i do like to try and understand why things happen and it will drive me mad not to find out, so if you have any ideas at all please please let me know!What’s happening is that the browsers are preserving the page state. When you press the back button, the state of the page as it was when you left it is restored. This is essentially the same thing that occurs when you type into a form field, go to a new page, and then press back button to find that your information is still in the form field: the page state has been saved for your convenience.

The reason that the text is gray in Internet Explorer is because Internet Explorer is preserving the active state; in the active state, CSS declarations associated with the active pseudo‐class (see a.news_lefttitle:active) are applied. Note that, according to the CSS2.1 specification, the active state is achieved when an element is being activated (e.g., “between the times the user presses the mouse button and releases it”), so you might call this a bug in that browser. Firefox and Internet Explorer both exhibit a quirk where if you click and drag the cursor off of the hyperlinks, the active state gets preserved even when you navigate away and back to the page; this might be considered a bug in both of those browsers.

The dotted outline that you also see preserved is part of the focus state; the focus state is when an element accepts keyboard input. (The keyboard input in this case is the Enter key.) Some browsers, like Firefox and Internet Explorer, activate this state when you simply click or click and drag the cursor off of the hyperlink. (Personally, I think this makes no sense compared to approaches like that of Opera where you only get the focus state when you navigate to the hyperlinks via keyboard.)

Anyway, to address these issues, if you consider them such, you might try not setting styles for the active state at all (requires the least code) or ensure that the styles for the active state are the same as the unvisited link and/or visited link states instead of the hover state. To get rid of the focus outline, you can use a .news_lefttitle:focus { outline: none; } CSS rule, though this won’t work in Internet Explorer since it supports neither the CSS2+ focus pseudo‐class nor the CSS2+ outline property. You can clear the outline in Internet Explorer by removing the focus via scripting, but this is bad for usability, so I wouldn’t recommend it.

By the way, I didn’t notice any association between holding the mouse over the back button and preservation of the page state. I also didn’t see the blue arrow you were talking about in Firefox. I used Firefox 2 and Internet Explorer 7 when testing.

10-25-2007, 06:47 PM
Dear both,

many thanks indeed for your time and effort in helping me understand and resolve this query, I appreciate it a great deal :)

unfortunately I have to leave the office now (they lock us in otherwise :) ) so i won't be abe to have another look at the pages till next week - rest assured I will endeavour to implement your comments and hopefully things will turn out great!

it's been a while since I was involved in webdev - i remember some years ago that x-browser compatability was an issue, it seems to be worse now than it ever was! Still, it seems that things are slowly working towards some kind of compliance so hopefully we won't have to suffer these problems for too many more years.....

btw arbitrator... i can't work out why the blue arrows don't appear in firefox either! fortunately the standard bullets it puts in instead still look quite nice so i think i'll just leave that one for another day!

thanks again guys, i'll try and pop up a link for the site when it's done in case anybody is interested.

Best Regards,