1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Included code on Page node causes header to drop to bottom

Discussion in 'Troubleshooting and Problems' started by GofD, Feb 17, 2011.

  1. GofD

    GofD Well-Known Member

    I've narrowed this issue down to a Featured Content slider that I'm working on for a Page node, but I can't seem to find what's wrong. Here's what it looks like:

    page-borked-xf.png
    Here's the code:

    HTML:
    <div id="featuredContent">
              <ul class="ui-tabs-nav">
                <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="img/slider/image-1-small.jpg" alt="" /><span>15 Fantastic ... for your Kitchen</span></a></li>
                <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="img/slider/image-2-small.jpg" alt="" /><span>20 Amazing Cabinet Mods You'll Envy</span></a></li>
                <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="img/slider/image-3-small.jpg" alt="" /><span>12 Traditional Kitchens to Blow your Mind</span></a></li>
                <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="img/slider/image-4-small.jpg" alt="" /><span>Create a Modern Kitchen for Less</span></a></li>
              </ul>
            <!-- First Content -->
            <div id="fragment-1" class="ui-tabs-panel" style="">
                <img src="img/slider/image-1.jpg" alt="" />
                <div class="info" >
                    <h2><a href="#" >15 Fantastic ... for your Kitchen</a></h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#" >read more</a></p>
                </div>
            </div>
            <!-- Second Content -->
            <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
                <img src="img/slider/image-2.jpg" alt="" />
                <div class="info" >
                    <h2><a href="#" >20 Amazing Cabinet Mods You'll Envy</a></h2>
                    <p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Suscipit....<a href="#" >read more</a></p>
                </div>
            </div>
            <!-- Third Content -->
            <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
                <img src="img/slider/image-3.jpg" alt="" />
                <div class="info" >
                    <h2><a href="#" >12 Traditional Kitchens to Blow your Mind</a></h2>
                    <p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. <a href="#" >read more</a></p>
                </div>
            </div>
            <!-- Fourth Content -->
            <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
                <img src="img/slider/image-4.jpg" alt="" />
                <div class="info" >
                    <h2><a href="#" >Create a Modern Kitchen for Less</a></h2>
                    <p>Quisque sed orci ut lacus viverra interdum ornare sed est. <a href="#" >read more</a></p>
                </div>
            </div>
            </div>
        </div>
    There's also extensive css:

    Code:
    #featured{
        width:400px;
        padding-right:250px;
        position:relative;
        border:5px solid #ccc;
        height:250px;
        background:#fff;
    }
    #featured ul.ui-tabs-nav{
        position:absolute;
        top:0; left:400px;
        list-style:none;
        padding:0; margin:0;
        width:250px;
    }
    #featured ul.ui-tabs-nav li{
        padding:1px 0; padding-left:13px;
        font-size:12px;
        color:#666;
    }
    #featured ul.ui-tabs-nav li img{
        float:left; margin:2px 5px;
        background:#fff;
        padding:2px;
        border:1px solid #eee;
    }
    #featured ul.ui-tabs-nav li span{
        font-size:11px; font-family:Verdana;
        line-height:18px;
    }
    #featured li.ui-tabs-nav-item a{
        display:block;
        height:60px;
        color:#333;  background:#fff;
        line-height:20px;
    }
    #featured li.ui-tabs-nav-item a:hover{
        background:#f2f2f2;
    }
    #featured li.ui-tabs-selected{
        background:url('/img/slider/selected-item.gif') top left no-repeat;
    }
    #featured ul.ui-tabs-nav li.ui-tabs-selected a{
        background:#ccc;
    }
    #featured .ui-tabs-panel{
        width:400px; height:250px;
        background:#999; position:relative;
    }
    #featured .ui-tabs-panel .info{
        position:absolute;
        top:180px; left:0;
        height:70px;
        background: url('/img/slider/transparent-bg.png');
    }
    #featured .info h2{
        font-size:18px; font-family:Georgia, serif;
        color:#fff; padding:5px; margin:0;
        overflow:hidden;
    }
    #featured .info p{
        margin:0 5px;
        font-family:Verdana; font-size:11px;
        line-height:15px; color:#f0f0f0;
    }
    #featured .info a{
        text-decoration:none;
        color:#fff;
    }
    #featured .info a:hover{
        text-decoration:underline;
    }
    #featured .ui-tabs-hide{
        display:none;
    }
    ...plus it calls in an (older version) of jQuery that I suppose could be causing a conflict?

    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
        });
    </script>
    Unfortunately, I don't have the skillz to rewrite this slider for the current version of jQuery. :( Can anyone point to what the issue is (or might be) here?
     
  2. Mike

    Mike XenForo Developer Staff Member

    It's hard to track down because of the tabbing, but it looks like there's an extra </div>. (This issue is always caused by incorrect HTML.)
     
    GofD and Kier like this.
  3. Brogan

    Brogan XenForo Moderator Staff Member

    Just checked very quickly in Notepad++ and the last </div> seems to be extra, try removing it.
     
    GofD likes this.
  4. GofD

    GofD Well-Known Member

    Thanks, guys! I'll try that.
     
  5. GofD

    GofD Well-Known Member

    AWESOME! That was it. I swear I tried that last night and it did nada, but hey! It's fixed now, and that's all that matters. I should probably still find a more recent slider that works with the current jQuery.
     

Share This Page