locked
Is there a workaround for this Chrome bug? RRS feed

  • Question

  • When attempting to use the vertical menu links in this page http://www.birkbinnard.com/bamboo/ Google Chrome usually triggers the mouse rollover event only if the mouse is positioned on the far left edge of the link. I have reported this as a bug to the Chrome folks but of course I have no idea if/when it will ever be addressed.

    Can anyone provide a workaround for this?  I used EW2 and a 3rd party menu builder called CSS3Menu to make the DWT that is the basis for all the pages. It took me a long time to get it all to work (I really do not want to start a discussion about that) so I do not want to try re-developing things; I'm hoping for some simple fix to the generated CSS menu code (listed below) or some other way to tweak the DWT.  

     

    Thanks.

     

    CSS code follow:

    ul#css3menu3,ul#css3menu3 ul{

    margin:0;list-style:none;background-color:#424542;border-width:2px;border-style:solid;border-color:#FFF;-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;}

    ul#css3menu3 ul{

    display:none;position:absolute;left:100%;top:0;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;padding:0 3px 3px;border-radius:7px;-moz-border-radius:7px;-webkit-border-radius:7px;}

    ul#css3menu3 li:hover>*{

    display:block;}

    ul#css3menu3 li:hover{

    position:relative;}

    ul#css3menu3 ul ul{

    position:absolute;left:100%;top:0;}

    ul#css3menu3{

    padding:0 3px 3px;display:block;font-size:0;float:left;}

    ul#css3menu3 li{

    display:block;white-space:nowrap;font-size:0;}

    ul#css3menu3>li,ul#css3menu3 li{

    margin:3px 0 0;}

    ul#css3menu3 a:active, ul#css3menu3 a:focus{

    outline-style:none;}

    ul#css3menu3 a,ul#css3menu3 a.pressed{

    display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 14px Arial;color:#ffffff;cursor:pointer;}

    ul#css3menu3 ul li{

    float:none;}

    ul#css3menu3 ul a{

    text-align:left;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;font:14px Trebuchet MS;color:#ffffff;text-decoration:none;}

    ul#css3menu3 li:hover>a{

    background-color:#ffa202;border-color:#424542;border-style:solid;font:bold 14px Arial;color:#000000;text-decoration:none;background-image:url("mainbk.png");}

    ul#css3menu3 img{

    border:none;vertical-align:middle;margin-right:10px;}

    ul#css3menu3 img.over{

    display:none;}

    ul#css3menu3 li:hover > a img.def{

    display:none;}

    ul#css3menu3 li:hover > a img.over{

    display:inline;}

    ul#css3menu3 li a.pressed img.over{

    display:inline;}

    ul#css3menu3 li a.pressed img.def{

    display:none;}

    ul#css3menu3 span{

    display:block;overflow:visible;background-image:url("arrowsub.png");background-position:right center;background-repeat:no-repeat;padding-right:24px;}

    ul#css3menu3 a{

    padding:10px;background-color:#424542;background-image:none;background-repeat:repeat;border-width:1px 0 0 0;border-style:solid;border-color:#424542;border-radius:20px;-moz-border-radius:20px;-webkit-border-radius:20px;color:#ffffff;text-decoration:none;}

    ul#css3menu3 li:hover>a,ul#css3menu3 li>a.pressed{

    background-color:#ffa202;background-image:url("mainbk.png");border-style:solid;border-color:#424542;color:#000000;text-decoration:none;}

    ul#css3menu3 ul li:hover>a,ul#css3menu3 ul li>a.pressed{

    font:14px Trebuchet MS;color:#ffffff;text-decoration:none;}

    ul#css3menu3 li.topfirst>a{

    border-width:0;}

     


    bbinnard http://www.birkbinnard.com
    Tuesday, July 5, 2011 7:44 PM

Answers

  • I think I know what your problem is. Your menu is floated left and then your paragraphs of class="style7" actual sets over the top of the menu even though the text of paragraphs slide to the right of the menu. That means that they block the detection of mouse over. Try enclosing your paragraphs in a <div> and float that left as well. You'll have give it a fixed width. It will keep your paragraphs from hiding you menus.

    I verified that this is actually the problem by deleting your paragraphs with Firefox and then the menus worked much better.

    This actually might be the time to use a table with the left cell for the menu having a fixed width and the right cell for the text without width specification.

     

    BETTER YET.....inside the style7 css definition add property:

    z-index:-1;

    Fixes the whole problem.

    • Marked as answer by Birk Binnard Wednesday, July 6, 2011 8:54 AM
    Wednesday, July 6, 2011 6:40 AM

All replies

  • This is a question you should address to whatever support there is for the menu you used.
    Tuesday, July 5, 2011 8:07 PM
  • I took a look at your page with Chrome 13.0.782.41 beta-m on Windows and also with Chrome 12.0.742.112 on Ubuntu Linux and I don't see any different behavior from Firefox 5.0 or IE 9.0. The menus work the same on all 4 browsers and they don't (for me) have the behavior you describe. Maybe you could give us more information?
    Tuesday, July 5, 2011 9:04 PM
  • Thanks for the feedback TimeBandit. Perhaps the problem has in fact been fixed - I just noticed my Chrome is 13.0.782.24.  I'll try the latest version and see if things are better.

    OK - I am now on 13.0.782.41 and the problem I described is much improved.  What that means is most of the time all the links work fine, but a few times one or two of them only work if the mouse is at the left edge of the link. 

    This strikes me as very odd. Could it be related to the fact that my mouse is really a trackball and uses drivers from Kensington? OR that my screen resolution is 1920x1200?  I do have IE9and I agree the links work fine there.  

    Most peculiar indeed.

     


    bbinnard http://www.birkbinnard.com
    Tuesday, July 5, 2011 9:16 PM
  • Just to confuse things, I looked at it with multiple browsers, and the only one that consistently worked properly was IE8. On my system, FF, Safari, Chrome and Opera all displayed the erratic behavior. It isn't a problem with Chrome, but with the menu. Apparently it varies from one system to another, but there is definitely a problem.

    Jim


    “Be who you are and say what you feel because those who mind don't matter and those who matter don't mind.” - Dr. Seuss
    Tuesday, July 5, 2011 9:44 PM
  • Thanks Jim

    I will try to report the problem to the CSS3Menu folks (whoever they are.)  It does seem odd that IE8 (and apparently IE9 as well) can handle the CSS as intended, but other browsers do not. 

    I wonder if there some sort of CSS Validation routine that might flag something in the generated CSS that needs to be tweaked. I'll see if I can find something like that.

    (tick tock tick tock)

    WOW - I found 2 places that validate CSS and they both found multiple (and different) errors in the CSS.  What a mess. I'll notify the CSS3Menu people about this. My guess is that nothing will happen because I am using the free version of CSS3Menu.


    bbinnard http://www.birkbinnard.com
    Tuesday, July 5, 2011 10:11 PM
  • Well, not only doesn't it work properly in Chrome 12.0.742.112 (unpredictable rollover), but also no go in Firefox and Opera. AND...it behaves differently when the browser is full screen and windowed! (check how it behaves when you mouse over the upper half of Startup Equipment full screen, then windowed). Ugh.

    And I don't see the box shadow in any browser. That could be because you have set the width to 3.5px. A pixel is the smallest addressable dot on the screen. You can't light up half a pixel. Yet. So the browsers may be barfing on that too.

    And you are using descriptive names for sizes: large, xx-large, etc. Those mean different things to different browsers; you have no control over how they will render. Bad idea.

    Let's move this discussion to the CSS3Menu forum; this is their bastard child.


    It's not the heat; it's the stupidity.
    Wednesday, July 6, 2011 12:36 AM
  • I think I know what your problem is. Your menu is floated left and then your paragraphs of class="style7" actual sets over the top of the menu even though the text of paragraphs slide to the right of the menu. That means that they block the detection of mouse over. Try enclosing your paragraphs in a <div> and float that left as well. You'll have give it a fixed width. It will keep your paragraphs from hiding you menus.

    I verified that this is actually the problem by deleting your paragraphs with Firefox and then the menus worked much better.

    This actually might be the time to use a table with the left cell for the menu having a fixed width and the right cell for the text without width specification.

     

    BETTER YET.....inside the style7 css definition add property:

    z-index:-1;

    Fixes the whole problem.

    • Marked as answer by Birk Binnard Wednesday, July 6, 2011 8:54 AM
    Wednesday, July 6, 2011 6:40 AM
  • Time Bandit:

    You are THE MAN!  Most excellent analysis and advice. I did apply the z=index=-1 and as you said it did fix the problem. Many thanks for this.

    It turned out implementing the fix was a bit more complicated that just tweaking one style def. Because of the way I built the pages (haphazardly at best with lots of copy/pastes) the styles ended up being quite inconsistent. Some of the pages use style 2 which is in the dwt; others use styles that were generated inline and that had different style numbers. I've never liked the way EW2 generates a new style every time there is a single format change, but I guess it is what it is.

    I had notices that in the EW2 Design view the orange line around the body text did extend over the menu area, but it never occurred to me that this would affect mouseovers. That's a great catch on your part.

    Thanks again for taking the time to figure this out.


    bbinnard http://www.birkbinnard.com
    Wednesday, July 6, 2011 9:04 AM