PDA

View Full Version : IE not registering a:hover



yonni
Nov 12th, 2006, 10:29 PM
Internet explorer does not register a:hover in css unless the <a> tag's href carries a value. i.e:

<a href="">
will be affected by a:hover, whereas:

<a onclick="">
will not.

Here's my problem, my site is navigated via AJAX, and therefore, to load each page, a javascript function needs to be called by the "onclick=" mothod. However, I want to change the style of each link on hover (by using a:hover{}). As I have just explained, IE does not use a:hover unless there is a href value for the link. There are two reasons why I do not want my links to have href values:
1) I don't want to, I want the link to purely call the js function.
2) If the links have an href value, then this messes with the js function for loading the pages via AJAX:

<a class="navi" onclick="load_document('lastentry.php');">Latest Entry</a>
works fine (and looks fine in ff and opera), but does not change style with a:hover in IE, whereas:

<a class="navi" onclick="load_document('me.php');" href="">About Me</a>
Doesn't work in any browser (that I have tested) it just reloads the home page. However, the styling is fine.

So, basically what I ideally want is a way for IE to register a:hover when there is no href value, however any other suggestions are also welcome.

mark87
Nov 12th, 2006, 10:59 PM
<a class="navi" href="#" onclick="load_document('lastentry.php');">Latest Entry</a>

Or even better:

<a class="navi" href="lastentry.php" onclick="load_document('lastentry.php'); return false">Latest Entry</a>

That way users without Javascript can still see your page. :)

yonni
Nov 13th, 2006, 07:31 AM
cheers, but I'm working on the assumption that the user has an AJAX-enabled browser, otherwize they do not see the page navigation structure.

yonni
Nov 13th, 2006, 07:33 AM
Thanks, but JS and AJAX are essential for proper viewing of this site, and as of yet I have not found someone not using an AJAX-enabled browser (if you're bothered enough to change browser, why would you change to something with LESS features/compatability?)

Bill Posters
Nov 13th, 2006, 08:10 AM
Thanks, but JS and AJAX are essential for proper viewing of this site, and as of yet I have not found someone not using an AJAX-enabled browser (if you're bothered enough to change browser, why would you change to something with LESS features/compatability?)
It seems that you haven't consider the existence of browsers beyond the usual IE, FF, etc… variety or users which may be using alternative browsers for good, and perhaps unavoidable, reasons.
The failure to consider non-js users is exactly the kind of attitude that gives AJAX such a bad name in some quarters.

Not all browsers are created equal and not every user is using a non-js browser because they choose to do so.

Can I ask what the site content is that that those without js-enabled browsers won't have an interest and won't want access?
(It may be so, I'm just curious to know.)

mark87
Nov 13th, 2006, 10:48 AM
Well the last stats I read said about 10% have JS disabled. As I said though, using href="#" will work just fine. :)

Bill Posters
Nov 13th, 2006, 11:08 AM
Well the last stats I read said about 10% have JS disabled. As I said though, using href="#" will work just fine. :)

…though it's still worth adding the return false to the onclick event as you've done in your second code example above (but not the first). :)

mark87
Nov 13th, 2006, 12:55 PM
Good point. ;)

Also yonni, here's a fairly good idea which I use if you do wish to only make your site accesible to Javascript-enabled users...

<a class="navi" href="requirements.html" onclick="load_document('lastentry.php'); return false">Latest Entry</a>

In requirements.html you could have a page detailing how they can view your site. For Javascript-enabled users it just runs the load_document function and they don't see requirements.html. :)

yonni
Nov 13th, 2006, 06:38 PM
It is a blog that I am making using php/mysql, everyone I know used ff or IE other than one of my brothers who uses opera (which this site is also compatable with). By everyone I know, this includes people I know physically and over the internet (not including people where the subject hasn't come up).

Bill_Posters, you mentioned that someone might be using a non-js browser for unavoidable reasons, can you give an example?

_Aerospace_Eng_
Nov 13th, 2006, 08:44 PM
I browse around without JS enabled by default mainly because of unsightly ads and popups. JS can be malicious in the wrong hands.

felgall
Nov 13th, 2006, 09:00 PM
You should only use <a> around your link if the tag has an href attribute. If it doesn't have a href then you should use <span> instead.

yonni
Nov 13th, 2006, 10:43 PM
You should only use <a> around your link if the tag has an href attribute. If it doesn't have a href then you should use <span> instead.

Does span:hover work therefore?

felgall
Nov 14th, 2006, 03:36 AM
It does in IE7 and it does in IE6 and earlier if you add a few lines of Javascript to make it work for spans.

yonni
Nov 14th, 2006, 07:57 AM
Thanks guys, I did know that this was possible using JS, I was just wondering if there was any CSS alternative (as CSS takes less time/effort to impliment). Thanks anyway, looks like I'll be using JS.

Bill Posters
Nov 14th, 2006, 08:18 AM
Bill_Posters, you mentioned that someone might be using a non-js browser for unavoidable reasons, can you give an example?

Some forms of assistive technology (AT) UAs don't support js well or at all.
Users of such UAs are often very limited in the range of UAs available to them and are 'stuck' using a UA which best addresses their specific usability and accessible.

Similarly, many mobile internet devices don't support js well or at all.
Such devices tend to come with a browser pre-installed with little option to upgrade to better alternatives.

Add to this the number who have js-enabled UAs, but browse with js disabled. The figure for this group often varies depending on source, but it's typically high enough to count as significant.


In the first instance, users of AT are offered some level of protection against sites which fail to take reasonable steps to ensure the accessibility of critical content for those users. Of course, it depends largely on the legal jurisdiction under which your own site falls, but even in the absence of a legal imperative, there is still a reasonable argument to be made in favour of authors making sites as accessible as practically possible by choice.
Users of AT and mobile devices are just as likely to be interested in your content as someone using a more commonplace, desktop, GUI-based browser (FF, IE, etc…).
There seems nothing in the content which suggests that you'd actively prefer such users not to visit your site.

By failing to account for non-js users, you are actively neglecting a body of users whom use internet browsers and devices which don't meet the needless technological requirements set by your site.
By building your ajax-oriented site more wisely, you could make sure that it stays usable to users regardless of whether their browser of need or browser of choice supports js or not.

Best practice would be to build the site with js disabled (though with ajax in mind) and then overlay the js to enable the ajax processes.
This can ensure a good level of degradability, leaving the links, etc… accessible and usable to those without js.

Of course, if it's just your blog, then (with all respect) you're unlikely to be robbing people of some important content either way. it's not an important public service. However, if you're interested in learning about best practice, rather than simply showing off that you know about the latest, 'cool' buzzwords, then there are better ways to go about things.

A fair bit has been written about the accessibility issues surrounding inconsiderately-implemented ajax.
Have a read and see if any of it can convince you to rethink your approach.

Hijax (http://domscripting.com/blog/display/41)
Hijax: Progressive Enhancement with Ajax (http://domscripting.com/presentations/xtech2006/)
Hijax: Graceful Degration (http://ajaxian.com/archives/hijax-graceful-degration)
Ajax, Hijax and accessibility (http://www.brucelawson.co.uk/index.php/2006/ajax-hijax-and-accessibility/)
Google: ajax accessibility (http://www.google.com/search?q=ajax+accessibility)

:)

Bill Posters
Nov 14th, 2006, 08:28 AM
I browse around without JS enabled by default mainly because of unsightly ads and popups. JS can be malicious in the wrong hands.

I browse with js enabled and don't suffer under any significant weight of unsightly ads or popups.
Similarly, I don't recall encountering a site which has implemented js maliciously in a way which my browser has not been able to kill stone dead ahead of execution.

Js (and other) controls in modern browsers are now sufficiently intelligent to counter ads and popups without nobbling other js-based features which may prove useful.
In short, disabling js to avoid ads and popups is an unnecessarily drastic measure.

(I'm assuming that you're using a typical desktop UA such as FF, IE, etc…)

yonni
Nov 14th, 2006, 11:57 AM
Some forms of assistive technology (AT) UAs don't support js well or at all.
Users of such UAs are often very limited in the range of UAs available to them and are 'stuck' using a UA which best addresses their specific usability and accessible.

Similarly, many mobile internet devices don't support js well or at all.
Such devices tend to come with a browser pre-installed with little option to upgrade to better alternatives.

Add to this the number who have js-enabled UAs, but browse with js disabled. The figure for this group often varies depending on source, but it's typically high enough to count as significant.


In the first instance, users of AT are offered some level of protection against sites which fail to take reasonable steps to ensure the accessibility of critical content for those users. Of course, it depends largely on the legal jurisdiction under which your own site falls, but even in the absence of a legal imperative, there is still a reasonable argument to be made in favour of authors making sites as accessible as practically possible by choice.
Users of AT and mobile devices are just as likely to be interested in your content as someone using a more commonplace, desktop, GUI-based browser (FF, IE, etc…).
There seems nothing in the content which suggests that you'd actively prefer such users not to visit your site.

By failing to account for non-js users, you are actively neglecting a body of users whom use internet browsers and devices which don't meet the needless technological requirements set by your site.
By building your ajax-oriented site more wisely, you could make sure that it stays usable to users regardless of whether their browser of need or browser of choice supports js or not.

Best practice would be to build the site with js disabled (though with ajax in mind) and then overlay the js to enable the ajax processes.
This can ensure a good level of degradability, leaving the links, etc… accessible and usable to those without js.

Of course, if it's just your blog, then (with all respect) you're unlikely to be robbing people of some important content either way. it's not an important public service. However, if you're interested in learning about best practice, rather than simply showing off that you know about the latest, 'cool' buzzwords, then there are better ways to go about things.

A fair bit has been written about the accessibility issues surrounding inconsiderately-implemented ajax.
Have a read and see if any of it can convince you to rethink your approach.

Hijax (http://domscripting.com/blog/display/41)
Hijax: Progressive Enhancement with Ajax (http://domscripting.com/presentations/xtech2006/)
Hijax: Graceful Degration (http://ajaxian.com/archives/hijax-graceful-degration)
Ajax, Hijax and accessibility (http://www.brucelawson.co.uk/index.php/2006/ajax-hijax-and-accessibility/)
Google: ajax accessibility (http://www.google.com/search?q=ajax+accessibility)

:)

Ok, you do make some fair points here, and I do aknowledge them. This debate would be relevant for a large-scale project or service project such as a government/council based website or something else with a large and varied target audience. However, my target audience is small and relatively specific, a large proportion of which probably does not even know what javascript is, let alone how to disable it or why one would like to.

So in general, you are right. But for this purpose (mainly, I must say, to aid my own learning) I would rather stay with the system I have.

Bill Posters
Nov 14th, 2006, 12:40 PM
So in general, you are right. But for this purpose (mainly, I must say, to aid my own learning) I would rather stay with the system I have.

Fair enough.

You might consider learning the 'right' way right from the start, though.
It's preferable to learning the less than ideal way and then relearning the right way later.
Knowing and using best practice is something which can help with every site you build, big or small.

Whilst there's no real reason that you'd want to actively exclude those without js from your blog, if you knew how to develop with progressive enhancement in mind, then you could simply scale the principles for each project.

Best practice isn't really about knowing when you don't need to use best practice. Similarly, accessibility isn't about large sites versus small sites. It's about knowing your craft well enough that you use it every time (without it impacting negatively on the time it takes you to build a site).
Good practice should ideally be first nature, rather than an option.
By taking the time to learn and understand principles such as progressive enhancement, you become a better developer, and that's something which pays dividends on everything you do, big or small.

My advice, take the time to learn to do it right, rather than going straight for the 'cool' things.
Of course, if you're only ever going to be designing and building your own blog, then it doesn't really matter. But if you want to develop skills which you can then provide and demonstrate to other people and other sites, you're better off learning how to do things well, right from the start and have a site which you can truly be proud of.

Anyway, enough from me.

:)

yonni
Nov 14th, 2006, 06:53 PM
I hear what you're saying about learning it right, but I have experience of this stuff already, part of this excercise was to get AJAX fully sussed. But yeah, this thread is getting much longer than normal, so once again thanks all and bye.