ansaurus

Question

html <button> tag renders strangely in Firefox

Answer 1

A:

Not sure if this has been answered on DocType or not, but I managed to find a simple workaround in Firefox; I don't have an instance of IE to test in, but basically, you just wrap your button contents in a div:

<html>
  <head>
    <style>
      <!--
      .button {
      width: 300px;
      height: 200px;
      background-color: yellow;
      position: relative;
      padding: 0px;
      }

      .child_top_left {
      position: absolute;
      top: 5px;
      left: 5px;
      background-color: blue;
      }

      .child_bottom_right {
      position: absolute;
      bottom: 5px;
      right: 5px;
      background-color: red;
      }

      .button_container {
          width: 300px;
          height: 200px;
      }
    -->
    </style>
  </head>
  <body>
    <button class="button">
      <div class="button_container">
          <div class="child_top_left">top-left</div>
          <div class="child_bottom_right">bottom-right</div>
      </div>
    </button>
  </body>
</html>

Nicholas T 2010-02-15 18:48:41

ansaurus

tags:

views:

answers:

html <button> tag renders strangely in Firefox

related questions