SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)

    Interesting Firefox behaviour in keyboard-accessible dropdown... bug? How to fix?

    Hallo monks and gurus,
    I've made my first *working* keyboard-accessible menu (one where the menu items actually go somewhere, I mean). There is a big problem in Firefox, and it's to do with how I've made the menu "accessible." While I have already been considering a Javascript crutch to help this a bit, the fact that so far only Gecko browsers have the problem give me hope that it can be fixed.

    Pages are currently being worked on, CSS'd and migrated, but the menu is here and here's what happens:

    If you start keyboarding/tabbing through the page, you go through the menu, and each sub-menu item (under "verhuiswinkel" especially) appear when you tab/focus over it. This is great: when you're on the main menu item, you can see all three sub options, and each individual option appears when it gets the focus. There aren't any sub-sub menu items, so I can practically leave this as-is (except for IE being a...).

    But in Gecko browsers (K-meleon, Firefox 2 and 3, Epiphany) while I can HOVER over the main items and get the subs to appear, and I can HOVER over the sub menu items, I cannot click on a sub-menu item. The menu goes blank, and the href dies. Seriously. Moving the mouse away from the sub-menu after you've tried to click on a sub-item, you see the focus remaining on that sub-item. If you hit Enter, the link works. This would be a little hard to explain to mousing Firefox users, that they have to hit Enter.

    Ideally I'd like the clicking to also work, like it does on any other link.

    The source of the problem seems to be the way that I'm using to get the subs to appear on-screen with :focus-- anyone getting focus is moved over 9998px from where their sub ul is absolutley positioned off-screen. I only have to comment that line out of the CSS to get it working again (but of course this kills the focus being able to bring the menu item on-screen).

    What to do?

    Code:
        <div id="menu"><!--center floats-->
          <div>
            <ul>
              <li class="eerst"><a href="opmaatindex.html">Home</a>
                <ul>
                  <li><a href="verhuizen.html">Verhuistips</a></li>
                </ul>
              </li>
              <li><a href="verhuizen.html#bedrijven">Bedrijven</a></li>
              <li class="huidig"><a href="winkel.html">Verhuiswinkel</a>
                <ul>
                  <li><a href="winkel.html">Verhuisdekens</a></li>
                  <li><a href="winkel.html#rolcontainers">Rolcontainers</a></li>
                  <li><a href="winkel.html#verhuisdozen">Verhuisdozen</a></li>
                </ul>
              </li>
              <li><a href="klussen.html">Klusjesman</a></li>
              <li><a href="transport.html">Transport</a></li>
              <li><a href="opslag.html">Opslag</a></li>
              <li class="laatst"><a href="contact.html">Contact</a>
                <ul>
                  <li><a href="contact.html#offerte">Offerte</a></li>
                  <li><a href="verhuizen.html#tarieven">Tarieven</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
    (Yes, it's also occurred to me that part of the problem is how I'm centering the menu, with two divs, rel-po'd and jerked around with "left". But not sure, this is also a first for me on a Working page (as opposed to a demo). The reason I did that seems to be gone now, so I may try a fixed-width centered menu and one div to hold the 100% wide bg colour...)

    Code:
    /*toetsenbord-toegankelijk dropdown menu, yo!*/
    #menu {
      width: 100%;
      background-color: #4f4979;
    }
    /*clearfix, overflow werkt niet in dit geval*/
    #menu:after {
      content: " ";
      display: block;
      clear: left;
      height: 0;
    }
    /*center floats*/
    	#menu div {
    	  float: left;
    	  position: relative;
    	  left: 50%;
    	}
    	#menu ul {
    	  position: relative;
    	  left: -50%;
    	  list-style: none;
     	  min-height: 2em;
    	  text-align: center;
    	  white-space: nowrap;
    	}
    
    * html #menu ul {height: 2em; width: 799px; border-right: 1px solid #fff;}
    
    	#menu li {
    	  position: relative;
    	  float: left;
    	  width: auto;
    	  border-left: 1px solid #fff;
    	}
    	#menu a {
    	  display: block;
    	  padding: 0 .9em;
    	  font: bold 1em/2em georgia, times, "times new roman", serif;
    	  text-decoration: none;
    	  text-align: center;
    	  color: #fff;
    	  background-color: #4f4979;
    	}
    	#menu li.eerst a {
    	  padding: 0 1.5em;
    	}
    	#menu li.laatst {
    	  border-right: 1px solid #fff;
    	}
    * html #menu li.laatst {border-right: 0;}
    
    		#menu a:focus, #menu a:hover, #menu :hover>a, #menu a:active #menu li.huidig>a {
    	          background-color: #160c4a;
    		}
    
    #menu ul li ul {
      position: absolute;
      left: -9999px;
      width: 100%;
      min-height: 1.8em;
      background: transparent url(img/menubg.png);
      border: 1px solid #000;
      border-top-color: #fff;
    }
    * html #menu ul li ul {width: 7em; height: 1.8em;}
    
    #menu ul ul li { 
      width: 100%; /*IE*/
      border: 0;
    }
    			/*IE7 trigger!!!*/
    			#menu li:hover {
    			  visibility: visible;
    			}
      
    	#menu li a:focus+ul, #menu li:hover ul {
    	  left: 0;
    	}
    * html #menu li:hover ul { left: auto;}/*csshover.htc*/
    
    	#menu ul ul a, #menu li.eerst ul a {
    	  padding: 0;
    	  font-size: .9em;
              line-height: 2em;
    	  font-weight: normal;
    	  text-align: center; /*IE*/
    	  background: transparent url(img/menubg.png);
    	}
    	* html #menu ul ul a {
    	  width: 100%; 
    	  text-align: left; 
    	  background-color: #4f4979; 
    	  background-image: none;
    	}
    		#menu ul li ul a:focus {
    		  display: block; 
    		  width: 100%; 
    		  margin-left: 9998px;
    		  padding: 0;  
    		  color: #000; 
    	   	  font-weight: bold;
    		  background: transparent url(img/menubg2.png);
    		  border: 1px solid #000;
    		  outline: 0;
    		}
    
    		#menu ul ul a:hover, #menu ul ul a:active {
    	  	  color: #000;
    		  font-weight: bold;
    	          background: transparent url(img/menubg2.png) 0 0;
    		}
    
    		* html #menu ul ul a:hover {
    		  color: #fff; 
    		  background-color: #160c4a; 
    		  background-image: none;
    		}
    Tested working well with hover and click on Opera, Safari3, Google Chrome, both IE's (don't have 8). Konqueror shown to act like the Geckos.

    Thanks in advance.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    This happens in IE8 too. Gosh Stommie you always have the most interesting problems to solve. I love it .

    This kinda sucks debugging since Ihave an issue with FF not opening today for me . Gotta debug in develoepr toolbar...ugh


    On "#menu ul li ul" remove width:100&#37;;
    On "#menu li" remove positon:relative;

    position:reltive; was the actual cuase.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Without it, I can't make the li's be the positioned parents of the uls... the subs become positioned based on the parent (ul) and so everyone is to the left.

    My original; suckerfish that I'd personally goofed with did not have the pos-rel on the li's... that did get added when trying to get the subs to show up in relation to the li's on :focus (hover was already working).

    The width: 100% keeps the menu at a set width (100% the width of the li)-- otherwise, what you get is differing lengths of anchor, each anchor the length of its own text. The bg image may help that though... abso-pos shrink wrap like floats. Except in IE6 where they spanned 100% of the page ; )

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Tried it, lost the pos-rel on the li's but I still has to haz width on the sub uls, otherwise they just either super expand or shrink-wrap too much, depends...
    Code:
    /*toetsenbord-toegankelijk dropdown menu, yo!*/
    #menu {
      background-color: #4f4979;
    }
    	#menu ul {
    	  position: relative;
    	  width: 49em; /*smallest browser width*/
    	  margin: 0 auto;
     	  min-height: 2em;
    	  list-style: none;
    	}
    
    * html #menu ul {height: 2em; width: 799px; border-right: 1px solid #fff;}
    
    	#menu li {
    	  position: relative;
    	  float: left;
    	  width: auto;
    	  border-left: 1px solid #fff;
    	}
    	#menu a {
    	  display: block;
    	  padding: 0 .9em;
    	  font: bold 1em/2em georgia, times, "times new roman", serif;
    	  text-decoration: none;
    	  text-align: center;
    	  color: #fff;
    	  background-color: #4f4979;
    	}
    	#menu li.eerst a {
    	  padding: 0 1.5em;
    	}
    	#menu li.laatst {
    	  border-right: 1px solid #fff;
    	}
    * html #menu li.laatst {border-right: 0;}
    
    		#menu a:focus, #menu a:hover, #menu :hover>a, #menu a:active #menu li.huidig>a {
    	          background-color: #160c4a;
    		}
    
    #menu ul li ul {
      position: absolute;
      left: -9999px;
      width: 100%; /*of <li>s, limits width*/
      min-height: 1.8em;
      background: transparent url(img/menubg.png);
      border: 1px solid #000;
      border-top-color: #fff;
    }
    * html #menu ul li ul {width: 7em; height: 1.8em;}
    
    #menu ul ul li { 
      width: 100%; /*IE*/
      border: 0;
    }
    			/*IE7 trigger!!!*/
    			#menu li:hover {
    			  visibility: visible;
    			}
      
    	#menu li a:focus+ul, #menu li:hover ul {
    	  left: 0;
    	}
    * html #menu li:hover ul { left: auto;}/*csshover.htc*/
    
    	#menu ul ul a, #menu li.eerst ul a {
    	  padding: 0;
    	  font-size: .9em;
              line-height: 2em;
    	  font-weight: normal;
    	  text-align: center; /*IE*/
    	  background: transparent url(img/menubg.png);
    	}
    	* html #menu ul ul a {
    	  width: 100%; 
    	  text-align: left; 
    	  background-color: #4f4979; 
    	  background-image: none;
    	}
    		#menu ul li ul a:focus {
    		  display: block; 
    		  width: 100%; 
    		  margin-left: 9998px;
    		  padding: 0;  
    		  color: #000; 
    	   	  font-weight: bold;
    		  background: transparent url(img/menubg2.png);
    		  border: 1px solid #000;
    		  outline: 0;
    		}
    
    		#menu ul ul a:hover, #menu ul ul a:active {
    	  	  color: #000;
    		  font-weight: bold;
    	          background: transparent url(img/menubg2.png) 0 0;
    		}
    
    		* html #menu ul ul a:hover {
    		  color: #fff; 
    		  background-color: #160c4a; 
    		  background-image: none;
    		}
    So, removed one of the two div wrappers, set a width and pos-rel on the #menu's ul, removed pos-rel from the li's, had to then set a width on the sub uls (li has width: auto to accomodate differing text widths), still the issue with hover-click

    disappointed to hear that IE8 is doing the same thing... all the other IEs are fine : (

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    That is a really strange occurance, I wonder if this is actually a documented bug or what..I tried using this rule
    Code:
    #menu *:hover, #menu *:active, #menu *:focus{position:relative!important}
    I did not get consistant results in each IE developer toolbar test. You try it out Stommie.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    The #menu *:focus (or #menu :focus) one shouldn't work correctly cross-browser anyway... I remember trying it before and couldn't get everyone to say, whenever any (focussable) child of #menu is focussed... I can do it with :hover just fine.

    I could just try adding pos-rel on the :hover, but the problem still really seems to be the margin on the focus, cause see when you click on the drop-down, you're suddenly also adding focus to it, and I think that's the issue.

    Go to the page again, and with the new CSS, just comment out the margin-left line in teh :focus declaration. The focus no longer appears for keyboarders, but the hover can click fine.

    My rejiggering of the code has everyone correctly in place again, both for hover and focus, just back to the original problem of mousers being unable to click. it's as if...
    click instead of reaching the href, initiates the :focus, which moves the element a bunch of pixels to the left of where it is now! making it unreachable, so I wonder if I can :active it back that many pixels?

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Oh my freaking lord, I think I fixed it... in a strange way!

    I added this:
    #menu ul ul a:focus:hover {
    margin-left: 0;
    }

    !!!!!!!!!!!!!!!!!!!

    I'm not sure if all browsers understand it (but at least FF does), says, if an anchor is both focussed and hovered, DON'T move the margin over!!

    But I have to test to see if this makes Opera et al die fiery deaths... if they do, then I need a way to target Gecko only... and I know of such a hack, but am afraid to use it... it used a weird html[lang]* something...

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Works in IE8 for me .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  9. #9
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Oh Jawsome, I was going to ask you to do that for me. Wow, I feel stupid. That was simple.

    Oh well, thus my name : )

    I need to get that shark image where he asks, who thinks computers are Jawsome??


  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    LOL! I read your mind . Glad you got it sorted.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •