...

View Full Version : Vertical list menu: focus keeps losing in IE



LostAndFound
07-26-2007, 01:15 AM
I've tried this particular menu
http://www.javascriptkit.com/script/script2/verticalmenu.shtml
on my page, and when I test it in IE focus keeps losing in submenus. Submenu gets displayed and when I move to it, sometimes (9 out of 10 tries) focus is lost and I lose submenu.

When this started to happen I've literally copy/pasted .css and .js AND html code, and still, original thing on my page doesn't work. When I try to test example on this page it works fine in IE and opera, but when I include it in my page, it won't work well in IE.

Any ideas at all? Thanks

zro@rtv
07-26-2007, 02:25 AM
do you have your site live? it would really help to see your implementation.

LostAndFound
07-26-2007, 07:46 AM
Sadly I can't because I'm using php and have so far no server so I use localhost as a way of testing... I can copy html code though:

Menu starts at "<ul id="verticalmenu" class="glossymenu">"



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link href="CSS/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="menu/cssverticalmenu.css" />
<script type="text/javascript" src="menu/cssverticalmenu.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>SKD</title>

</head>

<body>
<table width="90%" cellspacing="0" cellpadding="0" align="center">
<tr>
<th align="left" valign="bottom" style="width:40%; height:220px; background-color:#000000; background-image:url(slike/logo.png); background-repeat:no-repeat; background-position:left;" scope="col">&nbsp;&nbsp;<img src="slike/home_email.png" width="46" height="19" border="0" usemap="#Map" alt="01"/>
<br />
</th>
<th scope="col" style="width:5%; background-color:#000000;">
&nbsp;
</th>
<th align="right" scope="col" style="background-color:#000000; ">
<img src="slike/header_part_3_up.png" align="right" alt="header_up" width="420" height="220" border="0" />
</th>
</tr>

<tr>
<td align="left" valign="top" style="width:40%; background-image:url(slike/header_part_2.png); background-repeat:repeat; height:100px;"><br />
<form id="form1" name="form1" method="post" action="isci.php">
&nbsp;&nbsp;<input name="story" type="text" id="Story" value="" />
<input type="submit" class="style7" value="Išči" />
</form>
</td>
<td class="style6" style="width:5%; background-image:url(slike/header_part_2.png); background-repeat:repeat; height:100px;">
&nbsp;
</td>
<td align="right" style="background-image:url(slike/header_part_2.png); background-repeat:repeat; "><img src="slike/header_part_3_down.png" align="right" alt="header_down" width="420" height="100" border="0" />
</td>
</tr>
<tr>
<td colspan="3" valign="top" style="background-color:#e0e3e8;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th align="center" valign="top" style="width:25%;" scope="col">

<ul id="verticalmenu" class="glossymenu">
<li><a href="index.php">Aktualno</a></li>
<li><a href="#">Šolanje</a>
<ul>
<li><a href="solanje.php?ids=1">Splošno</a></li>
<li><a href="solanje.php?ids=2">Mala šola</a></li>
<li><a href="solanje.php?ids=3">Začetni tečaj</a></li>
<li><a href="solanje.php?ids=4">Nadaljevalni tečaj</a></li>
<li><a href="solanje.php?ids=5">Urnik</a></li>
</ul>
</li>
<li><a href="#">Rally Obedience</a>
<ul>
<li><a href="rob.php?roid=1">Splošno</a></li>
<li><a href="rob.php?roid=2">Novice</a></li>
</ul>
</li>
<li><a href="#">Agility</a>
<ul>
<li><a href="agility.php?id=1">Splošno</a></li>
<li><a href="agility.php?id=2">Novice</a></li>
</ul>
</li>
<li><a href="tekmovalci.php">Tekmovalci</a></li>
<li><a href="zapo.php">Zanimivo - poučno</a></li>
</ul>

</th>
<th valign="top" style="width:60%; background-color:#FFFFFF; border:solid; border-bottom-color:#FFFFFF; border-top-color:#FFFFFF; border-left-color:#999999; border-right-color:#999999;" scope="col">
<table width="80%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<th scope="col">
<img src="slike/header_above_news.png" alt="Novice Header" width="434" height="137" />
</th>
</tr>
</table>
<table width="80%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<th align="center" valign="top" scope="col">
<p align="justify">
<span class="nad_risbo">
AKTUALNO
</span>
<!-- php code here-->
</p>
</th>
</tr>
</table>
</th>
<th valign="top" style="width:15%" scope="col">
<p>
<a href="http://www.fci.be/home.asp?lang=en" target="_blank">
<img src="slike/icon_fci.png" alt="FCI" width="60" height="60" border="0" />
<br />
FCI
</a>
</p>
<p>
<br />
<img src="slike/kzs_logo.gif" alt="KZS" width="100" height="35" />
<br />
<a href="http://www.kinoloska-zveza.si/" target="_blank">
KZS
</a>
</p>
<p>
<img src="slike/ist1_1679093_hand_holding_magnifing_glass copy.png" alt="kjesmo" width="60" height="60" />
<br />
<a href="slike/map.png" target="_blank">
Kje smo?
</a>
</p>
</th>
</tr>
</table>

</td>
</tr>
<tr>
<td colspan="3" align="left" bgcolor="#333333">
<div align="right" class="style6">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th scope="col">
<div align="left" class="style6">
Copyright by SKD
</div>
</th>
<th scope="col">
<div align="right" class="style6">
<!-- php code here -->
</div>
</th>
</tr>
</table>
</div>
</td>
</tr>
</table>

<map name="Map" id="Map">
<area shape="rect" coords="1,1,19,17" href="index.php" alt="01"/>
<area shape="rect" coords="25,2,44,17" href="kontakt.php" alt="02"/>
</map>

</body>
</html>


The page kind of validates (I use opera's tester and it said "This Page Is Valid XHTML 1.0 Transitional!" :) )
Also in official .css there's this thing:

/* Holly Hack for IE \*/
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
/* End */

Doesn't seem so Holly :D

LostAndFound
07-26-2007, 01:22 PM
OK I found out that my menu doesn't work only in IE7 (even though example DOES work in IE7 too) but it does in IE6 and Opera and FireFox... so it's only IE7.. what could that be? :(

LostAndFound
07-27-2007, 12:13 AM
OK I've taken few screenshots... this is what happens when I hoover a menu option and I don't put mouse cursor ON text, but near it. In opera it gets the right hoover effect, but in IE it just ignores it, until I hoover over text.

http://shrani.si/files/untitled414xkp.jpg

Arbitrator
07-27-2007, 12:27 AM
OK I found out that my menu doesn't work only in IE7 (even though example DOES work in IE7 too) but it does in IE6 and Opera and FireFox... so it's only IE7.. what could that be? :(Without looking at your code, I can tell you that the bug that the so‐called Holly Hack exploits was fixed in Internet Explorer 7.

LostAndFound
07-27-2007, 01:33 AM
ok so how does that help with my problem? any advice?

koyama
07-27-2007, 08:52 AM
ok so how does that help with my problem? any advice?
If someone here should be able to tell what the problem is you will at least have to post the complete CSS. A link would be even better.

ahallicks
07-27-2007, 10:33 AM
I think Arbitrator is saying that the reason it doesn't work in IE 7 is because that hack is being read by IE 7 even though it doesn't need it, which is causing problems.

Try putting the 'Holly Hack' in a conditional statement to apply to IE 6 and below:



<!--[if lt IE 7]>
<style type="text/css">
/* Holly Hack for IE \*/
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
/* End */
</style>
<![endif]-->


and take it out of your main .css

LostAndFound
07-27-2007, 12:12 PM
If someone here should be able to tell what the problem is you will at least have to post the complete CSS. A link would be even better.

well, at the beginning of the topic I've posted a link to where you can find working example + css + js
anyway, I can post it seperately:
css (http://www.javascriptkit.com/script/script2/cssverticalmenu.css)
js (http://www.javascriptkit.com/script/script2/cssverticalmenu.js)

ahallicks I've literally copy pasted what you suggested, un-remarked it, and doesn't work much


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="menu/cssverticalmenu.css" />
<script type="text/javascript" src="menu/cssverticalmenu.js"></script>
[if lt IE 7]>
<style type="text/css">
/* Holly Hack for IE \*/
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
/* End */
</style>
[endif]
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />


then I've completely deleted holly hack from css and index.php, still doesn't work... I think there's something wrong with my tables, but I don't know what exactly.. because, as I've said, when that example given at the top of the page works in IE ... :(

LostAndFound
07-27-2007, 12:25 PM
I've made a bad copy of the page in HTML and upload it to a server

untitled (http://freeweb.t-2.net/gregajo/Menu/index.html)

try in opera, mozilla and then in IE7 to go from main menu to submenu without going with mouse cursor actually on the text but somewhere right from it. It works in opera, mozilla, but not in IE7

Something like this:
http://shrani.si/files/untitled414xkp.jpg



all code is available in the source, and CSS and JS are a post up

LostAndFound
07-27-2007, 10:21 PM
any ideas? :S

Arbitrator
07-30-2007, 10:32 PM
I think Arbitrator is saying that the reason it doesn't work in IE 7 is because that hack is being read by IE 7 even though it doesn't need it, which is causing problems.I was saying that code that may be needed by Internet Explorer 7 is not being read by Internet Explorer 7 because it exploits a flaw in Internet Explorer 6 that was fixed in Internet Explorer 7.


Try putting the 'Holly Hack' in a conditional statement to apply to IE 6 and below:



<!--[if lt IE 7]>
<style type="text/css">
/* Holly Hack for IE \*/
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
/* End */
</style>
<![endif]-->
This is kind of redundant. Youíre serving selectors that only work in Internet Explorer versions prior to 7 using a conditional comment that does the same thing. In other words, either the conditional comment tags or * html exploit should be removed.

However, the above code is not what is needed. I brief test shows that Internet Explorer 7 needs specialized CSS, but isnít getting it because the script is out of date. To be more specific, the ul element needs the float: left declaration for the fly‐outs to work (for reasons that Iím unsure). The li elements require that the hasLayout property [1] be active because Internet Explorer has an issue with rendering hover effects correctly without it (the effect only affects the text). height: 1% exploits a flaw in Internet Explorerís handling of that property; I think that zoom: 1 would be a safer mechanism through which to trigger hasLayout. Thus, you have the following code (not directly tested):


<!--[if IE]>
<style type="text/css" media="screen">
#verticalmenu { float: left; }
#verticalmenu li { zoom: 1; }
</style>
<![endif]-->This code will trigger yet another Internet Explorer bug where spaces will appear between the list items. To get rid of the spaces, you need to remove any spaces between the li elements in the source code; if you need to maintain indentation, I suggest commenting out the spaces using SGML (HTML) comments. Below is an example.


<ul>
<li></li><!--
--><li></li><!--
--><li></li>
</ul>

Floating the list may also cause issues that will need to be worked around.


I've made a bad copy of the page in HTML and upload it to a serverIndeed, your code is poorly written. I suggest that you check it with a validator [2] and replace tables for layout with CSS. I wonít be looking at it again unless you decide to do away with the tables.


http://www.satzansatz.de/cssd/onhavinglayout.html
http://validator.w3.org/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum