Dratted IE!

Discussion in 'HTML' started by Paul F. Johnson, Jan 19, 2005.

  1. 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
     
    Paul F. Johnson, Jan 19, 2005
    #1
    1. Advertising

  2. Florian Schmitz wrote:
    > 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

    --
    www.daszeichen.ch
    remove nixspam to reply


    ----== Posted via Newsfeeds.Com - Unlimited-Uncensored-Secure Usenet News==----
    http://www.newsfeeds.com The #1 Newsgroup Service in the World! >100,000 Newsgroups
    ---= East/West-Coast Server Farms - Total Privacy via Encryption =---
     
    Bernhard Sturm, Jan 19, 2005
    #2
    1. Advertising

  3. Paul F. Johnson

    Steve Pugh Guest

    "Paul F. Johnson" <> wrote:

    >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

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, Jan 19, 2005
    #3
  4. Hi,

    Steve Pugh wrote:

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

    >
    > There are problems in Opera.


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

    >>Anyone with IE, it will.


    > 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
     
    Paul F. Johnson, Jan 19, 2005
    #4
  5. =?ISO-8859-1?Q?Re:Dratted_IE!?=

    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:
    > 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
    >

    --
    Immer auf dem aktuellen Stand mit den Newsgroups von freenet.de:
    http://newsgroups.freenet.de
     
    =?ISO-8859-1?Q?Florian_Schmitz?=, Jan 19, 2005
    #5
  6. Paul F. Johnson

    Steve Pugh Guest

    "Paul F. Johnson" <> wrote:
    >Steve Pugh wrote:
    >>"Paul F. Johnson" <> wrote:
    >>
    >>>Anyone not using IE can look away as this will not cause them a problem.

    >>
    >> There are problems in Opera.

    >
    >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.

    >> 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!)


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

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

    >> 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!


    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

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, Jan 19, 2005
    #6
  7. Steve Pugh wrote:

    >>>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!)

    >
    >
    > 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


    --
    www.daszeichen.ch
    remove nixspam to reply


    ----== Posted via Newsfeeds.Com - Unlimited-Uncensored-Secure Usenet News==----
    http://www.newsfeeds.com The #1 Newsgroup Service in the World! >100,000 Newsgroups
    ---= East/West-Coast Server Farms - Total Privacy via Encryption =---
     
    Bernhard Sturm, Jan 19, 2005
    #7
  8. Paul F. Johnson

    Steve Pugh Guest

    Bernhard Sturm <> wrote:
    >Steve Pugh wrote:
    >
    >> 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 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

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, Jan 19, 2005
    #8
  9. Steve Pugh wrote:
    > Bernhard Sturm <> wrote:
    >
    >>Steve Pugh wrote:
    >>
    >>
    >>>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 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)

    >>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.


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

    bernhard

    --
    www.daszeichen.ch
    remove nixspam to reply


    ----== Posted via Newsfeeds.Com - Unlimited-Uncensored-Secure Usenet News==----
    http://www.newsfeeds.com The #1 Newsgroup Service in the World! >100,000 Newsgroups
    ---= East/West-Coast Server Farms - Total Privacy via Encryption =---
     
    Bernhard Sturm, Jan 19, 2005
    #9
  10. Paul F. Johnson wrote:
    > 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...


    --
    -=tn=-
     
    Travis Newbury, Jan 19, 2005
    #10
  11. Hi,

    Bernhard Sturm wrote:

    > 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
     
    Paul F. Johnson, Jan 19, 2005
    #11
  12. Paul F. Johnson wrote:
    > 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

    --
    www.daszeichen.ch
    remove nixspam to reply


    ----== Posted via Newsfeeds.Com - Unlimited-Uncensored-Secure Usenet News==----
    http://www.newsfeeds.com The #1 Newsgroup Service in the World! >100,000 Newsgroups
    ---= East/West-Coast Server Farms - Total Privacy via Encryption =---
     
    Bernhard Sturm, Jan 19, 2005
    #12
  13. Paul F. Johnson wrote:
    > Hi,
    >
    > Bernhard Sturm wrote:
    >
    >> 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)


    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

    --
    www.daszeichen.ch
    remove nixspam to reply


    ----== Posted via Newsfeeds.Com - Unlimited-Uncensored-Secure Usenet News==----
    http://www.newsfeeds.com The #1 Newsgroup Service in the World! >100,000 Newsgroups
    ---= East/West-Coast Server Farms - Total Privacy via Encryption =---
     
    Bernhard Sturm, Jan 19, 2005
    #13
  14. Hi,

    Travis Newbury wrote:

    > 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

    --

    http://www.all-the-johnsons.co.uk

    Joy!
     
    Paul F. Johnson, Jan 20, 2005
    #14
  15. Hi,

    Bernhard Sturm wrote:
    >
    > 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
    --

    http://www.all-the-johnsons.co.uk

    Joy!
     
    Paul F. Johnson, Jan 20, 2005
    #15
  16. Paul F. Johnson wrote:
    > Hi,
    >
    > Bernhard Sturm wrote:
    >
    >>
    >> 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


    --
    www.daszeichen.ch
    remove nixspam to reply


    ----== Posted via Newsfeeds.Com - Unlimited-Uncensored-Secure Usenet News==----
    http://www.newsfeeds.com The #1 Newsgroup Service in the World! >100,000 Newsgroups
    ---= East/West-Coast Server Farms - Total Privacy via Encryption =---
     
    Bernhard Sturm, Jan 20, 2005
    #16
  17. Paul F. Johnson wrote:
    > 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...
    --
    -=tn=-
     
    Travis Newbury, Jan 20, 2005
    #17
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.

Share This Page