Andre Grumbach: Probleme mit Firefox

Hallo zusammen,
ich versuche derzeit eine Webseite zu erstellen, die aus mehreren Divs besteht.
Einige dieser Divs sollen Scrollbar sein (Soweit funktioniert es auch, jedenfalls im IE).

Hierzu baue ich eine Tabelle mit mehreren Zeilen und Zellen auf (Beispiel s.u.).

Nun weiß ich bestimmten Zellen und Zeilen ein Variable Breite/Höhe wie z.B. 70% zu und dem DIV einen Breite/Höhe von 100 bzw. 99 Prozent.
Dies funktioniert im IE auch wunderbar, so das der DIV 100/99% der Celle ausfüllt, jedoch bekomme ich im Firefox ein DIV mit 99/100% der Seite und nicht der Celle.
Kann es sein, das FireFox bei den Prozentangaben immer auf die komplette Seite gehen und nicht auf die Größe des übergeordnten Wertes?

Wenn ja wie kann so etwas umgangen werden?
Ich kann nun natürlich auch für den DIV 70% eintragen, jedoch habe ich dann im IE wieder das Problem das der DIV kleiner angezeigt wird als sie er sein sollte.

Hoffe es hat einer eine Idee bzw. kann mir sagen was ich falsch mache.

Gruß,
Andre

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>#</title>
</head>

<body>
<div id="Select_a" style="">
      <table id="Select_at" height="70%" width="100%" class="Select">

<tr>
              <td onmouseover="HideDivSelect_Highlight()" onmouseout="HideDivSelect_NoHighlight()" style="" onclick="hideLayer('Select');return false" align="right"><img id="HideDivSelect" src="_imgs/Expand.png" /></td>
          </tr>
          <tr height="95%" width="100%">
              <td style="text-decoration:none;cursor:default;">

<table id="TableList1_tElements" class="Element" border="0" style="width:100%;">
 <tr class="HeaderFooterRow" style="height:10px;">
  <td align="left"><a disabled="disabled" class="Link"><<</a> <a disabled="disabled" class="Link"><</a></td><td></td><td align="center"><a disabled="disabled" class="Link" style="font-weight:bold;">1</a>&nbsp;<a class="Link" href="javascript:__doPostBack('hlNumber','1')">2</a>&nbsp;<a class="Link" href="javascript:__doPostBack('hlNumber','2')">3</a>&nbsp;<a class="Link" href="javascript:__doPostBack('hlNumber','3')">4</a>&nbsp;<a class="Link" href="javascript:__doPostBack('hlNumber','4')">5</a>&nbsp;<a class="Link" href="javascript:__doPostBack('hlNumber','5')">6</a>&nbsp;<a class="Link" href="javascript:__doPostBack('hlNumber','6')">7</a>&nbsp;<a class="Link" href="javascript:__doPostBack('hlNumber','7')">8</a>&nbsp;<a class="Link" href="javascript:__doPostBack('hlNumber','8')">9</a>&nbsp;<a class="Link" href="javascript:__doPostBack('hlNumber','9')">10</a></td><td></td><td align="right"><a class="Link" href="javascript:__doPostBack('hlNext','1')">></a> <a class="Link" href="javascript:__doPostBack('hlEnd','279')">>></a></td>

</tr><tr>
  <td id="TableList1_CellElementTable" class="scroll" colspan="5" style="height:90%;width:100%;"><div style="OVERFLOW: auto; WIDTH: 99%; HEIGHT: 99%"><table border="0" style="height:100%;width:100%;">
   <tr>
    <td class="WhiteColumn" style="height:150px;width:20%;">
     Row1 Cell 1
    </td>
    <td class="BlackColumn" style="height:150px;width:20%;">
     Row1 Cell2
    </td>
    <td class="WhiteColumn" style="height:150px;width:20%;">
     Row1 Cell3
    </td>
    <td class="BlackColumn" style="height:150px;width:20%;">
     Row1 Cell4
    </td>
    <td class="WhiteColumn" style="height:150px;width:20%;">
     Row1 Cell5
    </td>
   </tr>
   <tr>
    <td class="BlackColumn" style="height:150px;width:20%;">
     Row2 Cell1
    </td>
    <td class="WhiteColumn" style="height:150px;width:20%;">
     Row2 Cell2
    </td>
    <td class="BlackColumn" style="height:150px;width:20%;">
     Row2 Cell3
    </td>
    <td class="WhiteColumn" style="height:150px;width:20%;">
     Row2 Cell4
    </td>
    <td class="BlackColumn" style="height:150px;width:20%;">
     Row2 Cell5
    </td>
   </tr><tr>
    <td class="WhiteColumn" style="height:150px;width:20%;">
     Row1 Cell 1
    </td>
    <td class="BlackColumn" style="height:150px;width:20%;">
     Row3 Cell2
    </td>
    <td class="WhiteColumn" style="height:150px;width:20%;">
     Row3 Cell3
    </td>
    <td class="BlackColumn" style="height:150px;width:20%;">
     Row3 Cell4
    </td>
    <td class="WhiteColumn" style="height:150px;width:20%;">
     Row3 Cell5
    </td>
   </tr>
   <tr>
    <td class="BlackColumn" style="height:150px;width:20%;">
     Row4 Cell1
    </td>
    <td class="WhiteColumn" style="height:150px;width:20%;">
     Row4 Cell2
    </td>
    <td class="BlackColumn" style="height:150px;width:20%;">
     Row4 Cell3
    </td>
    <td class="WhiteColumn" style="height:150px;width:20%;">
     Row4 Cell4
    </td>
    <td class="BlackColumn" style="height:150px;width:20%;">
     Row4 Cell5
    </td>
   </tr>
  </table></div></td>

</tr><tr class="HeaderFooterRow" style="height:10px;">
  <td align="left"><a disabled="disabled" class="Link"><<</a> <a disabled="disabled" class="Link"><</a></td><td></td><td align="center"><a disabled="disabled" class="Link" style="font-weight:bold;">1</a>&nbsp;<a class="Link" href="javascript:__doPostBack('hlNumber','1')">2</a>&nbsp;<a class="Link" href="javascript:__doPostBack('hlNumber','2')">3</a>&nbsp;<a class="Link" href="javascript:__doPostBack('hlNumber','3')">4</a>&nbsp;<a class="Link" href="javascript:__doPostBack('hlNumber','4')">5</a>&nbsp;<a class="Link" href="javascript:__doPostBack('hlNumber','5')">6</a>&nbsp;<a class="Link" href="javascript:__doPostBack('hlNumber','6')">7</a>&nbsp;<a class="Link" href="javascript:__doPostBack('hlNumber','7')">8</a>&nbsp;<a class="Link" href="javascript:__doPostBack('hlNumber','8')">9</a>&nbsp;<a class="Link" href="javascript:__doPostBack('hlNumber','9')">10</a></td><td></td><td align="right"><a class="Link" href="javascript:__doPostBack('hlNext','1')">></a> <a class="Link" href="javascript:__doPostBack('hlEnd','279')">>></a></td>

</tr>
</table>

</td>
    </tr>
   </table>
   </div>
   <div id="Select_z">
          <table width="100%" class="Select">
              <tr>

<td onmouseover="ShowDivSelect_Highlight()" onmouseout="ShowDivSelect_NoHighlight()" onclick="showLayer('Select');return false" align="right"><img id="ShowDivSelect" src="_imgs/Collapse.png" /></td>
              </tr>
       </table>
   </div>

</body>

</html>

  1. das problem ist das der mozilla firefox den syntax des codes sehr genau nimmt, der IE dagegen bei den meisten unvaliden codes eher nachsichtig ist. um einem div eine prozentuelle höhe zuzuweisen müssen sich die angaben auf JEDES übergeordnete element verlassen können.

    Das heißt: wenn ein div in einer tabelle zb 100% höhe haben soll, muss die darüberliegende <tr> eine fixe bzw prozentuelle hoehe haben, die darüberliegende <table>, das darüberliegende element... usw usw. bis hin zum <body> (100%) und <html> -tag (100%).

    1. Hallo fabian,
      also ich hab nun eigentlich für alle Ebene durch und jeweils eine style mit einer entsprechenden Höhe eingetragen
      Leider funktioniert es jedoch weiterhin nicht richtig (obwohl ich bei ca. 70% das nächste Div sehe, geht das Vorherige DIV einfach über drüber und verdeckt es.

      Hier mein angepasster HTML Code, vielleicht siehst du ja noch eine Stelle an der ich die Höhe vergessen hab bzw. was ich falsch gemacht habe.

      Andre

      <div id="Select_a" style="height:70%;">
            <table id="Select_at" style="height:70%;width:100%;" class="Select">
                <tr>
                    <td onmouseover="HideDivSelect_Highlight()" onmouseout="HideDivSelect_NoHighlight()" style="height:70%;" onclick="hideLayer('Select');return false" align="right">
                        <img id="HideDivSelect" src="_imgs/Expand.png" />
                    </td>
                </tr>
                <tr style="height:95%;width:100%">
                    <td style="height:95%;text-decoration:none;cursor:default;">

      <table id="TableList1_tElements" class="Element" border="0" style="height:100%;width:100%;">
       <tr class="HeaderFooterRow" style="height:10px;">
        <td align="left" style="height:15px;">
        <a disabled="disabled" class="Link"><<</a>
        <a disabled="disabled" class="Link"><</a>
       </td>
       <td style="height:15px;" align="center">
           <a disabled="disabled" class="Link" style="font-weight:bold;">1</a>&nbsp;
           <a class="Link" href="javascript:__doPostBack('hlNumber','1')">2</a>&nbsp;
           <a class="Link" href="javascript:__doPostBack('hlNumber','2')">3</a>&nbsp;
           <a class="Link" href="javascript:__doPostBack('hlNumber','3')">4</a>&nbsp;
           <a class="Link" href="javascript:__doPostBack('hlNumber','4')">5</a>&nbsp;
           <a class="Link" href="javascript:__doPostBack('hlNumber','5')">6</a>&nbsp;
           <a class="Link" href="javascript:__doPostBack('hlNumber','6')">7</a>&nbsp;
           <a class="Link" href="javascript:__doPostBack('hlNumber','7')">8</a>&nbsp;
           <a class="Link" href="javascript:__doPostBack('hlNumber','8')">9</a>&nbsp;
           <a class="Link" href="javascript:__doPostBack('hlNumber','9')">10</a>
       </td>
       <td style="height:15px;" align="right">
           <a class="Link" href="javascript:__doPostBack('hlNext','1')">></a>
           <a class="Link" href="javascript:__doPostBack('hlEnd','259')">>></a>
       </td>
       </tr>
       <tr style="height:100%;" height="100%">
        <td id="TableList1_CellElementTable" class="scroll" colspan="3" style="height:90%;width:100%;">
        <div style="OVERFLOW: auto; WIDTH: 100%; HEIGHT: 100%"><table border="0" style="height:100%;width:100%;">
         <tr>
          <td class="BlackColumn" style="height:150px;width:33.333%;">
              Row1 Cell 1
          </td>
          <td class="WhiteColumn" style="height:150px;width:33.333%;">
              Row1 Cell 2
          </td>
          <td class="BlackColumn" style="height:150px;width:33.333%;">
              Row1 Cell 3
          </td>
         </tr><tr>
          <td class="WhiteColumn" style="height:150px;width:33.333%;">
              Row2 Cell 1
          </td>
          <td class="BlackColumn" style="height:150px;width:33.333%;">
              Row2 Cell 2
          </td>
          <td class="WhiteColumn" style="height:150px;width:33.333%;">
              Row2 Cell 1
          </td>
         </tr><tr>
          <td class="BlackColumn" style="height:150px;width:33.333%;">
              Row3 Cell 1
          </td>
          <td class="WhiteColumn" style="height:150px;width:33.333%;">
              Row3 Cell 2
          </td>
          <td class="BlackColumn" style="height:150px;width:33.333%;">
              Row3 Cell 3
          </td>
         </tr><tr>
          <td class="WhiteColumn" style="height:150px;width:33.333%;">
              Row4 Cell 1
          </td>
          <td class="BlackColumn" style="height:150px;width:33.333%;">
              Row4 Cell 2
          </td>
          <td class="WhiteColumn" style="height:150px;width:33.333%;">
              Row4 Cell 3
          </td>
         </tr><tr>
          <td class="BlackColumn" style="height:150px;width:33.333%;">
              Row5 Cell 1
          </td>
          <td class="WhiteColumn" style="height:150px;width:33.333%;">
              Row5 Cell 2
          </td>
          <td class="BlackColumn" style="height:150px;width:33.333%;">
              Row5 Cell 3
          </td>
         </tr>
        </table></div></td>
       </tr><tr class="HeaderFooterRow" style="height:10px;">
        <td align="left"><a disabled="disabled" class="Link"><<</a> <a disabled="disabled" class="Link"><</a></td><td align="center"><a disabled="disabled" class="Link" style="font-weight:bold;">1</a>&nbsp;<a class="Link" href="javascript:__doPostBack('hlNumber','1')">2</a>&nbsp;<a class="Link" href="javascript:__doPostBack('hlNumber','2')">3</a>&nbsp;<a class="Link" href="javascript:__doPostBack('hlNumber','3')">4</a>&nbsp;<a class="Link" href="javascript:__doPostBack('hlNumber','4')">5</a>&nbsp;<a class="Link" href="javascript:__doPostBack('hlNumber','5')">6</a>&nbsp;<a class="Link" href="javascript:__doPostBack('hlNumber','6')">7</a>&nbsp;<a class="Link" href="javascript:__doPostBack('hlNumber','7')">8</a>&nbsp;<a class="Link" href="javascript:__doPostBack('hlNumber','8')">9</a>&nbsp;<a class="Link" href="javascript:__doPostBack('hlNumber','9')">10</a></td><td align="right"><a class="Link" href="javascript:__doPostBack('hlNext','1')">></a> <a class="Link" href="javascript:__doPostBack('hlEnd','259')">>></a></td>
       </tr>
      </table>

      </td>
          </tr>
         </table>
         </div>
         <div id="Select_z">
                <table width="100%" class="Select">
                    <tr>
                        <td onmouseover="ShowDivSelect_Highlight()" onmouseout="ShowDivSelect_NoHighlight()" onclick="showLayer('Select');return false" align="right"><img id="ShowDivSelect" src="_imgs/Collapse.png" /></td>
                    </tr>
             </table>
         </div>
         <div id="Details_a" style="">
            <table height="65%" width="100%" class="Select">
                <tr>
                    <td onmouseover="HideDivDetails_Highlight()" onmouseout="HideDivDetails_NoHighlight()" style="" onclick="hideLayer('Details');return false" align="right"><img id="HideDivDetails" src="_imgs/Expand.png" /></td>
                </tr>
                <tr height="95%" width="100%">
                    <td style="text-decoration:none;cursor:default;" valign="top">
                              &nbsp;
                 </td>
          </tr>
            </table>
            </div>
         <div id="Details_z">
                <table width="100%" class="Select">
                    <tr>
                        <td onmouseover="ShowDivDetails_Highlight()" onmouseout="ShowDivDetails_NoHighlight()" onclick="showLayer('Details');return false" align="right"><img id="ShowDivDetails" src="_imgs/Collapse.png" /></td>
                    </tr>
             </table>
         </div>

  2. Hi,

    Nun weiß ich bestimmten Zellen und Zeilen ein Variable Breite/Höhe wie z.B. 70% zu

    ja, besser zuweißen als einbläuen ;-)

    Dies funktioniert im IE auch wunderbar, so das der DIV 100/99% der Celle ausfüllt, jedoch bekomme ich im Firefox ein DIV mit 99/100% der Seite und nicht der Celle.
    Kann es sein, das FireFox bei den Prozentangaben immer auf die komplette Seite gehen und nicht auf die Größe des übergeordnten Wertes?

    Nein, sie gehen auf die Höhe des Containing Blocks (unter Berücksichtigung der korrekten Regeln)

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    Schreinerei Waechter
    O o ostern ...
    Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.