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: #000000;
> }
>
> #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/
