title: Can sIFR and LavaLamp work together?
body: <p>I am having a heck of a time getting sIFR and LavaLamp to play nice together.</p>
  
  <p>A brief history of LavaLamp:</p>
  
  <p>LavaLamp: a jQuery plugin</p>
  
  <p>started up by</p>
  
  <ol>
  <li>load the LavaLamp and jQuery
  supporting JS files add the LavaLamp
  css</li>
  <li>create an unsorted list and add the
  class "lavaLamp" to it</li>
  <li>add list memebers that contain
  anchor tags to the urls</li>
  </ol>
  
  <p>Example CSS</p>
  
  <pre><code>.lavaLamp {
          position: absolute;
          height: 29px;
          padding: 15px;
          margin: 24px 0 0 0;
          }
  
  
  
  .lavaLamp li {
  
          float: left;
          list-style: none;
          }
  
  
  
  .lavaLamp li.back {
  
          background: url(../images/lava.png) no-repeat right -30px
          width: 9px;
          height: 30px;
          z-index: 8;
          position: absolute;
          }
  
  
  
  .lavaLamp li.back .left {
  
          background: url(../images/lava.png) no-repeat top left
          height: 30px;
          margin-right: 9px;
          }
  
  
  
  .lavaLamp li a {
  
          font-size: 20px;
          position: relative;
          overflow: hidden;
          text-decoration: none;
          color: #000000;
          outline: none;
          text-align: center;
          height: 30px;
          top: 4px;
          z-index: 10;
          letter-spacing: 0;
          float: left;
          display: block;
          padding:0px 10px;
          }
  </code></pre>
  
  <p>Example HTML:</p>
  
  <blockquote>
  <pre><code>&lt;div id="menu"&gt;
     &lt;ul class="lavaLamp"&gt;
        &lt;li&gt;&lt;a href="somewhere.html"&gt;Some Where&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="somewhereelse.html"&gt;Some Where Else&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  </blockquote>
  
  <p>The initial attempts to get sIFR to initialize the menu was to set the selector to "selector: '#menu'. This did not work at all. Slowly I started moving further and further into the nest of the div.</p>
  
  <p>Finally, when I did: selector: '.lavaLamp li a', the LavaLamp initialized correctly and started to display the fonts and roll overs correctly.</p>
  
  <p>The issues:</p>
  
  <ol>
  <li>The anchor tags do not work when
  clicking directly on the text that
  should be active. However, if you
  click on the far left or right of
  the image LavaLamp uses as the
  rollover, it will click the anchor.</li>
  <li>When you roll over other items in
  the menu, some times when you mouse
  off, the last rolled over stays
  highlighted, rather than returning
  to the currently active menu item.</li>
  </ol>
  
  <p>Thanks in advance for any help...</p>
  
  <p>-A</p>