Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > html css > answers

IE 8 issue in li ul menu

omerbutt's Avatar
Needs Regular Fix
  
Join Date: Nov 2006
Location: Earth Obviously :P
Posts: 344
#1: Jun 17 '09
hi all,
i have a menu based on <ul> and <li> it is working fine on mozilla all versions IE 6 and 7 all versions and google chrome ver 2.0.172.31 , the only problem is occuring is with the IE8 here is the link ,or you can see the attachment with of the screen grab.
HERE IS THE CODE FOR THAT MENU
Expand|Select|Wrap|Line Numbers
  1. .suckerdiv ul{
  2.     font-family: Arial, Helvetica, sans-serif;
  3.       font-size: 11px;
  4.     margin-left: 0px;
  5.     margin-right:0px;
  6.     margin-top:0px;
  7.     margin-bottom:0px;
  8.     padding-left:0px;
  9.     padding-right:0px;
  10.     padding-top:0px;
  11.     padding-bottom:0px;
  12.     list-style-type: none;
  13.     width: 201px; /* Width of Menu Items */
  14.     border-bottom: 1px solid #592442;
  15.     background: #6F2F53;
  16. }
  17.  
  18. .suckerdiv ul li{
  19.     font-family: Arial, Helvetica, sans-serif;
  20.       font-size: 11px;
  21.     position: relative;
  22. }
  23.  
  24. /*Sub level menu items */
  25. .suckerdiv ul li ul{
  26.     font-family: Arial, Helvetica, sans-serif;
  27.       font-size: 11px;
  28.     position: absolute;
  29.     width: 150px; /*sub menu width*/
  30.     top: 0;
  31.     visibility: hidden;
  32. }
  33.  
  34. /* Sub level menu links style */
  35. .suckerdiv ul li a{
  36.     font-family: Arial, Helvetica, sans-serif;
  37.       font-size: 11px;
  38.     display: block;
  39.     overflow: auto; /*force hasLayout in IE7 */
  40.     color: #FFFFFF;
  41.     text-decoration: none;
  42.     background: #6F2F53;
  43.     padding: 3px 5px;
  44.     border: 1px solid #592442;
  45.     border-bottom: 0;
  46. }
  47.  
  48. .suckerdiv ul li a:visited{
  49.     font-family: Arial, Helvetica, sans-serif;
  50.       font-size: 11px;
  51.     color: #fff;
  52. }
  53.  
  54. .suckerdiv ul li a:hover{
  55.     font-family: Arial, Helvetica, sans-serif;
  56.       font-size: 11px;
  57.     background-color: #6F2F53;
  58.     color: #FF0090;
  59. }
  60.  
  61. .suckerdiv .subfolderstyle{
  62.     font-family: Arial, Helvetica, sans-serif;
  63.       font-size: 11px;
  64.     text-align:left;
  65.     padding-left:50px;
  66.     background: url(../images/arrow.gif) no-repeat center left;
  67. }
  68. /* Holly Hack for IE \*/
  69. * html .suckerdiv ul li { float: left; height: 1%; }
  70. * html .suckerdiv ul li a { height: 1%; }
  71. /* End */
  72.  
Expand|Select|Wrap|Line Numbers
  1. var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas
  2.  
  3. function buildsubmenus(){
  4. for (var i=0; i<menuids.length; i++){
  5.   var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
  6.     for (var t=0; t<ultags.length; t++){
  7.     ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
  8.         if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
  9.             ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
  10.         else //else if this is a sub level submenu (ul)
  11.           ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
  12.     ultags[t].parentNode.onmouseover=function(){
  13.     this.getElementsByTagName("ul")[0].style.display="block"
  14.     }
  15.     ultags[t].parentNode.onmouseout=function(){
  16.     this.getElementsByTagName("ul")[0].style.display="none"
  17.     }
  18.     }
  19.         for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
  20.         ultags[t].style.visibility="visible"
  21.         ultags[t].style.display="none"
  22.         }
  23.   }
  24. }
  25.  
  26. if (window.addEventListener)
  27. window.addEventListener("load", buildsubmenus, false)
  28. else if (window.attachEvent)
  29. window.attachEvent("onload", buildsubmenus)
  30.  
Expand|Select|Wrap|Line Numbers
  1.             <?
  2.             function createMenu($parId){
  3.                 $q="select 
  4.                     c.cat_id,
  5.                     c.parent_id,
  6.                     cd.cat_name
  7.                 from
  8.                     ".CATEGORY." c,
  9.                     ".CATEGORY_DESCRIPTION." cd
  10.                 where
  11.                     (c.cat_id=cd.cat_id)
  12.                 and
  13.                     (c.parent_id='$parId')";
  14.                 $r=execute($q);
  15.                 while($row_cat=mysql_fetch_array($r)){
  16.                     $q_s="select c.cat_id, cd.cat_name from ".CATEGORY." c, ".CATEGORY_DESCRIPTION." cd where (c.cat_id=cd.cat_id) and c.parent_id='$row_cat[cat_id]'";
  17.                     $r_s=execute($q_s);
  18.                     $noRows=mysql_num_rows($r_s);
  19.                     if($noRows > 0){?>
  20.                         <li><a href="javascript:ProductList(<?=$row_cat['cat_id'];?>);" onclick=""><?=$row_cat['cat_name'];?></a>
  21.                             <ul>
  22.                                 <li><? createMenu($row_cat['cat_id']);?></li>
  23.                             </ul>
  24.                         </li>
  25.                     <? }else{?>
  26.                         <li><a href="javascript:ProductList(<?=$row_cat['cat_id'];?>);" onclick=""><?=$row_cat['cat_name'];?></a></li><? 
  27.                     }
  28.                 }//end while
  29.             }?>
  30.             <div class="suckerdiv">
  31.                 <ul id="suckertree1">
  32.                 <? createMenu(0);?>
  33.                 </ul>
  34.             </div>
  35.  
if any one can guide.
regards,
Omer Aslam
Attached Thumbnails
screen-grab.jpg  

Markus's Avatar
Moderator
  
Join Date: Jun 2007
Location: York, England, with wolves.
Posts: 4,949
#2: Jun 17 '09

re: IE 8 issue in li ul menu

The problem being?
omerbutt's Avatar
Needs Regular Fix
  
Join Date: Nov 2006
Location: Earth Obviously :P
Posts: 344
#3: Jun 17 '09

re: IE 8 issue in li ul menu

Quote:

Originally Posted by Markus View Post

The problem being?

kindly see the screen grab and the live site you will notice the error in the left menu the sub-categories menu is appearing under the main-category menu where as it should be hidden and should appear when we hover the main-category
reagrds,
OMer Aslam
Markus's Avatar
Moderator
  
Join Date: Jun 2007
Location: York, England, with wolves.
Posts: 4,949
#4: Jun 17 '09

re: IE 8 issue in li ul menu

First of all, validate your page (list of errors here)

Note: you have an error in your <meta http-equiv... charset=charset=utf-8> I think you can see the problem there.
Dormilich's Avatar
Moderator
  
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,660
#5: Jun 17 '09

re: IE 8 issue in li ul menu

just out of interest, why do you force Javascript on the Suckerfish menu? (except for IE, it usually works without Javascript)
omerbutt's Avatar
Needs Regular Fix
  
Join Date: Nov 2006
Location: Earth Obviously :P
Posts: 344
#6: Jun 23 '09

re: IE 8 issue in li ul menu

Quote:

Originally Posted by Markus View Post

First of all, validate your page (list of errors here)

Note: you have an error in your <meta http-equiv... charset=charset=utf-8> I think you can see the problem there.

thanks markus good thing pointed out as i fixed all my pages i found out the error it was where i was creating the menu i was calling the creatmenu () inside the li instead of ul and there where the creatmenu () function was written it started with an li too so this is al fixed for IE 8 there was no javascript issue as dormilich was saying
Reply

« previous question | next question »

Similar HTML / CSS bytes

/bytes/development

/bytes/it

Forums
Visit our community forums for general discussions and latest on Bytes

Our staff and community areas have moved to bytes.com/forums/

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,501 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved