Help with CSS menu

LGforum wrote:[quotelink="http://www.avacweb.com/t2289p15-help-with-css-menu#22093"]That will be why then.
The character limit of a html page is 64000 characters, I really don't see you hitting that with just a menu. What is the error message your are getting?

The menu is massive. It is basically a HTML list (<ul><il>) but where each item in the list is a HTML table with each cell containing an image and some info. The structure menu (where the majority of the content is embedded through iframes) is already more than 600 HTML lines long. A pretty average size HTML page that is embedded is then 200 HTML lines long. So with 50 HTML files the entire size is more than 10 000 lines of HTML code.

Here's is the structure HTML (I realize there are empty lines that could be deleted to save space, but it wouldn't reduce the size down to below 1500 lines):

Code:

[panda=html]<meta name="viewport" content="width=device-width" /><nav id="menu-wrap">
<ul style="" id="menu">
                                                                                
   <li>
      <a href="">Artsdatabase</a>                                                                                                                         
      <ul>
                                                                                            
         <li>
            <a href="/h325-fisker">FISKER</a>                                                                                                                                     
            <ul>
                                                                                                        
               <li>
                  <a href="http://www.saltvannsprat.com/h326-kirurger">Kirurger</a>                                                                                         
                  <ul>
                                                                                              
                     <div class="iframe">
                     <iframe style="width: 870px; height: 800px;" src="/h412-a-kirurger" frameborder="0"> </iframe>                                     
                     </div>
                                                                                                                        
                  </ul>
                                                                                                                                                                                                     
               </li>
                                                                                                                                                                                                                                            
               <li>
                  <a href="http://www.saltvannsprat.com/h329-gylter">Gylter</a>                                                                                                                                             
                  <ul>
                                                                                                                                                                                    
                     <div class="iframe">
                     <iframe style="width: 870px; height: 800px;" src="/h404-a-gylter" frameborder="0"> </iframe>                                                                     
                     </div>
                                                                                                                                                                                  
                  </ul>
                                                                                                                                                                                                         
               </li>
                                                                                                                                                                                                    
               <li>
                  <a href="http://www.saltvannsprat.com/h327-keisere">Keisere</a>                                                                             
                  <ul>
                                                                                                                                                      
                     <div class="iframe">
                     <iframe style="width: 870px; height: 800px;" src="/h411-a-keisere" frameborder="0"> </iframe>                                                                     
                     </div>
                                                                                                                                                                                    
                  </ul>
                                                                                                                                                                                             
               </li>
                                                                                                                                                                                                    
               <li>
                  <a href="/h332-kutlinger">Kutlinger</a>                                                                             
                  <ul>
                                                                                                                    
                     <div class="iframe">
                     <iframe style="width: 870px; height: 800px;" src="/h418-a-kutlinger" frameborder="0"> </iframe>                                                                     
                     </div>
                                                                                                                                                                                
                  </ul>
                                                                                                                                                                                             
               </li>
                                                                                                                                                                                                    
               <li>
                  <a href="/h333-sommerfuglfisker">Sommerfuglfisk</a>                                                                             
                  <ul>
                                                                                                                      
                     <div class="iframe">
                     <iframe style="width: 870px; height: 800px;" src="/h441-a-sommerfugler" frameborder="0"> </iframe>                                                                     
                     </div>
                                                                                                                                                                                                        
                  </ul>
                                                                                                                                                                                             
               </li>
                                                                                                                                                                                                    
               <li>
                  <a href="/h328-klovnefisker">Klovnefisk</a>                                                                             
                  <ul>
                                                                                                                              
                     <div class="iframe">
                     <iframe style="width: 870px; height: 800px;" src="/h414-a-klovnefisk" frameborder="0"> </iframe>                                                                     
                     </div>
                                                                                                                                                                                    
                  </ul>
                                                                                                                                                                                             
               </li>
                                                                                                                                                                                                    
               <li>
                  <a href="/h334-avtrekkerfisk">Avtrekkere</a>                                                                             
                  <ul>
                                                                                                              
                     <div class="iframe">
                     <iframe style="width: 870px; height: 800px;" src="/h396-a-avtrekkere" frameborder="0"> </iframe>                                                                     
                     </div>
                                                                                                                                                                                    
                  </ul>
                                                                                                                                                                                             
               </li>
                                                                                                                                                                                                    
               <li>
                  <a href="/h340-kardinalfisker">Kardinaler</a>                                                                             
                  <ul>
                                                                                                          
                     <div class="iframe">
                     <iframe style="width: 870px; height: 800px;" src="/h410-a-kardinaler" frameborder="0"> </iframe>                                                                     
                     </div>
                                                                                                                                                                                  
                  </ul>
                                                                                                                                                                                             
               </li>
                                                                                                                                                                                                    
               <li>
                  <a href="/h335-kvabber">Kvabber</a>                                                                             
                  <ul>
                                                                                                                
                     <div class="iframe">
                     <iframe style="width: 870px; height: 800px;" src="/h419-a-kvabber" frameborder="0"> </iframe>                                                                     
                     </div>
                                                                                                                                                                                  
                  </ul>
                                                                                                                                                                                             
               </li>
                                                                                                                                                                            
               <li>
                  <a href="/h330-sjhester">Nålefisk</a>                                                                             
                  <ul>
                                                                                                                            
                     <div class="iframe">
                     <iframe style="width: 870px; height: 800px;" src="/h426-a-nalefisker" frameborder="0"> </iframe>                                                                     
                     </div>
                                                                                                                                                                                    
                  </ul>
                                                                                                                                                                                             
               </li>
                                                                                                                                                                            
               <li>
                       <a href="/h331-anthiaser">Anthias</a>                                                                             
                  <ul>
                                                                                                                        
                     <div class="iframe">
                     <iframe style="width: 870px; height: 800px;" src="/h395-a-anthias" frameborder="0"> </iframe>                                                                     
                     </div>
                                                                                                                                                                                
                  </ul>
                                                                                                                                                                                             
               </li>
                                                                                                                                                                            
               <li>
                  <a href="/h336-mandariner">Mandariner</a>                                                                             
                  <ul>
                                                                                                            
                     <div class="iframe">
                     <iframe style="width: 870px; height: 800px;" src="/h422-a-mandariner" frameborder="0"> </iframe>                                                                     
                     </div>
                                                                                                                                                                                    
                  </ul>
                                                                                                                                                                                             
               </li>
                                                                                                                                                                            
               <li>
                  <a href="/h337-jomfrufisk">Jomfrufisk</a>                                                                             
                  <ul>
                                                              
                     <div class="iframe">
                     <iframe style="width: 870px; height: 800px;" src="/h408-a-jomfrufisk" frameborder="0"> </iframe>                                                                     
                     </div>
                                                                                                                                                                                    
                  </ul>
                                                                                                                                                                                             
               </li>
                                                                                                                                                                            
               <li>
                  <a href="/h338-dverg-abborer">Dvergabborer</a>                                                                             
                  <ul>
                                                            
                     <div class="iframe">
                     <iframe style="width: 870px; height: 800px;" src="/h400-a-dvergabborer" frameborder="0"> </iframe>                                                                     
                     </div>
                                                                                                                                                                                    
                  </ul>
                                                                                                                                                                                             
               </li>
                                                  
               <li>
                  <a href="/h341-haukefisk-og-korallvoktere">Haukefisk</a>                                                                             
                  <ul>
                                                            
                     <div class="iframe">
                     <iframe style="width: 870px; height: 800px;" src="/h406-a-haukefisk" frameborder="0"> </iframe>                                                                     
                     </div>
                                                                                                                                                                                    
                  </ul>
                                                                                                                                                                                             
               </li>
                                                                                                                                                                            
               <li>
                  <a href="/h339-murener-og-al">Murener og ål</a>                                                                             
                  <ul>
                                                          
                     <div class="iframe">
                     <iframe style="width: 870px; height: 800px;" src="/h423-a-murener" frameborder="0"> </iframe>                                                                     
                     </div>
                                                                                                                                                                                
                  </ul>
                                                                                                                                                                                             
               </li>
                                                                                                                                                                            
               <li>
                  <a href="/h342-ildhalekutlinger">Ildhale/ormekutlinger</a>                                                                             
                  <ul>
                                                    
                     <div class="iframe">
                     <iframe style="width: 870px; height: 800px;" src="/h407-a-ildhaler" frameborder="0"> </iframe>                                                                     
                     </div>
                                                                                                                                                                                
                  </ul>
                                                                                                                                                                                             
               </li>
                                                                                                                                                                            
               <li>
                  <a href="/h343-revefjes-og-kaninfisk">Revefjes/kaninfisker</a>                                                                             
                  <ul>
                                      
                     <div class="iframe">
                     <iframe style="width: 870px; height: 800px;" src="/h409-a-kaninfisker" frameborder="0"> </iframe>                                                                     
                     </div>
                                                                                                                                                                              
                  </ul>
                                                                                                                                                                                             
               </li>
                                                                                                                                                                            
               <li>
                  <a href="/h344-tetraodontiformer">Tetraodontiformer</a>                                                                             
                  <ul>
                                  
                     <div class="iframe">
                     <iframe style="width: 870px; height: 800px;" src="/h443-a-tetraodontiformer" frameborder="0"> </iframe>                                                                     
                     </div>
                                                                                                                                                                                    
                  </ul>
                                                                                                                                                                                             
               </li>
                                                                                                                                                                            
               <li>
                  <a href="/h345-langfinne-fisker">Langfinnefisker</a>                                                                             
                  <ul>
                                
                     <div class="iframe">
                     <iframe style="width: 870px; height: 800px;" src="/h420-a-langfinnefisker" frameborder="0"> </iframe>                                                                     
                     </div>
                                                                                                                                                                                    
                  </ul>
                                                                                                                                                                                             
               </li>
                                                                                                                                                                          
               <li>
                  <a href="/h347-skorpionfisker">Skorpionfisker</a>                                                                             
                  <ul>
                          
                     <div class="iframe">
                     <iframe style="width: 870px; height: 800px;" src="/h438-a-skorpionfisker" frameborder="0"> </iframe>                                                                     
                     </div>
                                                                                                                                                                                    
                  </ul>
                                                                                                                                                                                             
               </li>
                                                                                                                                                                          
               <li>
                  <a href="/h346-kjevefisk">Kjevefisker</a>                                                                             
                  <ul>
                        
                     <div class="iframe">
                     <iframe style="width: 870px; height: 800px;" src="/h413-a-kjevefisk" frameborder="0"> </iframe>                                                                     
                     </div>
                                                                                                                                                                                  
                  </ul>
                                                                                                                                                                                             
               </li>
                                                                                                                                                                          
               <li>
                  <a href="/h348-haier-og-rokker">Haier og rokker</a>                                                                             
                  <ul>
                     <div class="iframe">
                     <iframe style="width: 870px; height: 800px;" src="/h405-a-haier" frameborder="0"> </iframe>                                                                     
                     </div>
                                                                                                                                                                                  
                  </ul>
                                                                                                                                                                                             
               </li>
                                                                                                                                                                          
               <li>
                  <a href="/h349-sjabborer">Sjøabborer</a>                                                                             
                  <ul>
                                                  <div class="iframe">
                     <iframe style="width: 870px; height: 800px;" src="/h431-a-sjoabborer" frameborder="0"> </iframe>                                                                     
                     </div>
                                                                                                                                                                                    
                  </ul>
                                                                                                                                                                                             
               </li>
                                                                                                                                                                          
               <li>
                  <a href="/h379-sandabborer">Sandabborer m.m.</a>                                                                             
                  <ul>
                                                  <div class="iframe">
                     <iframe style="width: 870px; height: 800px;" src="/h430-a-sandabborer" frameborder="0"> </iframe>                                                                     
                     </div>
                                                                                                                                                                                  
                  </ul>
                                                                                                                                                                                             
               </li>
                                                                                                                                                                          
               <li>
                  <a href="/h380-flaggermusfisk">Flaggermusfisk</a>                                                                             
                  <ul>
                                                  <div class="iframe">
                     <iframe style="width: 870px; height: 800px;" src="/h402-a-flaggermusfisk" frameborder="0"> </iframe>                                                                     
                     </div>                                                                                                       
                  </ul>
                                                                                                                                                                                             
               </li>
                                                                                                                                                                          
               <li>
                  <a href="/h381-gryntefisk">Gryntefisk</a>                                                                             
                  <ul>
                  <div class="iframe">
                     <iframe style="width: 870px; height: 800px;" src="/h403-a-gryntefisk" frameborder="0"> </iframe>                                                                     
                     </div>                                                                                                                                                             
                  </ul>
                                                                                                                                                                                             
               </li>
                                                                                                                                                                          
               <li>
                  <a href="/h383-papegyefisk">Papegøyefisk</a>                                                                             
                  <ul>
                  <div class="iframe">
                     <iframe style="width: 870px; height: 800px;" src="/h427-a-papegoyefisk" frameborder="0"> </iframe>                                                                     
                     </div>                                                                                                                                                                  
                  </ul>
                                                                                                                                                                                             
               </li>
                                                                                                                                                                          
               <li>
                  <a href="/h389-piskehaler">Piskehaler</a>                                                                             
                  <ul>
                                                                                                                                    
                     <div class="iframe">
                     <iframe style="width: 870px; height: 800px;" src="/h428-a-piskehaler" frameborder="0"> </iframe>                                                                     
                     </div>
                                                                                                                                                                                  
                  </ul>
                                                                                                                                                                                             
               </li>
                                                                                                                                                                          
               <li>
                  <a href="/h388-snappere">Snappere</a>                                                                             
                  <ul>
                                                                                                                                  
                     <div class="iframe">
                     <iframe style="width: 870px; height: 800px;" src="/h439-a-snappere" frameborder="0"> </iframe>                                                                     
                     </div>
                                                                                                                                                                              
                  </ul>
                                                                                                                                                                                             
               </li>
                                                                                                                                                                                                                                            
            </ul>
                                                                                                                                                                                                                               
         </li>
                                                              
         <li>
            <a href="/h361-koraller">KORALLER</a>                                                                                         
            <ul>
                                                                                                                                                                                          
               <li>
                  <a href="/h365-softies">Mykkoraller</a>                                                                                     
                  <ul>
                                                                                                                  
                     <div class="iframe">
                     <iframe style="width: 870px; height: 800px;" src="/h425-a-mykkoraller" frameborder="0"> </iframe>                                                                     
                     </div>
                                                                                                                                                                                    
                  </ul>
                                                                                                                                                                                             
               </li>
                                                                                                                                                                                          
               <li>
                  <a href="/h364-skiver">Skiver</a>                                                                           
                  <ul>
                  <div class="iframe">
                     <iframe style="width: 870px; height: 800px;" src="/h437-a-skiver" frameborder="0"> </iframe>                                                                     
                     </div>                                                                                                                                                                
                  </ul>
                                                                                                                                                                                         
               </li>
                                                                                                                                                                                          
               <li>
                  <a href="/h366-zoantharia">Knapper</a>                                                                           
                  <ul>
                  <div class="iframe">
                     <iframe style="width: 870px; height: 800px;" src="/h415-knapper" frameborder="0"> </iframe>                                                                     
                     </div>                                                                                                                                                                  
                  </ul>
                                                                                                                                                                                           
               </li>
                                                                                                                                                                                          
               <li>
                  <a href="/h362-smapolyppetesteinkoraller">SPS</a>                                                                           
                  <ul>                     
                     <div class="iframe">
                     <iframe style="width: 870px; height: 800px;" src="/h442-a-sps" frameborder="0"> </iframe>                                                                     
                     </div>                                                                                                                                                             
                  </ul>
                                                                                                                                                                                           
               </li>
                                                                                                                                                                    
               <li>
                  <a href="/h363-storpolyppetesteinkoraller">LPS</a>                                                                           
                  <ul>
                  <div class="iframe">
                     <iframe style="width: 870px; height: 800px;" src="/h421-a-lps" frameborder="0"> </iframe>                                                                     
                     </div>                                                                                                                                                                 
                  </ul>
                                                                                                                                                                                           
               </li>
                                                                                                                                                                    
               <li>
                  <a href="/h369-tfk">Lave fjærkoraller</a>                                                                           
                  <ul>
                  <div class="iframe">
                     <iframe style="width: 870px; height: 800px;" src="/h444-a-tvf" frameborder="0"> </iframe>                                                                     
                     </div>                                                                                                                                                                    
                  </ul>
                                                                                                                                                                                           
               </li>
                                                                                                                                                                    
               <li>
                  <a href="/h371-sjfjaer-og-pisker">Sjøfjær- og pisker</a>                                                                           
                  <ul>
                  <div class="iframe">
                     <iframe style="width: 870px; height: 800px;" src="/h432-a-sjofjar" frameborder="0"> </iframe>                                                                     
                     </div>                                                                                                                                                                
                  </ul>
                                                                                                                                                                                           
               </li>
                                                                                                                                                                    
               <li>
                  <a href="/h384-sjvifter-og-grener">Sjøvifter- og grener</a>                                                                           
                  <ul>
                                                
                     <div class="iframe">
                     <iframe style="width: 870px; height: 800px;" src="/h436-a-sjovifter" frameborder="0"> </iframe>                                                                     
                     </div>
                                                                                                                                                                                    
                  </ul>
                                                                                                                                                                                           
               </li>
                                                                                                                                                                                        
            </ul>
                                                                                                                                                                                             
         </li>
                                                              
         <li>
            <a href="/h350-virvellse-dyr">INVERTS</a>                                                                             
            <ul>
                                                                                                                                                                
               <li>
                  <a href="/h353-anemoner">Anemoner</a>                                                                           
                  <ul>
                          
                     <div class="iframe">
                     <iframe style="width: 870px; height: 800px;" src="/h393-a-anemoner" frameborder="0"> </iframe>                                                                     
                     </div>
                                                                                                                                                                                    
                  </ul>
                                                                                                                                                                                           
               </li>
                                                                                                                                                                        
               <li>
                  <a href="/h354-snegler">Snegler</a>                                                                           
                  <ul>
                      
                     <div class="iframe">
                     <iframe style="width: 870px; height: 800px;" src="/h440-a-snegler" frameborder="0"> </iframe>                                                                     
                     </div>
                                                                                                                                                                                
                  </ul>
                                                                                                                                                                                           
               </li>
                                                                                                                                                                      
               <li>
                  <a href="/h352-krabber-og-eremitter">Krabber/eremitter</a>                                                                           
                  <ul>
                              
                     <div class="iframe">
                     <iframe style="width: 870px; height: 800px;" src="/h416-a-krabber" frameborder="0"> </iframe>                                                                     
                     </div><span style="text-decoration: underline;">                                                                                                                                                    </span>   
                  </ul>
                                                                                                                                                                                           
               </li>
                                                                                                                                                                    
               <li>
                  <a href="/h351-skalldyr">Reker/kreps/mantis</a>                                                                           
                  <ul>
                                    
                     <div class="iframe">
                     <iframe style="width: 870px; height: 800px;" src="/h429-a-reker" frameborder="0"> </iframe>                                                                     
                     </div><span style="text-decoration: underline;"></span>                                                                                                                                                     
                  </ul>
                                                                                                                                                                                           
               </li>
                                                                                                                                                                        
               <li>
                  <a href="/h355-sjstjerner">Sjøstjerner</a>                                                                           
                  <ul>
                                                        <div class="iframe">
                          <iframe style="width: 870px; height: 800px;" src="/h435-a-sjostjerner" frameborder="0"> </iframe>                                                                     
                     </div>                 
                  </ul>
                                                                                                                                                                                           
               </li>
                                                                                                                                                                      
               <li>
                  <a href="/h356-krakeboller">Kråkeboller</a>                                                                           
                  <ul>
                                                        <div class="iframe">
                          <iframe style="width: 870px; height: 800px;" src="/h417-a-krakeboller" frameborder="0"> </iframe>                                                                     
                     </div>   
                                                                                                                                                                                    
                  </ul>
                                                                                                                                                                                           
               </li>
                                                                                                                                                                  
               <li>
                  <a href="/h357-sjplser-og-epler">Sjøpølser/epler</a>                                                                           
                  <ul>
                  <div class="iframe">
                          <iframe style="width: 870px; height: 800px;" src="/h433-a-sjopolser" frameborder="0"> </iframe>                                                                     
                     </div>                                                                                                                                                                    
                  </ul>
                                                                                                                                                                                           
               </li>
                                                                                                                                                                  
               <li>
                  <a href="/h358-muslinger">Muslinger</a>                                                                           
                  <ul>
                       <div class="iframe">
                          <iframe style="width: 870px; height: 800px;" src="/h424-a-muslinger" frameborder="0"> </iframe>                                                                     
                     </div>                                                                                                                                                             
                  </ul>
                                                                                                                                                                                           
               </li>
                                                                                                                                                                  
               <li>
                  <a href="/h359-blekksprut-og-akkarer">Blekksprut og akkar</a>                                                                           
                  <ul>
                  <div class="iframe">
                          <iframe style="width: 870px; height: 800px;" src="/h398-a-blekksprut" frameborder="0"> </iframe>                                                                     
                     </div>                                                                                                                                                                    
                  </ul>
                                                                                                                                                                                           
               </li>
                                                                                                                                                                  
               <li>
                  <a href="/h360-sjpung-og-tunikater">Sjøpunger/svamper</a>                                                                           
                  <ul>
                  <div class="iframe">
                          <iframe style="width: 870px; height: 800px;" src="/h434-a-sjopunger" frameborder="0"> </iframe>                                                                     
                     </div>                                                                                                                                                                 
                  </ul>
                                                                                                                                                                                           
               </li>
                                                                                                                                                                  
               <li>
                  <a href="/h370-havbrsteormer">Canalipalpata</a>                                                                           
                  <ul>
                  <div class="iframe">
                          <iframe style="width: 870px; height: 800px;" src="/h399-a-canalipalpata" frameborder="0"> </iframe>                                                                     
                     </div>                                                                                                                                                                    
                  </ul>
                                                                                                                                                                                           
               </li>
                                                                                                                                                                  
               <li>
                  <a href="/h385-aciculata">Aciculata</a>                                                                           
                  <ul>
                  <div class="iframe">
                          <iframe style="width: 870px; height: 800px;" src="/h391-a-aciculata" frameborder="0"> </iframe>                                                                     
                     </div>                                                                                                                                                                      
                  </ul>
                                                                                                                                                                                           
               </li>
                                                                                                                                                                  
               <li>
                  <a href="/h382-sjliljer-og-fjaerstjerner">Sjøliljer/fjærstjerner</a>                                                                           
                  <ul>
                  <div class="iframe">
                          <iframe style="width: 870px; height: 800px;" src="/h401-a-fjarstjerner" frameborder="0"> </iframe>                                                                     
                     </div>                                                                                                                                                                  
                  </ul>
                                                                                                                                                                                           
               </li>
                                                                                                                                                              
            </ul>
                                                                                                                                                                                                           
         </li>
                                                              
         <li>
         <a href="">IKKE-DYR</a> 
                          <ul>
                                   <li>
                  <a href="/h394-alger">Alger</a>                                                                                         
                          <ul>                                                                         
                     <div class="iframe">
                     <iframe style="width: 870px; height: 800px;" src="/h392-a-alger" frameborder="0"> </iframe>                                     
                     </div>                                                                                                      
                          </ul>                                                                                                                                                                                 
                       </li>

                                   <li>
                  <a href="/h387-bakterier">Bakterier</a>                                                                                         
                          <ul>                                                                         
                     <div class="iframe">
                     <iframe style="width: 870px; height: 800px;" src="/h397-a-bakterier" frameborder="0"> </iframe>                                     
                     </div>                                                                                                   
                          </ul>
                                                                                                                                                                                                     
                     </li>
                          </ul>
         </li>
                                                              
                                                      
      </ul>
                                                                                                                                                                                                                                                                                                         
   </li>
                                                
   <li style="">
                              <a href="/h4-korall-id-start" target="_blank">Korall-ID</a>                                                                                       
   </li>
                                                                                            
                                                      
</ul></nav>

When I try to save the entire menu in a HTML file I get an error message saying the code couldn't be saved because it is too long. This is the exact message:

Html code is too long.

Basically, if the length surpasses about 1500 lines I get the error message.

Bloodbath wrote:

Loading 50 pages with each the same CSS styles is redundant. Just use the FM stylesheet to include all of your CSS, and create a new JavaScript that contains all of your minified JS.

I am trying to do this. The problem is that I can't get the JS to work when I add it to the JS console. Here is the script as it is on one of the HTML pages that are embedded through <iframe>:

Code:

[panda=js]$(function() {
            var data = {

"Briareum sp." : 'Fóring: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Farlig: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Hardførhet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Aggressivitet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br><strong>Vanskelighet: </strong><img align="right"  src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br><hr><em><strong><div align="center"><a target="_parent" href="http://www.saltvannsprat.com/h386-viktig" target="_blank">Forklaring</a></strong></div></em>',

"Clavularia sp." : 'Fóring: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Farlig: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Hardførhet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Aggressivitet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br><strong>Vanskelighet: </strong><img align="right"  src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br><hr><em><strong><div align="center"><a target="_parent" href="http://www.saltvannsprat.com/h386-viktig" target="_blank">Forklaring</a></strong></div></em>',

    };
var cells = document.getElementById('data-table').getElementsByTagName('td'), i = 0, c;
for(; (c = cells[i++]); ) {
    var id = c.getAttribute('rel');
    if(data[id]) {
        var x = document.createElement('div');
        x.className = 'popup-data';
        x.innerHTML = data[id];
        c.appendChild(x);
    }
}
})();

When I save this script and hook off "All the Pages", it doesn't work and it also causes my Latest Topics Widget to malfunction (it stops scrolling and is enlarged). When I just hook off "In the Subforums" and/or "In the Topics", it simply doesn't work (bit doesn't seem to interfere with the Latest Topics Widget. I suppose the script isn't written to work off the pages where the table is found? The script was written by @LGforum, btw

By the way, you can all see the menu on my forum now (www.saltvannsprat.com). I have disabled all but one of the <iframe> codes, so that only one of these pages are embedded (the one found under FISKER->KIRURGER in the menu). With all but one disabled, the menu seems to work fine.

Agathos wrote:[quotelink="http://www.avacweb.com/t2289p15-help-with-css-menu#22097"]

Bloodbath wrote:

Loading 50 pages with each the same CSS styles is redundant. Just use the FM stylesheet to include all of your CSS, and create a new JavaScript that contains all of your minified JS.

I am trying to do this. The problem is that I can't get the JS to work when I add it to the JS console. Here is the script as it is on one of the HTML pages that are embedded through <iframe>:

Code:

[panda=js]$(function() {
            var data = {

"Briareum sp." : 'Fóring: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Farlig: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Hardførhet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Aggressivitet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br><strong>Vanskelighet: </strong><img align="right"  src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br><hr><em><strong><div align="center"><a target="_parent" href="http://www.saltvannsprat.com/h386-viktig" target="_blank">Forklaring</a></strong></div></em>',

"Clavularia sp." : 'Fóring: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Farlig: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Hardførhet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Aggressivitet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br><strong>Vanskelighet: </strong><img align="right"  src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br><hr><em><strong><div align="center"><a target="_parent" href="http://www.saltvannsprat.com/h386-viktig" target="_blank">Forklaring</a></strong></div></em>',

    };
var cells = document.getElementById('data-table').getElementsByTagName('td'), i = 0, c;
for(; (c = cells[i++]); ) {
    var id = c.getAttribute('rel');
    if(data[id]) {
        var x = document.createElement('div');
        x.className = 'popup-data';
        x.innerHTML = data[id];
        c.appendChild(x);
    }
}
})();

When I save this script and hook off "All the Pages", it doesn't work and it also causes my Latest Topics Widget to malfunction (it stops scrolling and is enlarged). When I just hook off "In the Subforums" and/or "In the Topics", it simply doesn't work (bit doesn't seem to interfere with the Latest Topics Widget. I suppose the script isn't written to work off the pages where the table is found? The script was written by @LGforum, btw

There are possibilities for you to debug your code in Chrome. First, your code gets compressed when loaded by forumotion to reduce loading times. This leads to the the conclusion that either:
a) You have a syntax error in your script
b) Your script is producing "undefined" for "document.getElementById('data-table')" which will cause the entire script to break

I believe option b) is the issue here.

Agathos wrote:[quotelink="http://www.avacweb.com/t2289p15-help-with-css-menu#22096"]

LGforum wrote:[quotelink="http://www.avacweb.com/t2289p15-help-with-css-menu#22093"]That will be why then.
The character limit of a html page is 64000 characters, I really don't see you hitting that with just a menu. What is the error message your are getting?

The menu is massive. It is basically a HTML list (<ul><il>) but where each item in the list is a HTML table with each cell containing an image and some info. The structure menu (where the majority of the content is embedded through iframes) is already more than 600 HTML lines long. A pretty average size HTML page that is embedded is then 200 HTML lines long. So with 50 HTML files the entire size is more than 10 000 lines of HTML code.

Here's is the structure HTML (I realize there are empty lines that could be deleted to save space, but it wouldn't reduce the size down to below 1500 lines):

CODE OMITTED

When I try to save the entire menu in a HTML file I get an error message saying the code couldn't be saved because it is too long. This is the exact message:

Html code is too long.

Basically, if the length surpasses about 1500 lines I get the error message.

Alone in that HTML you have more than 1000 unnecessary white-space characters. While they improve readability, they also bloat up the file size and don't actually do anything for the rendering because the HTML parser removes white-space anyway. Just try removing all superfluous white-space and see if you still reach the limit of 64000 white-space chars.

You can also simplify your HTML: give the UL a unique ID and remove unnecessary attritbute tags. '<iframe frameborder="0">' can be rewritten to '<iframe seamless>' if I remember correctly (though it's an HTML5 attr, so it might not work in older browsers) &em; basically, you have to make a choice between improving loading times for users using HTML5 browsers and using less readable code or load the page slower and support older browsers.

In modern day it's almost always the better choice to go with new, standardized code which will work across every new browser and to force the user to download it than to maintain site functionality for antiquated browsers. Well, that's my opinion at least, and I'd do that over writing legacy code for IE6.

Bloodbath wrote:[quotelink="http://www.avacweb.com/t2289p15-help-with-css-menu#22099"]

Agathos wrote:[quotelink="http://www.avacweb.com/t2289p15-help-with-css-menu#22097"]

Bloodbath wrote:

Loading 50 pages with each the same CSS styles is redundant. Just use the FM stylesheet to include all of your CSS, and create a new JavaScript that contains all of your minified JS.

I am trying to do this. The problem is that I can't get the JS to work when I add it to the JS console. Here is the script as it is on one of the HTML pages that are embedded through <iframe>:

Code:

[panda=js]$(function() {
            var data = {

"Briareum sp." : 'Fóring: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Farlig: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Hardførhet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Aggressivitet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br><strong>Vanskelighet: </strong><img align="right"  src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br><hr><em><strong><div align="center"><a target="_parent" href="http://www.saltvannsprat.com/h386-viktig" target="_blank">Forklaring</a></strong></div></em>',

"Clavularia sp." : 'Fóring: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Farlig: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Hardførhet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br>Aggressivitet: <img align="right" src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br><strong>Vanskelighet: </strong><img align="right"  src="http://i624.photobucket.com/albums/tt328/SoulMonster/Bars/Easy.jpg" /><br><hr><em><strong><div align="center"><a target="_parent" href="http://www.saltvannsprat.com/h386-viktig" target="_blank">Forklaring</a></strong></div></em>',

    };
var cells = document.getElementById('data-table').getElementsByTagName('td'), i = 0, c;
for(; (c = cells[i++]); ) {
    var id = c.getAttribute('rel');
    if(data[id]) {
        var x = document.createElement('div');
        x.className = 'popup-data';
        x.innerHTML = data[id];
        c.appendChild(x);
    }
}
})();

When I save this script and hook off "All the Pages", it doesn't work and it also causes my Latest Topics Widget to malfunction (it stops scrolling and is enlarged). When I just hook off "In the Subforums" and/or "In the Topics", it simply doesn't work (bit doesn't seem to interfere with the Latest Topics Widget. I suppose the script isn't written to work off the pages where the table is found? The script was written by @LGforum, btw

There are possibilities for you to debug your code in Chrome. First, your code gets compressed when loaded by forumotion to reduce loading times. This leads to the the conclusion that either:
a) You have a syntax error in your script
b) Your script is producing "undefined" for "document.getElementById('data-table')" which will cause the entire script to break

I believe option b) is the issue here.

But the script works perfectly when it is added to the end of each of the 50 or so HTML files. It does not work when I remove it form these 50 files and instead add it as a separate JS file using the JS console in FM. Then it simply doesn't work anymore. So I assume it ahs been written to work in one context (when situated on the very same page it is supposed to work) and not in another (when stored in a separate JS file and called upon to work "On All The Pages").

Bloodbath wrote:Alone in that HTML you have more than 1000 unnecessary white-space characters. While they improve readability, they also bloat up the file size and don't actually do anything for the rendering because the HTML parser removes white-space anyway. Just try removing all superfluous white-space and see if you still reach the limit of 64000 white-space chars.

Do you mean doing this (removing empty characters at the start of each line, basically aligning the code to the left):

Code:

[panda=html]<ul style="" id="menu">                                                                 
<li>
<a href="">Artsdatabase</a>                                                                                                                         
<ul>                                                                   
<li>

Or this (removing all internal empty characters throughout the code, creating a wall of characters):

Code:

[panda=html]<ul style="" id="menu"><li><a href="">Artsdatabase</a><ul><li>

The first is fine because it still allows me to easily make changes to and navigate the HTML menu (which I will have to do whenever I add a new fish to the database, which happens frequently), the latter - which is basically just a wall of text -- becomes a bit too incomprehensible for me to work with, I am afraid. Copying, deleting, adding, changing, sections of the latter option would be difficult and with a high risk of making mistakes.

I think I will try to keep the menu in different files, for now, and see if the problems with the sluggishness disappears if I can take out the CSS and JS. But then I need to get the JS to work from outside the files.

I am referring to the second option, yes. You need not work with the compressed file, you should just deploy it. For example, it is very common practice to use this with JavaScript:
http://code.jquery.com/jquery-1.10.2.js
http://code.jquery.com/jquery-1.10.2.min.js

Both of them work the same.

I made the javascript work from outside of the pages!

The problem was with this part:

Code:

[panda=js]document.getElementById('data-table')

Since my menu consisted of multiple tables all names "data-table", the script would only work on the first of these. Now I have changed this line to:

Code:

[panda=js]document.getElementById('menu-wrap')

Using the name "menu-wrap" that is in the nav tag that encloses the whole menu.

But the script still causes some conflict with the "Recent Topics Widget"

Heh. The JS script file only works on menu content that is not embedded through <iframes>, even when that content is found in seperate HTML files on my FM forum. When the content is found in seperate HTML files and embedded through <iframes>, the script for some reason won't work on it.

I made most of the new menu in notepad without <iframes>, so all content was in the menu itself, and then used http://www.textfixer.com/html/compress-html-compression.php for compressing the HTML codes (removing all empty characters and lines). The code was still too large for FM to handle

So to summarize:

1. I am NOT able to condense the menu to overcome FM's HTML code limitation. This means I have to split it up into separate files. The only way to do this as far as I know, is to separate into multiple HTML files that are then embedded using <iframes>.

2. To display the individual HTML files correctly in the iframes, I have to save them without using my forum's "header and footer" (otherwise I would see my banner, widgets, etc in the iframes). I am afraid that by doing this, "external" CSS and JS won't work on the iframes. I fear I have to include the CSS and the JS internally (within the individual files).

3. When I do embed the indivual files using iframes, and they each contain quite a bit of CSS and JS, as well as numerous images, my forum runs slowly because each page refresh and loading of new pages, would mean that the browser would have to load not only whatever forum page is wanted, but all the 50+ iframe HTML pages, too, with 50+ copies of the same CSS and JS.

Agathos wrote:2. To display the individual HTML files correctly in the iframes, I have to save them without using my forum's "header and footer" (otherwise I would see my banner, widgets, etc in the iframes). I am afraid that by doing this, "external" CSS and JS won't work on the iframes. I fear I have to include the CSS and the JS internally (within the individual files).

I have been trying to get this to work, but my conclusion so far is that javascripts does not work on content in iframes. Can anyone confirm this?

@Agathos : Is this still needed? Solved?