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

Panel CSS problem (hd class)

Expand Messages
  • James Cowan
    Hi I have an odd css problem with the header (hd) class in different browsers. In Firefox, the header panel displays fine but in IE it appears much smaller and
    Message 1 of 8 , Jul 5, 2006
    • 0 Attachment
      Hi

      I have an odd css problem with the header (hd) class in different
      browsers. In Firefox, the header panel displays fine but in IE it
      appears much smaller and truncates the header text; if I increase the
      height property of the hd class in container.css to 2em, it displays
      the text correctly (but it then appears a bit bigger in Firefox).

      The example panel displays fine in both browsers so I guess it must be
      to do with the order in which I am including the css.

      Anyone else had similar problems?

      James

      <link rel="stylesheet" type="text/css" href="style/yui/css/fonts.css" />
      <link rel="stylesheet" type="text/css"
      href="style/yui/css/container.css" />
      <link rel="stylesheet" type="text/css" href="style/yui/css/menu.css" />
      <link rel="stylesheet" type="text/css" href="style/yui/css/tree.css" />
    • Steven Peterson
      What DOCTYPE are you using? You should be using the strict DOCTYPE that we include with the Panel examples. That should fix the header display. Steven Peterson
      Message 2 of 8 , Jul 5, 2006
      • 0 Attachment

        What DOCTYPE are you using? You should be using the strict DOCTYPE that we include with the Panel examples. That should fix the header display.

         

        Steven Peterson

        Web Developer, Platform Engineering

        Yahoo!

        From: ydn-javascript@yahoogroups.com [mailto:ydn-javascript@yahoogroups.com] On Behalf Of James Cowan
        Sent: Wednesday, July 05, 2006 10:07 AM
        To: ydn-javascript@yahoogroups.com
        Subject: [ydn-javascript] Panel CSS problem (hd class)

         

        Hi

        I have an odd css problem with the header (hd) class in different
        browsers. In Firefox, the header panel displays fine but in IE it
        appears much smaller and truncates the header text; if I increase the
        height property of the hd class in container.css to 2em, it displays
        the text correctly (but it then appears a bit bigger in Firefox).

        The example panel displays fine in both browsers so I guess it must be
        to do with the order in which I am including the css.

        Anyone else had similar problems?

        James

        <link rel="stylesheet" type="text/css" href="style/yui/css/fonts.css" />
        <link rel="stylesheet" type="text/css"
        href="style/yui/css/container.css" />
        <link rel="stylesheet" type="text/css" href="style/yui/css/menu.css" />
        <link rel="stylesheet" type="text/css" href="style/yui/css/tree.css" />

      • James Cowan
        ... that we ... Switching to the strict DOCTYPE fixes it in IE but then things go wrong in Firefox (the panel does not display its full size). Here is the
        Message 3 of 8 , Jul 6, 2006
        • 0 Attachment
          --- In ydn-javascript@yahoogroups.com, "Steven Peterson"
          <peterson@...> wrote:
          >
          > What DOCTYPE are you using? You should be using the strict DOCTYPE
          that we
          > include with the Panel examples. That should fix the header display.
          >
          >
          >
          > Steven Peterson
          >
          Switching to the strict DOCTYPE fixes it in IE but then things go
          wrong in Firefox (the panel does not display its full size).

          Here is the code.

          James

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
          4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
          <html>
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-
          1">
          <title>Resizable Panel</title>

          <script type="text/javascript" src="javascript/yui/yahoo.js"></script>
          <script type="text/javascript" src="javascript/yui/event.js"></script>
          <script type="text/javascript" src="javascript/yui/dom.js"></script>
          <script type="text/javascript"
          src="javascript/yui/dragdrop.js"></script>
          <script type="text/javascript"
          src="javascript/yui/animation.js"></script>
          <script type="text/javascript"
          src="javascript/yui/container.js"></script>
          <script type="text/javascript" src="javascript/yui/menu.js"></script>

          <link rel="stylesheet" type="text/css"
          href="style/yui/css/fonts.css" />
          <link rel="stylesheet" type="text/css"
          href="style/yui/css/example.css" />
          <link rel="stylesheet" type="text/css"
          href="style/yui/css/container.css" />

          <script language="javascript">

          var panel;

          function init()
          {
          //YAHOO.example.OverlayManager = new YAHOO.widget.OverlayManager();

          panel = new YAHOO.widget.Panel("panelDiv",
          {
          effect:
          {effect:YAHOO.widget.ContainerEffect.FADE,duration:0.5},
          fixedcenter: false,
          constraintoviewport: true,
          monitorresize: true,
          underlay:"none",
          close:true,
          visible:true,
          draggable:true,
          x:200,
          y:100,
          height:500,
          width:500,
          modal:false }
          );


          //var drag = new YAHOO.util.DD("panelDiv", "paneldrag");
          var drag = new YAHOO.util.DragDrop("panelDiv", "panelresize");

          drag.setHandleElId("resizeDiv");
          //drag.addInvalidHandleId("resizeDiv");

          drag.onMouseDown = function(e)
          {
          var panel = this.getEl();
          this.startWidth = panel.offsetWidth;
          this.startHeight = panel.offsetHeight;

          this.startPos = [YAHOO.util.Event.getPageX(e),
          YAHOO.util.Event.getPageY(e)];
          };

          drag.onDrag = function(e)
          {
          var newPos = [YAHOO.util.Event.getPageX(e),
          YAHOO.util.Event.getPageY(e)];

          var offsetX = newPos[0] - this.startPos[0];
          var offsetY = newPos[1] - this.startPos[1];

          var newWidth = Math.max(this.startWidth + offsetX, 10);
          var newHeight = Math.max(this.startHeight + offsetY, 10);

          var panel = this.getEl();
          panel.style.width = newWidth + "px";
          panel.style.height = newHeight + "px";
          };

          panel.render();
          panel.show();

          }

          YAHOO.util.Event.addListener(window, "load", init);

          </script>
          </head>
          <body>

          <div id="panelDiv">
          <div class="hd">
          <div class="tl"></div>
          <span>Resizable Window</span>
          <div class="tr"></div>
          </div>

          <div class="b">
          <span>Panel content goes here</span>
          </div>

          <div id="resizeDiv"
          style="position:absolute;bottom:0px;right:0px;width:10px;
          height:10px;background-color:red;font-
          size:1px;">
          </div>
          </div>

          </body>
          </html>
        • gib
          You need an XHTML doctype for this stuff to work. Specifying XHTML strict or transitional (not HTML 4.0) puts browsers in standards compliance mode and
          Message 4 of 8 , Jul 6, 2006
          • 0 Attachment
            You need an XHTML doctype for this stuff to work. Specifying XHTML
            strict or transitional (not HTML 4.0) puts browsers in "standards
            compliance mode" and helps many cross-browser issues (though not all
            -- IE).

            This article briefly explains doc types and you can copy and paste from it:
            http://www.alistapart.com/articles/doctype/


            On 7/6/06, James Cowan <jamescowan@...> wrote:
            >
            >
            >
            >
            >
            >
            > --- In ydn-javascript@yahoogroups.com, "Steven Peterson"
            > <peterson@...> wrote:
            > >
            > > What DOCTYPE are you using? You should be using the strict DOCTYPE
            > that we
            > > include with the Panel examples. That should fix the header display.
            > >
            > >
            > >
            > > Steven Peterson
            > >
            > Switching to the strict DOCTYPE fixes it in IE but then things go
            > wrong in Firefox (the panel does not display its full size).
            >
            > Here is the code.
            >
            > James
            >
            > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
            > 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
            > <html>
            > <head>
            > <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-
            > 1">
            > <title>Resizable Panel</title>
            >
            > <script type="text/javascript" src="javascript/yui/yahoo.js"></script>
            > <script type="text/javascript" src="javascript/yui/event.js"></script>
            > <script type="text/javascript" src="javascript/yui/dom.js"></script>
            > <script type="text/javascript"
            > src="javascript/yui/dragdrop.js"></script>
            > <script type="text/javascript"
            > src="javascript/yui/animation.js"></script>
            > <script type="text/javascript"
            > src="javascript/yui/container.js"></script>
            > <script type="text/javascript" src="javascript/yui/menu.js"></script>
            >
            > <link rel="stylesheet" type="text/css"
            > href="style/yui/css/fonts.css" />
            > <link rel="stylesheet" type="text/css"
            > href="style/yui/css/example.css" />
            > <link rel="stylesheet" type="text/css"
            > href="style/yui/css/container.css" />
            >
            > <script language="javascript">
            >
            > var panel;
            >
            > function init()
            > {
            > //YAHOO.example.OverlayManager = new YAHOO.widget.OverlayManager();
            >
            > panel = new YAHOO.widget.Panel("panelDiv",
            > {
            > effect:
            > {effect:YAHOO.widget.ContainerEffect.FADE,duration:0.5},
            > fixedcenter: false,
            > constraintoviewport: true,
            > monitorresize: true,
            > underlay:"none",
            > close:true,
            > visible:true,
            > draggable:true,
            > x:200,
            > y:100,
            > height:500,
            > width:500,
            > modal:false }
            > );
            >
            > //var drag = new YAHOO.util.DD("panelDiv", "paneldrag");
            > var drag = new YAHOO.util.DragDrop("panelDiv", "panelresize");
            >
            > drag.setHandleElId("resizeDiv");
            > //drag.addInvalidHandleId("resizeDiv");
            >
            > drag.onMouseDown = function(e)
            > {
            > var panel = this.getEl();
            > this.startWidth = panel.offsetWidth;
            > this.startHeight = panel.offsetHeight;
            >
            > this.startPos = [YAHOO.util.Event.getPageX(e),
            > YAHOO.util.Event.getPageY(e)];
            > };
            >
            > drag.onDrag = function(e)
            > {
            > var newPos = [YAHOO.util.Event.getPageX(e),
            > YAHOO.util.Event.getPageY(e)];
            >
            > var offsetX = newPos[0] - this.startPos[0];
            > var offsetY = newPos[1] - this.startPos[1];
            >
            > var newWidth = Math.max(this.startWidth + offsetX, 10);
            > var newHeight = Math.max(this.startHeight + offsetY, 10);
            >
            > var panel = this.getEl();
            > panel.style.width = newWidth + "px";
            > panel.style.height = newHeight + "px";
            > };
            >
            > panel.render();
            > panel.show();
            >
            > }
            >
            > YAHOO.util.Event.addListener(window, "load", init);
            >
            > </script>
            > </head>
            > <body>
            >
            > <div id="panelDiv">
            > <div class="hd">
            > <div class="tl"></div>
            > <span>Resizable Window</span>
            > <div class="tr"></div>
            > </div>
            >
            > <div class="b">
            > <span>Panel content goes here</span>
            > </div>
            >
            > <div id="resizeDiv"
            > style="position:absolute;bottom:0px;right:0px;width:10px;
            > height:10px;background-color:red;font-
            > size:1px;">
            > </div>
            > </div>
            >
            > </body>
            > </html>
            >
            >
          • James Cowan
            Adding the DOCTYPE makes it work in IE but breaks it in Firefox. James ... display. ... src= javascript/yui/yahoo.js ...
            Message 5 of 8 , Jul 6, 2006
            • 0 Attachment
              Adding the DOCTYPE makes it work in IE but breaks it in Firefox.

              James

              --- In ydn-javascript@yahoogroups.com, gib <gib.reimschussel@...> wrote:
              >
              > You need an XHTML doctype for this stuff to work. Specifying XHTML
              > strict or transitional (not HTML 4.0) puts browsers in "standards
              > compliance mode" and helps many cross-browser issues (though not all
              > -- IE).
              >
              > This article briefly explains doc types and you can copy and paste
              from it:
              > http://www.alistapart.com/articles/doctype/
              >
              >
              > On 7/6/06, James Cowan <jamescowan@...> wrote:
              > >
              > >
              > >
              > >
              > >
              > >
              > > --- In ydn-javascript@yahoogroups.com, "Steven Peterson"
              > > <peterson@> wrote:
              > > >
              > > > What DOCTYPE are you using? You should be using the strict DOCTYPE
              > > that we
              > > > include with the Panel examples. That should fix the header
              display.
              > > >
              > > >
              > > >
              > > > Steven Peterson
              > > >
              > > Switching to the strict DOCTYPE fixes it in IE but then things go
              > > wrong in Firefox (the panel does not display its full size).
              > >
              > > Here is the code.
              > >
              > > James
              > >
              > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
              > > 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
              > > <html>
              > > <head>
              > > <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-
              > > 1">
              > > <title>Resizable Panel</title>
              > >
              > > <script type="text/javascript"
              src="javascript/yui/yahoo.js"></script>
              > > <script type="text/javascript"
              src="javascript/yui/event.js"></script>
              > > <script type="text/javascript" src="javascript/yui/dom.js"></script>
              > > <script type="text/javascript"
              > > src="javascript/yui/dragdrop.js"></script>
              > > <script type="text/javascript"
              > > src="javascript/yui/animation.js"></script>
              > > <script type="text/javascript"
              > > src="javascript/yui/container.js"></script>
              > > <script type="text/javascript" src="javascript/yui/menu.js"></script>
              > >
              > > <link rel="stylesheet" type="text/css"
              > > href="style/yui/css/fonts.css" />
              > > <link rel="stylesheet" type="text/css"
              > > href="style/yui/css/example.css" />
              > > <link rel="stylesheet" type="text/css"
              > > href="style/yui/css/container.css" />
              > >
              > > <script language="javascript">
              > >
              > > var panel;
              > >
              > > function init()
              > > {
              > > //YAHOO.example.OverlayManager = new YAHOO.widget.OverlayManager();
              > >
              > > panel = new YAHOO.widget.Panel("panelDiv",
              > > {
              > > effect:
              > > {effect:YAHOO.widget.ContainerEffect.FADE,duration:0.5},
              > > fixedcenter: false,
              > > constraintoviewport: true,
              > > monitorresize: true,
              > > underlay:"none",
              > > close:true,
              > > visible:true,
              > > draggable:true,
              > > x:200,
              > > y:100,
              > > height:500,
              > > width:500,
              > > modal:false }
              > > );
              > >
              > > //var drag = new YAHOO.util.DD("panelDiv", "paneldrag");
              > > var drag = new YAHOO.util.DragDrop("panelDiv", "panelresize");
              > >
              > > drag.setHandleElId("resizeDiv");
              > > //drag.addInvalidHandleId("resizeDiv");
              > >
              > > drag.onMouseDown = function(e)
              > > {
              > > var panel = this.getEl();
              > > this.startWidth = panel.offsetWidth;
              > > this.startHeight = panel.offsetHeight;
              > >
              > > this.startPos = [YAHOO.util.Event.getPageX(e),
              > > YAHOO.util.Event.getPageY(e)];
              > > };
              > >
              > > drag.onDrag = function(e)
              > > {
              > > var newPos = [YAHOO.util.Event.getPageX(e),
              > > YAHOO.util.Event.getPageY(e)];
              > >
              > > var offsetX = newPos[0] - this.startPos[0];
              > > var offsetY = newPos[1] - this.startPos[1];
              > >
              > > var newWidth = Math.max(this.startWidth + offsetX, 10);
              > > var newHeight = Math.max(this.startHeight + offsetY, 10);
              > >
              > > var panel = this.getEl();
              > > panel.style.width = newWidth + "px";
              > > panel.style.height = newHeight + "px";
              > > };
              > >
              > > panel.render();
              > > panel.show();
              > >
              > > }
              > >
              > > YAHOO.util.Event.addListener(window, "load", init);
              > >
              > > </script>
              > > </head>
              > > <body>
              > >
              > > <div id="panelDiv">
              > > <div class="hd">
              > > <div class="tl"></div>
              > > <span>Resizable Window</span>
              > > <div class="tr"></div>
              > > </div>
              > >
              > > <div class="b">
              > > <span>Panel content goes here</span>
              > > </div>
              > >
              > > <div id="resizeDiv"
              > > style="position:absolute;bottom:0px;right:0px;width:10px;
              > > height:10px;background-color:red;font-
              > > size:1px;">
              > > </div>
              > > </div>
              > >
              > > </body>
              > > </html>
              > >
              > >
              >
            • gib
              Can you elaborate on breaks ? One of the Javascript debugging extensions for Firefox may help you isolate the problem.
              Message 6 of 8 , Jul 6, 2006
              • 0 Attachment
                Can you elaborate on "breaks"?

                One of the Javascript debugging extensions for Firefox may help you isolate the problem.


                On 7/6/06, James Cowan <jamescowan@...> wrote:


                Adding the DOCTYPE makes it work in IE but breaks it in Firefox.

                James



                --- In ydn-javascript@yahoogroups.com, gib <gib.reimschussel@...> wrote:
                >
                > You need an XHTML doctype for this stuff to work. Specifying XHTML
                > strict or transitional (not HTML 4.0) puts browsers in "standards
                > compliance mode" and helps many cross-browser issues (though not all
                > -- IE).
                >
                > This article briefly explains doc types and you can copy and paste
                from it:
                > http://www.alistapart.com/articles/doctype/
                >
                >
                > On 7/6/06, James Cowan <jamescowan@...> wrote:
                > >
                > >
                > >
                > >
                > >
                > >
                > > --- In ydn-javascript@yahoogroups.com, "Steven Peterson"
                > > <peterson@> wrote:
                > > >
                > > > What DOCTYPE are you using? You should be using the strict DOCTYPE
                > > that we
                > > > include with the Panel examples. That should fix the header
                display.
                > > >
                > > >
                > > >
                > > > Steven Peterson
                > > >
                > > Switching to the strict DOCTYPE fixes it in IE but then things go
                > > wrong in Firefox (the panel does not display its full size).
                > >
                > > Here is the code.
                > >
                > > James
                > >
                > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
                > > 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
                > > <html>
                > > <head>
                > > <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-
                > > 1">
                > > <title>Resizable Panel</title>
                > >
                > > <script type="text/javascript"
                src="javascript/yui/yahoo.js"></script>
                > > <script type="text/javascript"
                src="javascript/yui/event.js"></script>
                > > <script type="text/javascript" src="javascript/yui/dom.js"></script>
                > > <script type="text/javascript"
                > > src="javascript/yui/dragdrop.js"></script>
                > > <script type="text/javascript"
                > > src="javascript/yui/animation.js"></script>
                > > <script type="text/javascript"
                > > src="javascript/yui/container.js"></script>
                > > <script type="text/javascript" src="javascript/yui/menu.js"></script>
                > >
                > > <link rel="stylesheet" type="text/css"
                > > href="style/yui/css/fonts.css" />
                > > <link rel="stylesheet" type="text/css"
                > > href="style/yui/css/example.css" />
                > > <link rel="stylesheet" type="text/css"
                > > href="style/yui/css/container.css" />
                > >
                > > <script language="javascript">
                > >
                > > var panel;
                > >
                > > function init()
                > > {
                > > //YAHOO.example.OverlayManager = new YAHOO.widget.OverlayManager();
                > >
                > > panel = new YAHOO.widget.Panel("panelDiv",
                > > {
                > > effect:
                > > {effect:YAHOO.widget.ContainerEffect.FADE,duration:0.5},
                > > fixedcenter: false,
                > > constraintoviewport: true,
                > > monitorresize: true,
                > > underlay:"none",
                > > close:true,
                > > visible:true,
                > > draggable:true,
                > > x:200,
                > > y:100,
                > > height:500,
                > > width:500,
                > > modal:false }
                > > );
                > >
                > > //var drag = new YAHOO.util.DD("panelDiv", "paneldrag");
                > > var drag = new YAHOO.util.DragDrop("panelDiv", "panelresize");
                > >
                > > drag.setHandleElId("resizeDiv");
                > > //drag.addInvalidHandleId("resizeDiv");
                > >
                > > drag.onMouseDown = function(e)
                > > {
                > > var panel = this.getEl();
                > > this.startWidth = panel.offsetWidth;
                > > this.startHeight = panel.offsetHeight;
                > >
                > > this.startPos = [YAHOO.util.Event.getPageX(e),
                > > YAHOO.util.Event.getPageY(e)];
                > > };
                > >
                > > drag.onDrag = function(e)
                > > {
                > > var newPos = [YAHOO.util.Event.getPageX(e),
                > > YAHOO.util.Event.getPageY(e)];
                > >
                > > var offsetX = newPos[0] - this.startPos[0];
                > > var offsetY = newPos[1] - this.startPos[1];
                > >
                > > var newWidth = Math.max(this.startWidth + offsetX, 10);
                > > var newHeight = Math.max(this.startHeight + offsetY, 10);
                > >
                > > var panel = this.getEl();
                > > panel.style.width = newWidth + "px";
                > > panel.style.height = newHeight + "px";
                > > };
                > >
                > > panel.render();
                > > panel.show();
                > >
                > > }
                > >
                > > YAHOO.util.Event.addListener(window, "load", init);
                > >
                > > </script>
                > > </head>
                > > <body>
                > >
                > > <div id="panelDiv">
                > > <div class="hd">
                > > <div class="tl"></div>
                > > <span>Resizable Window</span>
                > > <div class="tr"></div>
                > > </div>
                > >
                > > <div class="b">
                > > <span>Panel content goes here</span>
                > > </div>
                > >
                > > <div id="resizeDiv"
                > > style="position:absolute;bottom:0px;right:0px;width:10px;
                > > height:10px;background-color:red;font-
                > > size:1px;">
                > > </div>
                > > </div>
                > >
                > > </body>
                > > </html>
                > >
                > >
                >


              • James Cowan
                ... Switching to the strict DOCTYPE displays the header font correctly in IE but in Firefox the panel does not display then its full size. If I remove the
                Message 7 of 8 , Jul 7, 2006
                • 0 Attachment
                  > Can you elaborate on "breaks"?

                  Switching to the strict DOCTYPE displays the header font correctly in
                  IE but in Firefox the panel does not display then its full size. If I
                  remove the DOCTYPE, things work fine in Firefox.

                  James

                  --- In ydn-javascript@yahoogroups.com, gib <gib.reimschussel@...>
                  wrote:
                  >
                  > Can you elaborate on "breaks"?
                  >
                  > One of the Javascript debugging extensions for Firefox may help you
                  isolate
                  > the problem.
                  >
                  >
                  > On 7/6/06, James Cowan <jamescowan@...> wrote:
                  > >
                  > >
                  > > Adding the DOCTYPE makes it work in IE but breaks it in Firefox.
                  > >
                  > > James
                  > >
                  > >
                  > > --- In ydn-javascript@yahoogroups.com <ydn-javascript%
                  40yahoogroups.com>,
                  > > gib <gib.reimschussel@> wrote:
                  > > >
                  > > > You need an XHTML doctype for this stuff to work. Specifying
                  XHTML
                  > > > strict or transitional (not HTML 4.0) puts browsers
                  in "standards
                  > > > compliance mode" and helps many cross-browser issues (though
                  not all
                  > > > -- IE).
                  > > >
                  > > > This article briefly explains doc types and you can copy and
                  paste
                  > > from it:
                  > > > http://www.alistapart.com/articles/doctype/
                  > > >
                  > > >
                  > > > On 7/6/06, James Cowan <jamescowan@> wrote:
                  > > > >
                  > > > >
                  > > > >
                  > > > >
                  > > > >
                  > > > >
                  > > > > --- In ydn-javascript@yahoogroups.com<ydn-javascript%
                  40yahoogroups.com>,
                  > > "Steven Peterson"
                  > > > > <peterson@> wrote:
                  > > > > >
                  > > > > > What DOCTYPE are you using? You should be using the strict
                  DOCTYPE
                  > > > > that we
                  > > > > > include with the Panel examples. That should fix the header
                  > > display.
                  > > > > >
                  > > > > >
                  > > > > >
                  > > > > > Steven Peterson
                  > > > > >
                  > > > > Switching to the strict DOCTYPE fixes it in IE but then
                  things go
                  > > > > wrong in Firefox (the panel does not display its full size).
                  > > > >
                  > > > > Here is the code.
                  > > > >
                  > > > > James
                  > > > >
                  > > > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
                  > > > > 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
                  > > > > <html>
                  > > > > <head>
                  > > > > <meta http-equiv="Content-Type" content="text/html;
                  charset=iso-8859-
                  > > > > 1">
                  > > > > <title>Resizable Panel</title>
                  > > > >
                  > > > > <script type="text/javascript"
                  > > src="javascript/yui/yahoo.js"></script>
                  > > > > <script type="text/javascript"
                  > > src="javascript/yui/event.js"></script>
                  > > > > <script type="text/javascript"
                  src="javascript/yui/dom.js"></script>
                  > > > > <script type="text/javascript"
                  > > > > src="javascript/yui/dragdrop.js"></script>
                  > > > > <script type="text/javascript"
                  > > > > src="javascript/yui/animation.js"></script>
                  > > > > <script type="text/javascript"
                  > > > > src="javascript/yui/container.js"></script>
                  > > > > <script type="text/javascript"
                  src="javascript/yui/menu.js"></script>
                  > > > >
                  > > > > <link rel="stylesheet" type="text/css"
                  > > > > href="style/yui/css/fonts.css" />
                  > > > > <link rel="stylesheet" type="text/css"
                  > > > > href="style/yui/css/example.css" />
                  > > > > <link rel="stylesheet" type="text/css"
                  > > > > href="style/yui/css/container.css" />
                  > > > >
                  > > > > <script language="javascript">
                  > > > >
                  > > > > var panel;
                  > > > >
                  > > > > function init()
                  > > > > {
                  > > > > //YAHOO.example.OverlayManager = new
                  YAHOO.widget.OverlayManager();
                  > > > >
                  > > > > panel = new YAHOO.widget.Panel("panelDiv",
                  > > > > {
                  > > > > effect:
                  > > > > {effect:YAHOO.widget.ContainerEffect.FADE,duration:0.5},
                  > > > > fixedcenter: false,
                  > > > > constraintoviewport: true,
                  > > > > monitorresize: true,
                  > > > > underlay:"none",
                  > > > > close:true,
                  > > > > visible:true,
                  > > > > draggable:true,
                  > > > > x:200,
                  > > > > y:100,
                  > > > > height:500,
                  > > > > width:500,
                  > > > > modal:false }
                  > > > > );
                  > > > >
                  > > > > //var drag = new YAHOO.util.DD("panelDiv", "paneldrag");
                  > > > > var drag = new YAHOO.util.DragDrop("panelDiv", "panelresize");
                  > > > >
                  > > > > drag.setHandleElId("resizeDiv");
                  > > > > //drag.addInvalidHandleId("resizeDiv");
                  > > > >
                  > > > > drag.onMouseDown = function(e)
                  > > > > {
                  > > > > var panel = this.getEl();
                  > > > > this.startWidth = panel.offsetWidth;
                  > > > > this.startHeight = panel.offsetHeight;
                  > > > >
                  > > > > this.startPos = [YAHOO.util.Event.getPageX(e),
                  > > > > YAHOO.util.Event.getPageY(e)];
                  > > > > };
                  > > > >
                  > > > > drag.onDrag = function(e)
                  > > > > {
                  > > > > var newPos = [YAHOO.util.Event.getPageX(e),
                  > > > > YAHOO.util.Event.getPageY(e)];
                  > > > >
                  > > > > var offsetX = newPos[0] - this.startPos[0];
                  > > > > var offsetY = newPos[1] - this.startPos[1];
                  > > > >
                  > > > > var newWidth = Math.max(this.startWidth + offsetX, 10);
                  > > > > var newHeight = Math.max(this.startHeight + offsetY, 10);
                  > > > >
                  > > > > var panel = this.getEl();
                  > > > > panel.style.width = newWidth + "px";
                  > > > > panel.style.height = newHeight + "px";
                  > > > > };
                  > > > >
                  > > > > panel.render();
                  > > > > panel.show();
                  > > > >
                  > > > > }
                  > > > >
                  > > > > YAHOO.util.Event.addListener(window, "load", init);
                  > > > >
                  > > > > </script>
                  > > > > </head>
                  > > > > <body>
                  > > > >
                  > > > > <div id="panelDiv">
                  > > > > <div class="hd">
                  > > > > <div class="tl"></div>
                  > > > > <span>Resizable Window</span>
                  > > > > <div class="tr"></div>
                  > > > > </div>
                  > > > >
                  > > > > <div class="b">
                  > > > > <span>Panel content goes here</span>
                  > > > > </div>
                  > > > >
                  > > > > <div id="resizeDiv"
                  > > > > style="position:absolute;bottom:0px;right:0px;width:10px;
                  > > > > height:10px;background-color:red;font-
                  > > > > size:1px;">
                  > > > > </div>
                  > > > > </div>
                  > > > >
                  > > > > </body>
                  > > > > </html>
                  > > > >
                  > > > >
                  > > >
                  > >
                  > >
                  > >
                  >
                • Mike Hudack
                  For what it s worth, I m having exactly the same problem. In Internet Explorer the hd section of the panel displays at about 1/3 height, even though the hd
                  Message 8 of 8 , Jul 7, 2006
                  • 0 Attachment
                    For what it's worth, I'm having exactly the same problem.  In Internet Explorer the "hd" section of the panel displays at about 1/3 height, even though the hd text's font size remains correct.  It displays fine in IE.  I haven't experimented with setting/unsetting DOCTYPE, but I'm already setting it for my pages (which aren't breaking in Firefox or IE, generally speaking).

                    -mike
                    blip.tv

                    On 7/7/06, James Cowan <jamescowan@...> wrote:

                    > Can you elaborate on "breaks"?

                    Switching to the strict DOCTYPE displays the header font correctly in
                    IE but in Firefox the panel does not display then its full size. If I
                    remove the DOCTYPE, things work fine in Firefox.

                    James

                    --- In ydn-javascript@yahoogroups.com, gib <gib.reimschussel@...>
                    wrote:
                    >
                    > Can you elaborate on "breaks"?
                    >
                    > One of the Javascript debugging extensions for Firefox may help you
                    isolate
                    > the problem.
                    >
                    >
                    > On 7/6/06, James Cowan <jamescowan@...> wrote:
                    > >
                    > >
                    > > Adding the DOCTYPE makes it work in IE but breaks it in Firefox.
                    > >
                    > > James
                    > >
                    > >
                    > > --- In ydn-javascript@yahoogroups.com <ydn-javascript%
                    40yahoogroups.com>,
                    > > gib <gib.reimschussel@> wrote:
                    > > >
                    > > > You need an XHTML doctype for this stuff to work. Specifying
                    XHTML
                    > > > strict or transitional (not HTML 4.0) puts browsers
                    in "standards
                    > > > compliance mode" and helps many cross-browser issues (though
                    not all
                    > > > -- IE).
                    > > >
                    > > > This article briefly explains doc types and you can copy and
                    paste
                    > > from it:
                    > > > http://www.alistapart.com/articles/doctype/
                    > > >
                    > > >
                    > > > On 7/6/06, James Cowan <jamescowan@> wrote:
                    > > > >
                    > > > >
                    > > > >
                    > > > >
                    > > > >
                    > > > >
                    > > > > --- In ydn-javascript@yahoogroups.com<ydn-javascript%
                    40yahoogroups.com>,
                    > > "Steven Peterson"
                    > > > > <peterson@> wrote:
                    > > > > >
                    > > > > > What DOCTYPE are you using? You should be using the strict
                    DOCTYPE
                    > > > > that we
                    > > > > > include with the Panel examples. That should fix the header
                    > > display.
                    > > > > >
                    > > > > >
                    > > > > >
                    > > > > > Steven Peterson
                    > > > > >
                    > > > > Switching to the strict DOCTYPE fixes it in IE but then
                    things go
                    > > > > wrong in Firefox (the panel does not display its full size).
                    > > > >
                    > > > > Here is the code.
                    > > > >
                    > > > > James
                    > > > >
                    > > > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
                    > > > > 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
                    > > > > <html>
                    > > > > <head>
                    > > > > <meta http-equiv="Content-Type" content="text/html;
                    charset=iso-8859-
                    > > > > 1">
                    > > > > <title>Resizable Panel</title>
                    > > > >
                    > > > > <script type="text/javascript"
                    > > src="javascript/yui/yahoo.js"></script>
                    > > > > <script type="text/javascript"
                    > > src="javascript/yui/event.js"></script>
                    > > > > <script type="text/javascript"
                    src="javascript/yui/dom.js"></script>
                    > > > > <script type="text/javascript"
                    > > > > src="javascript/yui/dragdrop.js"></script>
                    > > > > <script type="text/javascript"
                    > > > > src="javascript/yui/animation.js"></script>
                    > > > > <script type="text/javascript"
                    > > > > src="javascript/yui/container.js"></script>
                    > > > > <script type="text/javascript"
                    src="javascript/yui/menu.js"></script>
                    > > > >
                    > > > > <link rel="stylesheet" type="text/css"
                    > > > > href="style/yui/css/fonts.css" />
                    > > > > <link rel="stylesheet" type="text/css"
                    > > > > href="style/yui/css/example.css" />
                    > > > > <link rel="stylesheet" type="text/css"
                    > > > > href="style/yui/css/container.css" />
                    > > > >
                    > > > > <script language="javascript">
                    > > > >
                    > > > > var panel;
                    > > > >
                    > > > > function init()
                    > > > > {
                    > > > > //YAHOO.example.OverlayManager = new
                    YAHOO.widget.OverlayManager();
                    > > > >
                    > > > > panel = new YAHOO.widget.Panel("panelDiv",
                    > > > > {
                    > > > > effect:
                    > > > > {effect:YAHOO.widget.ContainerEffect.FADE,duration:0.5},
                    > > > > fixedcenter: false,
                    > > > > constraintoviewport: true,
                    > > > > monitorresize: true,
                    > > > > underlay:"none",
                    > > > > close:true,
                    > > > > visible:true,
                    > > > > draggable:true,
                    > > > > x:200,
                    > > > > y:100,
                    > > > > height:500,
                    > > > > width:500,
                    > > > > modal:false }
                    > > > > );
                    > > > >
                    > > > > //var drag = new YAHOO.util.DD("panelDiv", "paneldrag");
                    > > > > var drag = new YAHOO.util.DragDrop("panelDiv", "panelresize");
                    > > > >
                    > > > > drag.setHandleElId("resizeDiv");
                    > > > > //drag.addInvalidHandleId("resizeDiv");
                    > > > >
                    > > > > drag.onMouseDown = function(e)
                    > > > > {
                    > > > > var panel = this.getEl();
                    > > > > this.startWidth = panel.offsetWidth;
                    > > > > this.startHeight = panel.offsetHeight;
                    > > > >
                    > > > > this.startPos = [YAHOO.util.Event.getPageX(e),
                    > > > > YAHOO.util.Event.getPageY(e)];
                    > > > > };
                    > > > >
                    > > > > drag.onDrag = function(e)
                    > > > > {
                    > > > > var newPos = [YAHOO.util.Event.getPageX(e),
                    > > > > YAHOO.util.Event.getPageY(e)];
                    > > > >
                    > > > > var offsetX = newPos[0] - this.startPos[0];
                    > > > > var offsetY = newPos[1] - this.startPos[1];
                    > > > >
                    > > > > var newWidth = Math.max(this.startWidth + offsetX, 10);
                    > > > > var newHeight = Math.max(this.startHeight + offsetY, 10);
                    > > > >
                    > > > > var panel = this.getEl();
                    > > > > panel.style.width = newWidth + "px";
                    > > > > panel.style.height = newHeight + "px";
                    > > > > };
                    > > > >
                    > > > > panel.render();
                    > > > > panel.show();
                    > > > >
                    > > > > }
                    > > > >
                    > > > > YAHOO.util.Event.addListener(window, "load", init);
                    > > > >
                    > > > > </script>
                    > > > > </head>
                    > > > > <body>
                    > > > >
                    > > > > <div id="panelDiv">
                    > > > > <div class="hd">
                    > > > > <div class="tl"></div>
                    > > > > <span>Resizable Window</span>
                    > > > > <div class="tr"></div>
                    > > > > </div>
                    > > > >
                    > > > > <div class="b">
                    > > > > <span>Panel content goes here</span>
                    > > > > </div>
                    > > > >
                    > > > > <div id="resizeDiv"
                    > > > > style="position:absolute;bottom:0px;right:0px;width:10px;
                    > > > > height:10px;background-color:red;font-
                    > > > > size:1px;">
                    > > > > </div>
                    > > > > </div>
                    > > > >
                    > > > > </body>
                    > > > > </html>
                    > > > >
                    > > > >
                    > > >
                    > >
                    > >
                    > >
                    >


                  Your message has been successfully submitted and would be delivered to recipients shortly.