navigation
a webmaster learning community
     Home    Register     Search      Help      Login    
Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums
 

Advanced search
Recent Posts

 Todays Posts
 Most Active posts
 Posts since last visit
 My Recent Posts
 Mark posts read

Microsoft MVP

 

CSS horizontal drop menu

 
View related threads: (in this forum | in all forums)

Logged in as: Guest
Users viewing this topic: none
Printable Version 

All Forums >> Web Development >> Cascading Style Sheets >> CSS horizontal drop menu
Page: [1]
 
Scotty

 

Posts: 194
From: USA
Status: offline

 
CSS horizontal drop menu - 4/28/2008 14:52:52   
I just noticed our drop menu is not working properly in Internet Explorer...www.loghomestore.com.
With firefox, everything is fine, in Explorer there are white lines/spaces between some of the items...example, hover over tools and you can slide down the first two items, then you get to a space before the next item "drilling", and that's as far as you can go.
What did I do wrong?...and is this a function of my opening pages/editing with WSIWG editor (Kompozer).
Regards, Scotty
Tailslide

 

Posts: 5771
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

 
RE: CSS horizontal drop menu - 4/28/2008 15:45:18   
Might be the IE whitespace bug. Just to experiment, try removing the whitespace after one list item that's causing a problem like this:

....
<li><a href="whatever.html">Linky</a>
</li><li><a href="whatever.html">Linky</a>
...


etc

What you're doing is effectively removing the whitespace after the closing LI. It may not work but it's worth a go.

You've got a lot of coding errors in there - it's hard to be sure what's causing an issue and what's not with that amount of errors - very difficult to track down solutions.

_____________________________

"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project

(in reply to Scotty)
Scotty

 

Posts: 194
From: USA
Status: offline

 
RE: CSS horizontal drop menu - 4/28/2008 22:40:51   
It worked...so far.
First I set up a 'compliant' page.
www.loghomestore.com/compliant.html.
Ran the w3c test and got a passing grade :)
Then I took the first section of the horizontal css drop menu "books" and removed the 'white spaces' by moving the <li> up one line to be next to </li>...thus </li><li>, for it and all it's sub menus...and it works in Firefox and IE.
Anyone have time to look in Opera or ?...what other browsers should I check?
Regards, Scotty

Update: I'm part way through this process and it looks like it's going to royally confuse IE...it's starting to show blank boxes, slow loading boxes, boxes which shouldn't (yet) be open.
I'll keep slogging, however I'm wondering if I should revert back to our previous js drop menu?
Anyone successfully using a horizontal css drop menu in IE? What flavor is it?
Regards, Scotty

< Message edited by Scotty -- 4/28/2008 23:42:32 >

(in reply to Tailslide)
Tailslide

 

Posts: 5771
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

 
RE: CSS horizontal drop menu - 4/29/2008 2:07:53   
I've successfully used the accessible son of suckerfish and the Helix dropdowns.

Most (all) CSS menus have a little extra javascript because otherwise they won't work in IE6 and under. It's question of how much really. As long as you've got pure HTML links then you're ok. Problems arise when you get those Javascript menus with scripted links etc.

Anyway - the issue looks to be the Whitespace Bug and there are a few solutions around one of which is to remove the whitespace between all the list items in the menu.

Here's a TEST PAGE where I've done that and it works fine in IE7, FF and Opera (no dropdowns in IE6 as expected).

It's not handy to edit like this as you've basically got the lot on one line so maybe one of the other cures would be better for you. But if you're using a WYSIWYG editor anyway... Be careful with those editors - they can re-arrange your code for you which would put the whitespace right back in. I'd take a copy of the menu in a text file just in case. The version on the link you posted last had all the normal whitespace there still.



< Message edited by Tailslide -- 4/29/2008 2:45:24 >


_____________________________

"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project

(in reply to Scotty)
Scotty

 

Posts: 194
From: USA
Status: offline

 
RE: CSS horizontal drop menu problem in IE - 4/29/2008 21:24:04   
With tailspins' permission I loaded the fix and viola...drop downs work in current IE. You musta been a fighter pilot in a previous incarnation...that was quick.
Regards, Scotty

(in reply to Tailslide)
Tailslide

 

Posts: 5771
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

 
RE: CSS horizontal drop menu problem in IE - 4/30/2008 6:58:53   
Ok - 2 things.

Firstly - yes removing the whitespace works but on a menu that size I wouldn't use it - it'll be a nightmare to edit. I used it primarily to show that it was the whitespace bug causing the issue. There are better ways of fixing it.

In the test page I've posted I've changed the menu back to the properly indented form to make life easier to edit it and I've added two little rules for your CSS:

#navigation li li a { display: inline-block; }
#navigation li li a { display: block; }


Put these after all your other #navigation rules in the stylesheet. This fixes it for IE7. Oddly - in IE6 and under the whitespace bug wasn't showing... go figure.

Just copy and paste the navigation list back into your page from my test page.

Secondly, to make the dropdowns drop down in IE6 and under, copy the following code into a blank page of Notepad or whatever and save it as csshover.htc - upload it to your webserver.

<attach event="ondocumentready" handler="parseStylesheets" />
<script>
/**
 * Whatever:hover - V1.42.060206 - hover & active
 * ------------------------------------------------------------
 * (c) 2005 - Peter Nederlof
 * Peterned - http://www.xs4all.nl/~peterned/
 * License  - http://creativecommons.org/licenses/LGPL/2.1/
 *
 * Whatever:hover is free software; you can redistribute it and/or
 * modify it under the terms of the GNU Lesser General Public
 * License as published by the Free Software Foundation; either
 * version 2.1 of the License, or (at your option) any later version.
 *
 * Whatever:hover is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 * Lesser General Public License for more details.
 *
 * Credits and thanks to:
 * Arnoud Berendsen, Martin Reurings, Robert Hanson
 *
 * howto: body { behavior:url("csshover.htc"); }
 * ------------------------------------------------------------
 */

var csshoverReg = /(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i,
currentSheet, doc = window.document, hoverEvents = [], activators = {
   onhover:{on:'onmouseover', off:'onmouseout'},
   onactive:{on:'onmousedown', off:'onmouseup'}
}

function parseStylesheets() {
   if(!/MSIE (5|6)/.test(navigator.userAgent)) return;
   window.attachEvent('onunload', unhookHoverEvents);
   var sheets = doc.styleSheets, l = sheets.length;
   for(var i=0; i<l; i++)
      parseStylesheet(sheets);
}
   function parseStylesheet(sheet) {
      if(sheet.imports) {
         try {
            var imports = sheet.imports, l = imports.length;
            for(var i=0; i<l; i++) parseStylesheet(sheet.imports);
         } catch(securityException){}
      }

      try {
         var rules = (currentSheet = sheet).rules, l = rules.length;
         for(var j=0; j<l; j++) parseCSSRule(rules[j]);
      } catch(securityException){}
   }

   function parseCSSRule(rule) {
      var select = rule.selectorText, style = rule.style.cssText;
      if(!csshoverReg.test(select) || !style) return;

      var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
      var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
      var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];
      var affected = select.replace(/:(hover|active).*$/, '');
      var elements = getElementsBySelect(affected);
      if(elements.length == 0) return;

      currentSheet.addRule(newSelect, style);
      for(var i=0; i<elements.length; i++)
         new HoverElement(elements, className, activators[pseudo]);
   }

function HoverElement(node, className, events) {
   if(!node.hovers) node.hovers = {};
   if(node.hovers[className]) return;
   node.hovers[className] = true;
   hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });
   hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}
   function hookHoverEvent(node, type, handler) {
      node.attachEvent(type, handler);
      hoverEvents[hoverEvents.length] = {
         node:node, type:type, handler:handler
      };
   }

   function unhookHoverEvents() {
      for(var e,i=0; i<hoverEvents.length; i++) {
         e = hoverEvents;
         e.node.detachEvent(e.type, e.handler);
      }
   }

function getElementsBySelect(rule) {
   var parts, nodes = [doc];
   parts = rule.split(' ');
   for(var i=0; i<parts.length; i++) {
      nodes = getSelectedNodes(parts, nodes);
   }  return nodes;
}
   function getSelectedNodes(select, elements) {
      var result, node, nodes = [];
      var identify = (/\#([a-z0-9_-]+)/i).exec(select);
      if(identify) {
         var element = doc.getElementById(identify[1]);
         return element? [element]:nodes;
      }

      var classname = (/\.([a-z0-9_-]+)/i).exec(select);
      var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
      var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;
      for(var i=0; i<elements.length; i++) {
         result = tagName? elements.all.tags(tagName):elements.all;
         for(var j=0; j<result.length; j++) {
            node = result[j];
            if(classReg && !classReg.test(node.className)) continue;
            nodes[nodes.length] = node;
         }
      }

      return nodes;
   }
</script>


This code comes from here: http://www.xs4all.nl/~peterned/csshover.html

Now at the bottom of your stylesheet add this:

body { behavior:url("csshover.htc");   }

Making sure the path to the file from the stylesheet is correct - i.e. in this case it's in the same directory (in the example I've got all the rules in the document head).

And that's it.

The example will look a little odd because I've stuck all your CSS rules into the document head so all the paths to the images etc will be off - so ignore that.

_____________________________

"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project

(in reply to Scotty)
Page:   [1]

All Forums >> Web Development >> Cascading Style Sheets >> CSS horizontal drop menu
Page: [1]
Jump to: 1





New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts