tags:

views:

97

answers:

1

Hello All.

I have one simple login page, where I am applying some of the css code as follows :

 div.loginheader {

        width: 100%;
        height: 25%;
        position: relative;
        text-align: center;
        margin: 0 auto;
        top: 6%;
        left: 6%;
      }
 img.center {
    display: block;

    padding: 0px;

  }
       td.caption
      {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        font-family: Arial,Georgia,Serif;
        color: #ffffff;
        font-size:24px;
      }

With the following HTML Code :

<div class="loginheader">
         <table width="90%">
          <tr>
              <td width="20%" class="caption">
                  <img class="center" src="abc.png">
              </td>
              <td width="80%" class="caption">

                    Test Text
              </td>
            </tr>
           </table>
      </div>

But using above code, it's working perfectly in all the brwoser except IE. In IE the the positions and margins are destroying. My Web page looks as this link

in IE 7.

Any Help would be highly appreciated..

+1  A: 

In IE the the positions and margins are destroying

Smells much like that IE is running in quirks mode which caused that the IE6/7 box model bug has manifested. Ensure that you're declaring/using the right doctype in top of the HTML page.

<!DOCTYPE html>

See also:

BalusC