asked on

URGENT !!! Problem with 100% height need in page (IE different from Firefox)

Hello,
here is my problem, I have this HTML page . The result should be that the central "frame" (not an HTML frame) uses the full space that is allowed to him at 100% of the available height, but strangely it starts lower.
In Firefox, of course, no problem , but with Internet Explorer I can't find the solution the row starts lower...

Second question, can you explain me also with with Internet Explorer, when saying 100% of height for an element, if you have already other rows with static heights, that 100% height row will add in fact the size of the screen to the sum of heights of all other static rows... making it impossible to avoid the vertical scrollbar in the explorer when the page is not filled in with data higher than the screen size

You can see the result here : http://azorg.cybergraphik.biz/toapprove.asp
The yellow in the code is for your eyes only :-)

THANKS IN ADVANCE

<body>
<div id="All">
<table id="fullheight" width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr><td height="10" colspan="5" class="whitecolor"><img src="/gfx/shim.gif" width="1" border="0"></td></tr>
      <tr><td height="2" class="whitecolor"><img src="/gfx/shim.gif" width="1" border="0"></td>
            <td class="panelbordercolor" colspan="3"><img src="/gfx/shim.gif" width="1" border="0"></td>
            <td class="whitecolor"><img src="/gfx/shim.gif" width="1" border="0"></td>
      </tr>
      <tr>
            <td class="whitecolor"><img src="/gfx/shim.gif" width="1" border="0"></td>
            <td width="2" class="panelbordercolor"><img src="/gfx/shim.gif" width="2" border="0"></td>
            <td id="fullheight" width="796">
                  <table id="fullheight" width="796" cellspacing="0" cellpadding="0" border="0">
                        <tr>
                              <td width="796" height="106" valign="top">
                              <div id="toptext">
                                    <table width="796" height="106" cellspacing="0" cellpadding="0" border="0">
                                          <tr>
                                                <td width="251" height="106" align="left" valign="top"><img src="/gfx/azorg.gif"></td>
                                                <td width="67" class="whitecolor"><img src="/gfx/shim.gif" width="51" height="106" border="0"></td>
                                                <td width="468">
                                                      <table width="468" cellpadding="0" cellspacing="0" border="0">
                                                            <tr><td width="468" height="10" class="whitecolor"><img src="/gfx/shim.gif" width="468" height="10" border="0"></td></tr>
                                                            <tr><td width="468" height="60" class="whitecolor"><img src="/gfx/ban_pub.jpg" width="468" border="0"></td></tr>
                                                            <tr>
                                                                  <td width="468" height="14" >
                                                                        <table width="468" cellpadding="0" cellspacing="0" border="0">
                                                                              <tr>
                                                                                    <td width="405" height="14" class="whitecolor"><img src="/gfx/shim.gif" width="405" height="14" border="0"></td>
                                                                                    <td width="63" height="14"><img src="/gfx/publicite.jpg" width="63" height="14" border="0"></td>
                                                                              </tr>
                                                                        </table>
                                                                  </td>
                                                            </tr>
                                                            <tr><td width="468" height="11" class="text" align="right">Nombre de sites référencés : 11111</td></tr>
                                                            <tr><td width="468" height="11" class="text" align="right">Nombre de sites pour BELGIQUE : 11111</td></tr>
                                                      </table>
                                                </td>
                                                <td width="10" class="whitecolor"><img src="/gfx/shim.gif" width="10" height="106" border="0"></td>
                                          </tr>
                                      </table>
                              </div>
                              </td>
                        </tr>
                        <tr>
                              <td width="796" height="29" valign="top">
                              <div id="topmenu">
                              <form name="searchform" method="post" action="">
                                    <table width="796" cellspacing="0" cellpadding="0" border="0">
                                          <tr>
                                                <td width="10" height="29"><img src="/gfx/shim.gif" width="10" height="29" border="0"></td>
                                                <td width="581" class="text">
                                                      <table cellspacing="0" cellpadding="0" border="0" class="text">
                                                            <tr>
                                                                  <td height="29" class="text">Australie </td>
                                                                  <td class="text"><img src="/gfx/hmenusep.gif" width="2" height="19" border="0" align="middle"></td>
                                                                  <td class="text"> Belgique </td>
                                                                  <td class="text"><img src="/gfx/hmenusep.gif" width="2" height="19" border="0" align="middle"></td>
                                                                  <td class="text"> Brasil </td>
                                                                  <td class="text"><img src="/gfx/hmenusep.gif" width="2" height="19" border="0" align="middle"></td>
                                                                  <td class="text"> Canada </td>
                                                                  <td class="text"><img src="/gfx/hmenusep.gif" width="2" height="19" border="0" align="middle"></td>
                                                                  <td class="text"> Denmark </td>
                                                            </tr>
                                                      </table>
                                                </td>
                                                <td width="5"><img src="/gfx/shim.gif" width="5" height="29" border="0"></td>
                                                <td width="190" class="text">
                                                      <div id="search">
                                                      <table cellspacing="0" cellpadding="0" border="0" class="text">
                                                            <tr>
                                                                  <td class="text" width="160"><input name="searchtext" type="text" size="40" value=" Rechercher un site" class="inputtext"></td>
                                                                  <td class="text" width="5"><img src="/gfx/shim.gif" width="5" height="29" border="0"></td>
                                                                  <td class="text" width="25"><input type="image" src="/gfx/search.gif" alt="Go !" class="textimage" width="25" height="16"></td>
                                                            </tr>
                                                      </table>
                                                      </div>
                                                </td>
                                                <td width="10"><img src="/gfx/shim.gif" width="10" height="29" border="0"></td>
                                          </tr>
                                      </table>
                              </form>
                              </div>
                              </td>
                        </tr>
                        <tr>
                              <td width="796" valign="top" id="fullheight" bgcolor="#FFFF00">
                                    <table id="fullheight" width="796" cellspacing="0" cellpadding="0" border="0">
                                          <tr>
                                                <td id="leftborder" width="7" height="200"><img src="/gfx/shim.gif" width="7" border="0"></td>
                                                <td width="7"><img src="/gfx/shim.gif" width="7" border="0"></td>
                                                <td width="150"></td>
                                                <td width="10"><img src="/gfx/shim.gif" width="10" border="0"></td>
                                                <td width="608"></td>
                                                <td width="7"><img src="/gfx/shim.gif" width="7" border="0"></td>
                                                <td id="leftborder" width="7"><img src="/gfx/shim.gif" width="7" border="0"></td>
                                          </tr>
                                    </table>
                          </td>
                        </tr>
              </table>
            </td>
            <td width="2" class="panelbordercolor"><img src="/gfx/shim.gif" width="2" border="0"></td>
            <td class="whitecolor"><img src="/gfx/shim.gif" width="1" border="0"></td>
      </tr>
      <tr><td height="2" class="whitecolor"><img src="/gfx/shim.gif" width="1" border="0"></td>
            <td class="panelbordercolor" colspan="3"><img src="/gfx/shim.gif" width="1" border="0"></td>
            <td class="whitecolor"><img src="/gfx/shim.gif" width="1" border="0"></td>
      </tr>
      <tr><td height="10" colspan="5" class="whitecolor"><img src="/gfx/shim.gif" width="1" border="0"></td></tr>
</table>
</div>
</body>
</html>

the stylesheet contains

/* TAG RE-DEFINITION */
html, body {
      background-color: #FFFFFF;
      margin: 0px;
      padding: 0px;
      font-family:Arial, Helvetica, sans-serif;
      height: 100%;
}

/* NEW ELEMENTS */
#fullheight{
      vertical-align: top;
      height: 100%;
      background-position: top;
}
.panelbordercolor {
      background-color: #B7BDFF;
}
.whitecolor {
      background-color: #FFFFFF;
      vertical-align: top;
}
.borderblue {
      border: 1px solid #AEC1E1;
}
.menubordercolor {
      background-color: #AEC1E1;
}

#toptext .text{
      font-family: Arial, Helvetica, sans-serif;
      font-size: 9px;
      color: #000000;
      background-color: #FFFFFF;
      margin: 0px;
      padding: 0px;
      text-align: right;
      vertical-align: middle;
      border: 0px;
}

#topmenu{
      padding: 0px;
      margin: 0px;
      vertical-align: middle;
      font-family:Arial, Helvetica, sans-serif;
      background-image: url(/gfx/barre_bleu.gif);
      background-repeat: repeat-x;
      border: 0px;
      text-align: left;
}

#topmenu .text{
      font-family: Arial, Helvetica, sans-serif;
      font-size: 11px;
      font-style: normal;
      font-weight: bold;
      color: #FFFFFF;
      vertical-align: middle;
}

/* Search ROW */
#search{
      padding: 0px;
      margin: 0px;
      font-family:Arial, Helvetica, sans-serif;
      font-size: 12px;
      font-weight: bold;
      color: #000000;
      border: 0px;
}

#search form {
      font-family:Arial, Helvetica, sans-serif;
      font-size: 12px;
      font-weight: bold;
      color: #000000;
      text-align: left;
}

#search .inputtext{
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
      color: #000000;
      text-decoration: none;
      background-color : #FFFFFF;
      font-weight: bold;
      border : 1px solid #000000;
      vertical-align: middle;
      text-align: left;
}

#search .textimage {
      border : 0px;
      vertical-align: middle;
}

#leftborder{
      padding: 0px;
      margin: 0px;
      font-family:Arial, Helvetica, sans-serif;
      background-image: url(/gfx/de.gif);
      background-repeat: repeat-y;
      border: 0px;
      height: 100%;
}

ahoffmann

you're mixing different (and partially incompatible) technologies: HTML tag attributes and CSS
You first better clean up your code and implement it using CSS only, which is more reliable than HTML tag attributes. Keep in mind that width/height of 100% is something different in various browsers.

Remove all tag attributes except class= and id=, and cellpadding="0" cellspacing="0" in table.

ddelhez

ASKER

Hello,

- what can I improve in my HTML code to have fixed height in some rows without the need to create each time a new definition in my CSS file ?
- and consequently, how, via CSS, can I insure to use all the height of the user screen with a mix of fixed height rows and one row taking the rest of the height ?

Thanks in advance

nschafer

Are you talking about the small space just below the blue bar?

Try this:

at this point in your code:
<td class="text" width="25"><input type="image" src="/gfx/search.gif" alt="Go !" class="textimage" width="25" height="16"></td>
</tr>
</table>
</div>
</td>
remove the carriage return between the </table> and </div> for some reason IE puts some extra space in there if there is a carriage return.

<td class="text" width="25"><input type="image" src="/gfx/search.gif" alt="Go !" class="textimage" width="25" height="16"></td>
</tr>
</table></div></td>

Hope this helps,

Neal

ddelhez

ASKER

Thank you for the hint,

but the problem was more general...
Why the hell does IE consider that when you put a row with a height of 100%, if you have other rows with static heights, the page is bigger than 100% of the height of the screen... while in Firefox, this problem doesn't occur, the row of 100% just take the height left by the other static rows to fill in the screen

ASKER CERTIFIED SOLUTION

nschafer

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer