Home/ Questions/Q 8436563
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T07:12:40+00:00

vertical and horizontal alignment and height percentage not working correctly in firefox Although it

  • 0

vertical and horizontal alignment and height percentage not working correctly in firefox Although it works fine on IE and Chrome
i set hight and width to 100% in html and body 

html,body { heigh:100% ; width:100% }

and i tried all possible solutions like text-align: -moz-center; display:block;
and here’s my code

<table cellpadding="0" cellspacing="0" border="0" style="width: 100%; height: 93%;">
    <tr style="height: 42px; width: 100%">
        <td style="width: 80px; background-image: url(Images/logo.png); background-repeat: no-repeat;
            height: 42px;">
        </td>
        <td style="height: 42px">
        </td>
    </tr>
    <tr align="center" valign="middle">
        <td style="height: 196px;" align="center" valign="middle">
            <table class="partTable" style="padding-bottom: 20px">
           <tr>
                    <td align="center" style="font-size: xx-large; font-family: Arial Black; color: #C11B17">
                        <span>
                            <%=System.Configuration.ConfigurationManager.AppSettings["AppName"]%>
                        </span>
                    </td>
                </tr>
            </table>
            <table border="0" style="text-align: -moz-center; vertical-align: middle; display: block;
                margin: 0 auto;">
                <tr>
                    <td valign="middle" class="partHolder" style="width: 314px; height: 201px;">
                 --Content
                    </td>
                </tr>
            </table>
    </tr>

notice: the table doesn’t take the 93% of the page. it takes like an auto .and thats happened when I put <!DOCTYPE html> before html tag

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    1. Use style margin:0 auto to center your table.
    2. Make sure all containers for table are height: 100%;
      For example:

    And you have some misconvenience in your code:

    <tr style="height: 42px; width: 100%">
           ^^^^^^^^^^^^ this is ok
   </tr>
   <tr align="center" valign="middle">
       <td style="height: 196px;">
                  ^^^^^^^^^^^^^^ 
                 This is wrong. you should 
                 remove it to make table auto-risze. 
                 And you should use `height` only to <tr>

    it takes like an auto .and thats happened when I put
    before html tag

    Firefox simply goes mad if you use height:93% and then you use height:42px,height:196px for rows. I believe Firefox is using more strict method to render HTML+CSS when you use <!DOCTYPE html> tag

    Also.. don’t use text-align for table,tr – because they doesn’t contains any text. Use it only for td

    • 0