Re: [css-d] all-css menu elements hover behavior doesn't work in IE

[Chris Ovenden]

I haven't gone through your CSS, but you should be aware that IE only
allows :hover on a tags. Also it doesn't like anything downstream' of
a :hover, eg

a:hover ul { display:visible } //work work in IE as it is

To make a rule like this latter type work, you will need to make some
trivial change to the hovered element itself; eg

a:hover { color:black } //or whatever it was already
a:hover ul { display:visible } //now seen by IE

as well as your desired change. This seems to make IE 'see' the hover.

Chris

On 1/25/06, Studio Express [EMAIL PROTECTED] wrote:
 Hi all,

 I have an all-css dropdown/flyout menu on my site.  The menu works
 beautifully in Safari  FF, but not in IE.  I used an htc file to
 append element hover behavior in IE.

 The page is here:  http://www.xasperformance.com/project
 The CSS is here:  http://www.xasperformance.com/project/styles.css
 Htc file found here:  http://www.xs4all.nl/~peterned/csshover.html
 The internal menu CSS is in the document source, but I also pasted it below:

 Thanks in advance, Everyone!


 style type=text/css
 !--BEGIN VERTICAL MENU--
 #menu {
 width: 100%;
 background: #00;
 }

 #menu ul {
 list-style: none;
 margin: 0;
 padding: 0;
 }

 #menu a, #menu h2 {
 font: bold 11px/16px arial, helvetica, sans-serif;
 display: block;
 border-width: 1px;
 border-style: solid;
 border-color: #ccc #888 #555 #bbb;
 margin: 0;
 padding-top: 5px;
 padding-right: 3px;
 padding-bottom: 2px;
 padding-left: 5px;
 }

 #menu h2 {
 color: #fff;
 background: #000;
 text-transform: uppercase;
 }

 #menu h2:hover {
 color: #fff;
 background: #ff5900;
 }

 #menu a {
 color: #000;
 background: #efefef;
 text-decoration: none;
 }

 #menu a:hover {
 color: #fff;
 background: #ff5900;
 }

 #menu li {position: relative;}

 #menu ul ul {
 position: absolute;
 top: 0;
 left: 100%;
 width: 100%;
 }

 #menu ul ul ul {
 position: absolute;
 top: 0;
 left: 100%;
 width: 100%;
 }

 div#menu ul ul
 {display: none;}

 div#menu ul li:hover ul
 {display: block;}

 div#menu ul li:hover ul ul
 {display: none;}

 div#menu ul li:hover ul li:hover ul
 {display: block;}
 !--END VERTICAL MENU--
 !--BEGIN HORIZONTAL MENU--
 #global {
 width: 100%;
 background: #eee;
 float: left;
 }
 #global ul {
 list-style: none;
 margin: 0;
 padding: 0;
 width: 83px;
 float: left;
 }
 #global a, #global h2, #global h6 {
 font: bold 11px/16x arial, helvetica, sans-serif;
 display: block;
 border-width: 1px;
 border-style: solid;
 border-color: #ccc #888 #555 #bbb;
 margin: 0;
 padding-top: 5px;
 padding-right: 3px;
 padding-bottom: 5px;
 padding-left: 3px;
 }

 #global h2 {
 color: #999;
 background: #000;
 text-transform: uppercase;
 }

 #global h2:hover {
 color: #fff;
 background: #000;
 }

 #global h6 {
 color: #fff;
 background: #000;
 text-transform: uppercase;
 }

 #global h6:hover {
 color: #fff;
 background: #000;
 }

 #global a {
 color: #000;
 background: #efefef;
 text-decoration: none;
 }

 #global a:hover {
 color: #fff;
 background: #ff5900;
 }

 #global li {position: relative;}

 #global ul ul {
 position: absolute;
 z-index: 500;
 }

 #global ul ul ul {
 top: 0%;
 left: 100%;
 }

 div#global ul ul,
 div#global ul li:hover ul ul,
 div#global ul ul li:hover ul ul
 {display: none;}

 div#global ul li:hover ul,
 div#global ul ul li:hover ul,
 div#global ul ul ul li:hover ul
 {display: block;}
 !--END Horizontal Menu--

 !--[if IE]
 style type=text/css media=screen
 body {
 behavior: url(http://www.xasperformance.com/project/csshover.htc);
 font-size: 100%;
 }

 #menu ul li {float: left; width: 100%;}
 #menu ul li a {height: 1%;}

 #menu a, #menu h2 {
 font: bold 0.7em/1.4em arial, helvetica, sans-serif;
 }

 #global ul li {float: left; width: 100%; height: auto}
 #global ul li a {height: 0%;}

 #global a, #global h2, #global h6 {
 font: bold 0.7em/1.4em arial, helvetica, sans-serif;
 }
 /style
 ![endif]--
 /style
 __
 css-discuss [EMAIL PROTECTED]
 http://www.css-discuss.org/mailman/listinfo/css-d
 List wiki/FAQ -- http://css-discuss.incutio.com/
 Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] all-css menu elements hover behavior doesn't work in IE

[Bryce Fields]

On 1/25/06, Studio Express [EMAIL PROTECTED] wrote:
 Hi all,

 I have an all-css dropdown/flyout menu on my site.  The menu works
 beautifully in Safari  FF, but not in IE.  I used an htc file to
 append element hover behavior in IE.

Have you thought about attaching the hover behavior via JavaScript? 
There's an example of how to do it in Griffith and Webb's Suckerfish
Dropdowns (http://www.alistapart.com/articles/dropdowns)

--
Bryce Fields
www.royalrodent.com

Do or do not! There is no try! -- Yoda
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] all-css menu elements hover behavior doesn't work in IE

[jono]

 On 1/25/06, Studio Express [EMAIL PROTECTED] wrote:

 I have an all-css dropdown/flyout menu on my site.  The menu works
 beautifully in Safari  FF, but not in IE.  I used an htc file to
 append element hover behavior in IE.


I have just encountered the very same problem - menu is great in all but
IE.  Here is what I discovered when trying to fix the problem:

Original HTML  CSS Setup:
html pages linked to a central style sheet, which I call centeral.css

central.css then links to three additional style sheets using @import
 - one for the overall layout (layout.css)
 - one for nav (Mr. Meyer's List-Based CSS-Driven Menus) (hdr-nav.css)
 - one for all my IE hacks and fixes (ie.css)
As Follows:
@import url(layout.css); /* Clean */
@import url(hdr-nav.css); /* nav menu */
@import url(ie.css); /* IE Fixes */

I could not get the csshover.htc file (that Mr. Meyer used in his example)
to work for me no matter how I changed the path to the csshover.htc file
in my CSS, no matter what the order of the @import style sheets were in,
no matter where the .htc file was located in the site's directory, and no
matter which of the three imported style sheets included behavior:
url(csshover.htc); - nothing worked.

What finally worked is a slight problem, but temporarily OK.  I
dreadfully copied and pasted all of my separate style sheets into one
GINORMOUS style sheet, named it central2.css and then linked to only
that file in my html page's header.  That fixed the problem -
cssover.htc worked for all flavors of IE.

I am not sure what to conclude from all of this, BUT if you must have it
working, and it must work RIGHT NOW, give the combined style sheet a try
and see if that does the trick.

You can then, from there, use conditional comments to serve the bloated
“central2.css” to only IE.

I am pretty sure I can figure out what is wrong, or what I am doing wrong,
but for now I thought I would offer this temporary solution for when all
else fails.  It still may only work in certain situations, I am not sure?


-- 
Jono Young
Designer | Developer | Illustrator
Charleston Web Solutions
Bringing Higher Standards to the Lowcountry
http://www.charlestonwebsolutions.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/