Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > CSS menu problems with IE 7

Reply
Thread Tools

CSS menu problems with IE 7

 
 
jcandamo
Guest
Posts: n/a
 
      06-06-2009
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]-->

 
Reply With Quote
 
 
 
 
Jonathan N. Little
Guest
Posts: n/a
 
      06-06-2009
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
 
Reply With Quote
 
 
 
 
richard
Guest
Posts: n/a
 
      06-06-2009
On Fri, 05 Jun 2009 22:53:19 -0400, "Jonathan N. Little"
<(E-Mail Removed)> 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.

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS drop-down menu problems hestres HTML 3 03-06-2007 06:33 PM
CSS MENU and CSS photo gallery desjardins.daniel@gmail.com Javascript 1 02-19-2006 06:22 PM
Horizontal Menu and Sub menu in asp.net 2.0 itzikkl ASP .Net 0 03-27-2005 12:50 PM
Menu and sub-menu in asp.net as windows menus made with vb, delphi, etc..? Vilmar ASP .Net 0 05-27-2004 05:52 PM
Jump Menu (DropDown Menu) in ASP.net. Can someone help me out? Miguel Dias Moura ASP .Net 3 04-03-2004 08:17 AM



Advertisments