«

I have a CSS that is giving me a hard time in IE 7, works in Chrome
and Firefox 3. I'm not a CSS expert, any help will be greatly
appreciated. The problem occurs when hovering over the second level,
it dissapears instead of triggering the rollover event

My general CSS has:

/* 1st level for all browsers */
..menu {
font-family: arial, sans-serif;
width:106px;
height:33px;
position:absolute;
font-size:11px;
top:160px;
width:749px;
}
..menu ul li a, .menu ul li a:visited {display:block; text-
decoration:none; color:#FFCC00; width:104px; height:21px; text-
align:center; border:1px solid #CCCCCC; border-width:1px 1px 0 0;
background:#333333; line-height:19px; font-size:11px; font-
weight:normal; }

..menu ul {padding:0; margin:0; list-style-type: none; }
..menu ul li {float:left; margin-right:1px; position:relative;}
..menu ul li ul {display: none;}

/* not Internet Explorer */
..menu ul li:hover a {color:#FFFFFF; background:#000000;}
..menu ul li:hover ul {display:block; position:absolute; top:22px; left:
0px; width:105px;}
/* 2nd level pull-out static */
..menu ul li:hover ul li a.hide {background:#333333; color:#FFCC00;}
/* 2nd level pulled */
..menu ul li:hover ul li:hover a.hide {width:150px; background:#000000;
color:#FFFFFF;}
..menu ul li:hover ul li ul {display: none;}
/* 2nd level static */
..menu ul li:hover ul li a {display:block; background:#333333;
color:#FFCC00; width:150px;}
..menu ul li:hover ul li a:hover {background:#000000; color:#FFFFFF;} /
* HERE hover 2nd level*/
..menu ul li:hover ul li:hover ul {display:block; position:absolute;
left:151px; top:0; color:#000000;}
/* 3rd level */
..menu ul li:hover ul li:hover ul li a {display:block; width:200px;
background:#333333; color:#FFCC00;}
..menu ul li:hover ul li:hover ul li a:hover {background:#000000;
color:#FFFFFF;}

My IE CSS has:

..menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
..menu ul li a:hover ul li a.hide {display:none; color:#00FF00;
background:#00FF00;}

/* 1st level hover */
..menu ul li a:hover {color:#FFFFFF; background:#000000;}
..menu ul li a:hover ul {display:block; position:absolute; top:21px;
left:0px; width:105px;}
/* 2nd level pull-out static */
..menu ul li a:hover ul li a.sub {background:#333333; color:#FFCC00;}
/* 2nd level static HERE */
..menu ul li a:hover ul li a {display:block; background:#333333;
color:#FFCC00; width:150px; height:20px; top:0px;}
..menu ul li a:hover ul li a ul {visibility:hidden; }
/* 2nd level hover */
..menu ul li a:hover ul li a:hover {background:#000000; color:#FFFFFF;}
..menu ul li a:hover ul li a:hover ul {visibility:visible;
position:absolute; left:150px; top:0; color:#000;}
/* 3rd level static */
..menu ul li a:hover ul li a:hover ul li a {display:block; width:200px;
background:#333333; color:#FFCC00;}
..menu ul li a:hover ul li a:hover ul li a:hover {background:#000000;
color:#FFFFFF;}

table.IEmenu {border-collapse:collapse; border:0; margin:0; padding:0;
top:0;}

My HTML has:

<!--#include virtual="/css/grlmenu.txt"-->
<div class="menu" align="center" style="margin-left:15px; margin-
top:0px">
<ul>
<li><a class="hide" href="P.html">P</a>
<!--[if IE]>
<a href="P.html">P
<table class="IEmenu"><tr><td>
<![endif]-->
<ul>
<li><a href="Kr.html" title="K">K</a></li>
<li><a href="C.html" title="C">C</a></li>
<li><a href="O.html" title="O<">O</a></li>
<li><a class="hide" href="N.html" title="N">N</a>
</ul>
<!--[if IE]>
</td></tr></table>
</a>

<![endif]-->

jcandamo wrote:
> I have a CSS that is giving me a hard time in IE 7, works in Chrome
> and Firefox 3. I'm not a CSS expert, any help will be greatly
> appreciated. The problem occurs when hovering over the second level,
> it dissapears instead of triggering the rollover event
>
> My general CSS has:

<snip code>

URL, URL URL...don't post code!


> My HTML has:
>
> <!--#include virtual="/css/grlmenu.txt"-->

For exactly this reason! Who knows what you have in the SSI

> <div class="menu" align="center" style="margin-left:15px; margin-
> top:0px">
> <ul>
> <li><a class="hide" href="P.html">P</a>
> <!--[if IE]>
> <a href="P.html">P
> <table class="IEmenu"><tr><td>
> <![endif]-->
> <ul>

Okay! Right there for your IE specific markup, your cannot nest a TABLE
within a A element. A TABLE is a *block* element and A (links) can only
contain inline elements.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

On Fri, 05 Jun 2009 22:53:19 -0400, "Jonathan N. Little"
<> wrote:

>jcandamo wrote:
>> I have a CSS that is giving me a hard time in IE 7, works in Chrome
>> and Firefox 3. I'm not a CSS expert, any help will be greatly
>> appreciated. The problem occurs when hovering over the second level,
>> it dissapears instead of triggering the rollover event
>>
>> My general CSS has:
>
><snip code>
>
>URL, URL URL...don't post code!
>
>
>> My HTML has:
>>
>> <!--#include virtual="/css/grlmenu.txt"-->
>
>For exactly this reason! Who knows what you have in the SSI
>
>> <div class="menu" align="center" style="margin-left:15px; margin-
>> top:0px">
>> <ul>
>> <li><a class="hide" href="P.html">P</a>
>> <!--[if IE]>
>> <a href="P.html">P
>> <table class="IEmenu"><tr><td>
>> <![endif]-->
>> <ul>
>
>Okay! Right there for your IE specific markup, your cannot nest a TABLE
>within a A element. A TABLE is a *block* element and A (links) can only
>contain inline elements.


He's also trying to create a table within the nest of the UL which
ain't gonna work.

<a href="P.html">P
should be <a href="P.html">P</a>

The if/end if is totally wrong as well.

I believe he is attempting to create a table in place of the UL if the
browser is IE. In which case the if/end if should be placed before the
UL stuff for other browsers.

To be more proper, you should simply redirect to another page that is
more suited to IE users.