CSS menu problems with IE 7

J

jcandamo

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]-->
 
J

Jonathan N. Little

jcandamo said:
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.
 
R

richard

jcandamo said:
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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top