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

Menu button adding padding within table cell in IE only

Expand Messages
  • chriskrupka
    I am experiencing an odd display issue using a menu button as a select list. I have a column of menu buttons within a table where rather than the column being
    Message 1 of 1 , Aug 2, 2009
    • 0 Attachment
      I am experiencing an odd display issue using a menu button as a select list. I have a column of menu buttons within a table where rather than the column being as wide as the button, it is pushed wider by approx. a 1/2 inch of whitespace on both the left and right sides. It appears that there is some padding being added. This only happens in IE, not in FF. A standard SELECT element shrinks up the cell width correctly.

      The menu buttons are created from javascript upon page load and applied to unique DIV elements within the table cells.

      I have tried setting the margin, padding to 0 on various yui-button styles to no avail. Have also tried setting the width for the td element to a fixed size to no avail.

      Any suggestions?


      CSS specific to button:

      button em {
      font-size: 1.1em;
      vertical-align: bottom;
      font-style: normal;
      display: block;
      text-align: left;
      white-space: nowrap;

      /* Restrict the width of the label to 10em. */
      width: 10em;

      /* Hide the overflow if the text label exceeds 10em in width. */
      overflow: hidden;

      /*
      IE and Safari support the ability to add ellipsis when the text
      label exceeds 10em in width.
      */
      text-overflow: ellipsis;
      }


      Code to create the buttons:

      var ratingI94027770 = [{ text: " (3) Good", value: "3" },{ text: " (2) Fair", value: "2" },{ text: " (1) Poor", value: "1" }];

      var els = YAHOO.util.Dom.getElementsByClassName("rating");
      for(var j=0;j<els.length;j++) {

      tmpId = els[j].id.substring(3);

      var oRatingButton = new YAHOO.widget.Button({ id: "butt"+tmpId,
      name: "butt"+tmpId,
      label: "<em class=\"yui-button-label\">Select an item...</em>", type: "menu",
      menu: ratingI94027770,
      container: "lbl"+tmpId});

      }

      Example button element:

      <TD class="leftColLine alignMiddle" id="I94027839-5" onclick="abortClickHighLight=true;" onmouseout="abortClickHighLight=false;">
      <div ID=lblI94027839_I94027770 class="rating"/>
      </TD>
    Your message has been successfully submitted and would be delivered to recipients shortly.