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

Re: [ydn-javascript] Re: Panel CSS problem (hd class)

Expand Messages
  • 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 1 of 8 , Jul 7, 2006
      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.