Dratted IE!

[Paul F. Johnson]

Hi,

This is a follow up to a posting I made a week or so back.

Anyone not using IE can look away as this will not cause them a problem.
Anyone with IE, it will.

If you tune your browser to http://www.all-the-johnsons.co.uk you'll see
a menu on the left. Put the mouse over programming and you'll see the
problem.

Originally, it was suggested that I would need a bit of JS to get
a:hover to work correctly under IE, so I added it onto every page. The
menu should produce the submenu to the right of the original menu. On IE
, it produces a mess under the original menu option which makes it
almost un-usable.

I don't really want to get rid of the menu system (I like it!), but if
it won't work under IE, I may have to.

Can anyone spot the problem?

The pages and css validates (or did over Christmas!)

TTFN

Paul

 

[Bernhard Sturm]

You can't make submenus based on <li>-tags and CSS work correctly in IE,
its standards support is simply too poor. I advise you, if you really
don't want to remove the menu, to use the IE7 Javascript which enhanches
IE's CSS support.

http://dean.edwards.name/IE7/

or try the suckerfish version which works perfectly in IE:
(but be warned: on IE5.01 Mac, this will not properly work)

http://www.alistapart.com/articles/dropdowns

HTH
bernhard

 

[Steve Pugh]

Anyone not using IE can look away as this will not cause them a problem.

There are problems in Opera.

Anyone with IE, it will.

If you tune your browser to http://www.all-the-johnsons.co.uk you'll see
a menu on the left. Put the mouse over programming and you'll see the
problem.

Originally, it was suggested that I would need a bit of JS to get
a:hover to work correctly under IE, so I added it onto every page. The
menu should produce the submenu to the right of the original menu. On IE
, it produces a mess under the original menu option which makes it
almost un-usable.

I don't really want to get rid of the menu system (I like it!), but if
it won't work under IE, I may have to.

You still haven't done anything about the child selectors in your CSS.

Once again:
foo > bar is treated as foo bar by IE.
foo>bar is ignored by IE.

If you want the styles specified by foo > bar in all browsers then you
will need to use a class instead.

Steve

 

[Paul F. Johnson]

Hi,

There are problems in Opera.

Other than sluggish behaviour, can't see a problem at this end (using
v7.51/Linux)

You still haven't done anything about the child selectors in your CSS.

Once again:
foo > bar is treated as foo bar by IE.
foo>bar is ignored by IE.

Okay, I've fixed the instance of that (well, I can only find one!)

If you want the styles specified by foo > bar in all browsers then you
will need to use a class instead.

Not quite with you. Do you mean that for every one of the foo > bar I
have to implement a class of it's own? That's going to be a pain!

/me slams IE into a wall a number of times!

TTFN

Paul

 

[=?ISO-8859-1?Q?Florian_Schmitz?=]

You can't make submenus based on <li>-tags and CSS work correctly in IE,
its standards support is simply too poor. I advise you, if you really
don't want to remove the menu, to use the IE7 Javascript which enhanches
IE's CSS support.

http://dean.edwards.name/IE7/


Paul F. Johnson schrieb in der newsgroup alt.html:

 

[Steve Pugh]

Other than sluggish behaviour, can't see a problem at this end (using
v7.51/Linux)

The menus overlap and don't clear away properly. This is at least
partly due to known redraw bugs in Win Opera.

Okay, I've fixed the instance of that (well, I can only find one!)

ul.makeMenu li > ul
ul.makeMenu li:hover > ul
ul.makeMenu li:hover > a

That's three instances not fixed as of this moment.

Not quite with you. Do you mean that for every one of the foo > bar I
have to implement a class of it's own? That's going to be a pain!

Look at that first example above.
ul.makeMenu li > ul
is treated as
ul.makeMenu li ul
by IE so it will affect all <ul>s (that are descendents of an <li>
that is itself a descendent of <ul class="makeMenu">) regardless of
how whether they are an immediate child of a <li> or not.

If you want to affect all <ul>s in all browsers then drop the child
selector > so that other browsers treat the select as IE does.

If you want IE to behave as other browsers do then give all the
affected <ul>s a class and then style that class.

Steve

 

[Bernhard Sturm]

ul.makeMenu li > ul
ul.makeMenu li:hover > ul
ul.makeMenu li:hover > a

you cannot attach the :hover pseudo element to the li element in IE...
you have to use JS (some 10 lines of code) in order to fix this
erroneous behaviour of IE as demonstrated in the suckerfish menus:

http://www.alistapart.com/articles/dropdowns

bernhard

 

[Steve Pugh]

you cannot attach the :hover pseudo element to the li element in IE...

You can, just don't expect it to be used by IE.

you have to use JS (some 10 lines of code) in order to fix this

The OP has a .htc which claims to cover this. I haven't looked at the
code in enough detail to see whether it's working properly.

Steve

 

[Bernhard Sturm]

You can, just don't expect it to be used by IE.

LOL.. true. and it's perfectly valid, but IE won't respect it (amongst a
heap of other valid things IE just ignores)

The OP has a .htc which claims to cover this. I haven't looked at the
code in enough detail to see whether it's working properly.

me neither but if he had included it, the problem wouldn't be there...

bernhard

 

[Travis Newbury]

Hi,
Hi

Anyone not using IE can look away as this will not cause them a problem.
Anyone with IE, it will.

If you tune your browser to http://www.all-the-johnsons.co.uk you'll see
a menu on the left. Put the mouse over programming and you'll see the

problem.

<snip>

Constructive criticism here, take it with a grain of salt. But I think
the menu (and over all page) looks like sh!t anyway, so it makes no
difference if someone can see it or not, the pure ugliness of it will
send them a packing.... You can be accessible and validate and NOT be
ugly if you really want to.
Now back to your IE bitch session...

 

[Paul F. Johnson]

Hi,

you cannot attach the :hover pseudo element to the li element in IE...
you have to use JS (some 10 lines of code) in order to fix this
erroneous behaviour of IE as demonstrated in the suckerfish menus:

http://www.alistapart.com/articles/dropdowns

Did an exact copy of that JS and IE did nothing with it - it's what is
up there now. Only difference is that instead of nav, I have makeMenu
(that maked no difference either)

TTFN

Paul

 

[Bernhard Sturm]

Hi,

Did an exact copy of that JS and IE did nothing with it - it's what is
up there now. Only difference is that instead of nav, I have makeMenu
(that maked no difference either)

so I assume you have corrected this in the JS as well?

bernhard

 

[Bernhard Sturm]

Hi,




Did an exact copy of that JS and IE did nothing with it - it's what is
up there now. Only difference is that instead of nav, I have makeMenu
(that maked no difference either)

hmm couldn't find the following js lines in your source (but did not
look for it long enough, though):


// Menu IE only
sfHover = function() {
var sfEls = document.getElementById("makeMenu").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" sfhover";
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

this should solve your problem...

bernhard

 

[Paul F. Johnson]

Hi,

Constructive criticism here, take it with a grain of salt. But I think
the menu (and over all page) looks like sh!t anyway, so it makes no
difference if someone can see it or not, the pure ugliness of it will
send them a packing.... You can be accessible and validate and NOT be
ugly if you really want to.

I did consider other methods of using a menu system, but this seemed to
be the one which would work. Not sure about it looking like sh!t though...

Thanks for the constructive criticism, much appreciated.

TTFN

Paul

 

[Paul F. Johnson]

Hi,

hmm couldn't find the following js lines in your source (but did not
look for it long enough, though):


// Menu IE only
sfHover = function() {
var sfEls =
document.getElementById("makeMenu").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" sfhover";
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new RegExp("
sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

Should this be in the html itself (i.e. with a <script
type="text/javascript"> ...code... </script> before <body>) or the .htc
file? Or can I just load it in using the usual <script
src="javascript/ie5.js"> sort of thing?

TTFN

Paul

 

[Bernhard Sturm]

Hi,

hmm couldn't find the following js lines in your source (but did not
look for it long enough, though):


// Menu IE only
sfHover = function() {
var sfEls =
document.getElementById("makeMenu").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" sfhover";
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new RegExp("
sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

Should this be in the html itself (i.e. with a <script
type="text/javascript"> ...code... </script> before <body>) or the .htc
file? Or can I just load it in using the usual <script
src="javascript/ie5.js"> sort of thing?

hmm.. why don't you read the list apart article I have posted here for
at least 3 times now?

http://www.alistapart.com/articles/dropdowns

all the needed stuff is described there.
basically it's as simple as this:

yourpage.htm <- menu.js / styles.css

menu.js contains the posted js code
styles.css contains the styles described at alistapart.com

but if you want a working version of your menu check this, and copy what
you need:

http://www.daszeichen.ch/client/nccr/main/index.htm

(with copy I mean: only script/css stuff. You are not allowed to copy
the design or any graphics

cheers
bernhard

 

[Travis Newbury]

I did consider other methods of using a menu system, but this seemed to
be the one which would work. Not sure about it looking like sh!t

though...

I did of course mean "sh!t in the kindest sense of the word...