Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Vertical list menu: focus keeps losing in IE

    I've tried this particular menu
    http://www.javascriptkit.com/script/...icalmenu.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

  • #2
    Regular Coder zro@rtv's Avatar
    Join Date
    Feb 2005
    Location
    on the network
    Posts
    433
    Thanks
    0
    Thanked 1 Time in 1 Post
    do you have your site live? it would really help to see your implementation.
    Last edited by zro@rtv; 07-26-2007 at 01:25 AM. Reason: typo
    ._-zro
    zro@redtv
    zro.redtv.org

    "If HTML and the Web made all the online documents look like one huge book, RDF, schema, and inference languages will make all the data in the world look like one huge database"
    -Tim Berners-Lee, Weaving the Web, 1999

  • #3
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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">"

    Code:
    <!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:
    Code:
    /* Holly Hack for IE \*/
    * html .glossymenu li { float: left; height: 1%; }
    * html .glossymenu li a { height: 1%; }
    /* End */
    Doesn't seem so Holly

  • #4
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #5
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by LostAndFound View Post
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #7
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok so how does that help with my problem? any advice?
    Last edited by LostAndFound; 07-27-2007 at 12:41 AM.

  • #8
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by LostAndFound View Post
    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.

  • #9
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    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:

    Code:
    <!--[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
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #10
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by koyama View Post
    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
    js

    ahallicks I've literally copy pasted what you suggested, un-remarked it, and doesn't work much
    Code:
    <!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 ...

  • #11
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've made a bad copy of the page in HTML and upload it to a server

    untitled

    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:




    all code is available in the source, and CSS and JS are a post up
    Last edited by LostAndFound; 07-27-2007 at 11:29 AM.

  • #12
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    any ideas? :S

  • #13
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by ahallicks View Post
    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.

    Quote Originally Posted by ahallicks View Post
    Try putting the 'Holly Hack' in a conditional statement to apply to IE 6 and below:

    Code:
    <!--[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):

    Code:
    <!--[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.

    Code:
    <ul>
    	<li></li><!--
    	--><li></li><!--
    	--><li></li>
    </ul>
    Floating the list may also cause issues that will need to be worked around.

    Quote Originally Posted by LostAndFound View Post
    I've made a bad copy of the page in HTML and upload it to a server
    Indeed, 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.

    1. http://www.satzansatz.de/cssd/onhavinglayout.html
    2. http://validator.w3.org/
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •