Help pls! Good CSS forum needed

**Poco** · 10-22-2004, 09:56 AM

Hello everybody!

I know that this is a Flash-site, of course, but anyway I have to try: Don't you know some GOOD css forum? I have a code (menu by CSS) which simply makes me go insane and I can't figure it out. Any ideas greatly appreciated!
Thank you!

Poco

**the sherrif** · 10-22-2004, 11:57 AM

why dont you read some css tutorials? or post it here if you dont understand it. css isnt axactly hard.

**Poco** · 10-22-2004, 01:52 PM

Okidoki, worthy a shot. I have a quite big problem, I simply can't make it work fine in IE (as usually... it works fine in Opera, Mozilla and Firefox) This is supposed to be a menu, take a look at the code. It works fine if I move the mouse over it from the left side only. If I move it from right, it doesn't interact till I reach the link "Nendeto". Then if I move it straight down (from link "Nendeto" to link "subA") the menu simply jumps back. The only way how to target the submenu's links is to move the mouse from the left side over Nendeto, go down on the left side next to the links of submenu and then move it to one of the submenu's links. Here is the code of HTML:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>Untitled Document</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<link rel="stylesheet" type="text/css" href="style.css"> 
<script type="text/javascript" language="javascript1.4"> 
startList = function() { 
   if (document.all&&document.getElementById) { 
      navRoot2 = document.getElementById("submenu");//moje 
      navRoot = document.getElementById("nav"); 
      for (i=0; i<navRoot.childNodes.length; i++) { 
         node = navRoot.childNodes[i]; 
         if (node.nodeName=="LI") { 
            node.onmouseover=function() { 
               this.className+=" over"; 
            } 
              node.onmouseout=function() { 
                 this.className=this.className.replace(" over", ""); 
            } 
         } 
      }       
      for (i=0; i<navRoot2.childNodes.length; i++) { 
         nodex = navRoot2.childNodes[i]; 
         if (nodex.nodeName=="LI") { 
            nodex.onmouseover=function() { 
               this.className+=" over"; 
            } 
              nodex.onmouseout=function() { 
                 this.className=this.className.replace(" over", ""); 
            } 
         } 
      } 
   } 
} 
window.onload=startList; 
</script> 

</head> 

<body> 
   <div id="mainpage"> 
      <div id="menu"> 
         <ul id="nav"> 
            <li><a href="#">Nendeto</a> 
               <ul id="submenu"> 
                  <li><a href="#">SubA</a></li> 
                  <li><a href="#">SubB</a></li> 
                  <li><a href="#">SubC</a></li> 
               </ul> 
            </li> 
            <li><a href="#">Menu2</a></li> 
            <li><a href="#">Menu3</a></li> 
         </ul> 
      </div> 
   </div> 
</body> 
</html>

and the CSS:

Code:

body { 
   background: #CCCCCC url('pics/backline.jpg') fixed; 
   margin:0; 
   padding:0; 
   font-family:Arial, Helvetica, sans-serif; 
   } 
    
#menu { 
   width:150px; 
   height:500px; 
   background-color:#CCCCCC; 
   border-right:1px dashed; 
   border-right-color:#666666; 
   text-align:left; 
   } 

ul li { 
   display:block; 
   list-style-type: none; 
   border-top:1px solid #666666;    
   text-indent:15px; 
   } 

ul#submenu  li { 
   visibility:hidden; 
   display:none; 
   } 
    
#menu ul li:hover ul#submenu li, #menu ul li.over ul#submenu li { 
   visibility: visible; 
   display:list-item;    
   background-color:FF9900; 
   list-style-type:circle; 
   list-style-position:inside; 
   border-top:1px solid; 
   border-top-color:#666666; 
   padding: 1px 30px 1px 15px;    
   } 
    
li:hover ul#submenu li:hover, li.over ul#submenu li.over { 
   background: #FF9900; 
   } 
    
ul { 
   margin:0; 
   padding:0; 
   } 

a { 
   color:#000000; 
   font-family:Verdana, Arial, Helvetica, sans-serif; 
   font-weight:bold; 
   font-size:14px; 
   text-decoration:none; 
   } 
    
a:visited { 
   color:#000000; 
   } 
       
#mainpage { 
   position:absolute; 
   top: 70px; 
   left: 2%; 
   right: 2%; 
   width:95.6%; 
   background-color: #ffffff; 
}

Any help would be greatly appreciated! Thank you!

**the sherrif** · 10-22-2004, 02:33 PM

if this works in firefox then this probably isnt an issue of the css working, but a problem in how IE isnt rendering the page properly. Its css support isnt fully standards compliant, therefore it isnt easy to spot the problem.

**Poco** · 10-22-2004, 02:39 PM

Well, of course I know that, but try to explain and convince 90% users of PC to change their lovely IE for something else...

I am sure there is a way around this and can be solved by CSS. Once I saw a nice example of something similar but of course I didn't keep the files. So anybody knows a good css forum?

**the sherrif** · 10-22-2004, 02:47 PM

theres about 5 here

Thread: Help pls! Good CSS forum needed

Thread Tools

Display

Help pls! Good CSS forum needed

Posting Permissions