Loading ...
Sorry, an error occurred while loading the content.

Tabview error in Firefox, Content showing up outside conent box

Expand Messages
  • hwusdesign
    If you go here http://universitycenters.ucsd.edu/new2/index.php and scroll down to the Hours - Food section, the content under the tab will look fine In IE
    Message 1 of 3 , Mar 3, 2008
    • 0 Attachment
      If you go here http://universitycenters.ucsd.edu/new2/index.php

      and scroll down to the Hours - "Food" section, the content under the
      tab will look fine In IE but in Mozilla will appear outside of the
      content box (just to the right to be exact). It seems no matter what
      I try, nothing I will get that scrolling content inside the tabbed
      content box in Firefox. I'm kind of a newbie with YUI and any help
      would be really appreciated. Im using CSS to edit the appearance of
      the tabviw stuff btw.

      Below is the code:

      <div id="sec-hours" class="yui-navset">
      <div class="sec-title"><h2>Hours</h2></div>
      <ul class="yui-nav">
      <li class="selected"><a href="#food">FOOD</a></li>
      <li> <a href="#shops">SHOPS</a></li>
      <li><a href="#weekends">WEEKENDS</a></li>
      </ul>
      <div class="yui-content">
      <div id="food">
      <div id="scrollholder" class="scrollholder">
      <div id="scroll" class="scroll">
      <Table width=250 align=center cellpadding="3">
      <tr>
      <td width=100 padding = "10"><div align="left">   Name</p>
      </div></td><td><div align="center">Open</div></td><td width =
      "50"><div align="center">Close</div></td><td><div align="center">
      Day</div></td></tr></Table>

      <?php include ("includes/test4.php"); ?>

      </div>


      <script type="text/javascript">
      <!--
      ScrollLoad ("scrollholder", "scroll", true);
      //-->
      </script>
      </div>
      </div>

      <div id="shops">
      <p>Shops Content </p>
      </div>
      <div id="weekends">
      <p>Weekends Content </p>
      </div>
      </div>

      <script>
      (function() {
      var tabView = new YAHOO.widget.TabView('sec-hours');
      })();
      </script>
      </div>
    • Jing Ceawlin
      Looks like this is a bug in Firefox, coz it works fine in Opera and Safari(windows version) too. There s a fix you can try. Set the scrollholder div s
      Message 2 of 3 , Mar 3, 2008
      • 0 Attachment
        Looks like this is a bug in Firefox, coz it works fine in Opera and Safari(windows version) too.
        There's a fix you can try. Set the scrollholder div's  position to absolute. I'm not sure if it would cause other problem, but seems works.

        Regards,
        Jing

        On Tue, Mar 4, 2008 at 9:56 AM, hwusdesign <hwusdesign@...> wrote:

        If you go here http://universitycenters.ucsd.edu/new2/index.php

        and scroll down to the Hours - "Food" section, the content under the
        tab will look fine In IE but in Mozilla will appear outside of the
        content box (just to the right to be exact). It seems no matter what
        I try, nothing I will get that scrolling content inside the tabbed
        content box in Firefox. I'm kind of a newbie with YUI and any help
        would be really appreciated. Im using CSS to edit the appearance of
        the tabviw stuff btw.

        Below is the code:

        <div id="sec-hours" class="yui-navset">
        <div class="sec-title"><h2>Hours</h2></div>
        <ul class="yui-nav">
        <li class="selected"><a href="#food">FOOD</a></li>
        <li> <a href="#shops">SHOPS</a></li>
        <li><a href="#weekends">WEEKENDS</a></li>
        </ul>
        <div class="yui-content">
        <div id="food">
        <div id="scrollholder" class="scrollholder">
        <div id="scroll" class="scroll">
        <Table width=250 align=center cellpadding="3">
        <tr>
        <td width=100 padding = "10"><div align="left"> &nbsp;&nbsp;Name</p>
        </div></td><td><div align="center">Open</div></td><td width =
        "50"><div align="center">Close</div></td><td><div align="center">
        Day</div></td></tr></Table>

        <?php include ("includes/test4.php"); ?>

        </div>


        <script type="text/javascript">
        <!--
        ScrollLoad ("scrollholder", "scroll", true);
        //-->
        </script>
        </div>
        </div>

        <div id="shops">
        <p>Shops Content </p>
        </div>
        <div id="weekends">
        <p>Weekends Content </p>
        </div>
        </div>

        <script>
        (function() {
        var tabView = new YAHOO.widget.TabView('sec-hours');
        })();
        </script>
        </div>


      • hwusdesign
        omg, that works, thank you so much, such a simple solution. ... absolute.
        Message 3 of 3 , Mar 4, 2008
        • 0 Attachment
          omg, that works, thank you so much, such a simple solution.

          --- In ydn-javascript@yahoogroups.com, "Jing Ceawlin" <zjply4000@...>
          wrote:
          >
          > Looks like this is a bug in Firefox, coz it works fine in Opera and
          > Safari(windows version) too.
          > There's a fix you can try. Set the scrollholder div's position to
          absolute.
          > I'm not sure if it would cause other problem, but seems works.
          >
          > Regards,
          > Jing
          >
          > On Tue, Mar 4, 2008 at 9:56 AM, hwusdesign <hwusdesign@...> wrote:
          >
          > > If you go here http://universitycenters.ucsd.edu/new2/index.php
          > >
          > > and scroll down to the Hours - "Food" section, the content under the
          > > tab will look fine In IE but in Mozilla will appear outside of the
          > > content box (just to the right to be exact). It seems no matter what
          > > I try, nothing I will get that scrolling content inside the tabbed
          > > content box in Firefox. I'm kind of a newbie with YUI and any help
          > > would be really appreciated. Im using CSS to edit the appearance of
          > > the tabviw stuff btw.
          > >
          > > Below is the code:
          > >
          > > <div id="sec-hours" class="yui-navset">
          > > <div class="sec-title"><h2>Hours</h2></div>
          > > <ul class="yui-nav">
          > > <li class="selected"><a href="#food">FOOD</a></li>
          > > <li> <a href="#shops">SHOPS</a></li>
          > > <li><a href="#weekends">WEEKENDS</a></li>
          > > </ul>
          > > <div class="yui-content">
          > > <div id="food">
          > > <div id="scrollholder" class="scrollholder">
          > > <div id="scroll" class="scroll">
          > > <Table width=250 align=center cellpadding="3">
          > > <tr>
          > > <td width=100 padding = "10"><div align="left">   Name</p>
          > > </div></td><td><div align="center">Open</div></td><td width =
          > > "50"><div align="center">Close</div></td><td><div align="center">
          > > Day</div></td></tr></Table>
          > >
          > > <?php include ("includes/test4.php"); ?>
          > >
          > > </div>
          > >
          > >
          > > <script type="text/javascript">
          > > <!--
          > > ScrollLoad ("scrollholder", "scroll", true);
          > > //-->
          > > </script>
          > > </div>
          > > </div>
          > >
          > > <div id="shops">
          > > <p>Shops Content </p>
          > > </div>
          > > <div id="weekends">
          > > <p>Weekends Content </p>
          > > </div>
          > > </div>
          > >
          > > <script>
          > > (function() {
          > > var tabView = new YAHOO.widget.TabView('sec-hours');
          > > })();
          > > </script>
          > > </div>
          > >
          > >
          > >
          >
        Your message has been successfully submitted and would be delivered to recipients shortly.