Gabi 0

Hi,

I have the following code that basically displays a <button>, and inside the button two <div>s, one aligned at the top-left corner of the button, the other aligned at the bottom-right corner:

<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;
      }
    -->
    </style>
  </head>
  <body>
    <button class="button">
      <div class="child_top_left">top-left</div>
      <div class="child_bottom_right">bottom-right</div>
    </button>
  </body>
</html>

It all works fine in IE 7 or Safari, but in Firefox something is displayed strangely. It looks like Firefox considers that the 'top' of the button is actually located at the middle of the button.

I tried setting the doctype to transitional, but no change.

Anyone encountered this behavior? Maybe there is some workaround for it?

Thanks.

3 answers

1
point
This was chosen as the best answer

buttons are special elements, and it looks as if Mozilla is vertically centering the textbox and using that as its positioning.

I found a workaround for you:

  .button {
  width: 300px;
  height: 200px;
  background-color: yellow;
  position: relative;
  padding: 0 0 200px 0;
  }

padding the bottom of the box with the height of the box appears to force firefox to render the contained elements where you wanted them.

Answered almost 7 years ago by Tony Crockford
  • This helps, thanks a lot! Although I find it strange, but FF takes the padding into account, while IE and Safari simply ignore the padding. And overall I get exactly the result I want. There is a small horizontal shift in FF, but I think I can compensate it the same way, or something. Gabi almost 7 years ago
0
points

First of all: div-s in buttons is not ok from a semantic point of view, add span or other inline elements. Second of all: try this tutorial on sliding doors in button elements, covers pretty much everything you need to know about common browser bugs and how they render the button element

Answered almost 7 years ago by Razvan Pavel
  • I looked at your tutorial, but as far as I can see you don't need to vertically align stuff inside the button, which is the painful thing in my case. Gabi almost 7 years ago
-1
points

Would you be better off doing something like this?

<input type="button" value="Foo" id="bar" />
Answered almost 7 years ago by Matt Lee
  • The thing is that I need to put some more complex HTML inside the button, and afaik the <input type="button"> tag does not accept such a thing. Gabi almost 7 years ago