Tutorial :html



Question:

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 Internet Explorer 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.

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

Thanks.


Solution:1

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>  

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »