verschachtelte Tabellen - versatz bei border

Status
Nicht offen für weitere Antworten.
F

flash_kit

Grünschnabel
Hallo Zusammen,
ich machs kurz. Ich hab ein html seite gebaut und css mit border angewendet. Leider hab ich im Firefox oft ein versatz in den Linien drinne. Wenn man die Browser-Fenstergröße skaliet passieren die komischsten Dinge. Der IE macht keine Probleme. Ich hab den quelltext mehrmals gecheckt. Keine Fehler drinne. Kennt jemand von euch dieses Problem?

PHP: 
<html>
<head>
<title>test</title>
</head>
<body text="#000000" bgcolor="#DEE9DE" link="#FF0000" alink="#FF0000" vlink="#FF0000">

<table border="0" align="center" cellspacing="0" cellpadding="0">
 <tr height="50">
  <td>&nbsp;</td>
 </tr>
 <tr>
  <td valign="top">

   <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr height="20">
     <th width="70" style="border-bottom: 1pt solid rgb(102,153,102);">&nbsp;</th>
     <td rowspan="3" width="160" bgcolor="#B4C9B4" style="border-left: 1pt solid rgb(150,179,150); border-top: 1pt solid rgb(150,179,150); border-right: 1pt solid rgb(150,179,150);">&nbsp;</td>
     <td width="540" style="border-bottom: 1pt solid rgb(102,153,102);">&nbsp;</td>
    </tr>
    <tr height="80">
     <th style="border-left: 1pt solid rgb(102,153,102); background-image: url('images/gruen_header.gif');">&nbsp;</th>
     <td style="border-right: 1pt solid rgb(102,153,102); background-image: url('images/gruen_header.gif');">&nbsp;</td>
    </tr>
    <tr height="20">
     <th style="border-top: 1pt solid rgb(102,153,102); border-left: 1pt solid rgb(102,153,102);">&nbsp;</th>
     <td style="border-top: 1pt solid rgb(102,153,102); border-right: 1pt solid rgb(102,153,102);">&nbsp;</td>
    </tr>
    </table>

  </td>
 </tr>
 <tr>
  <td valign="top">

   <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr height="350">
     <th width="70" style="border-left: 1pt solid rgb(102,153,102); border-bottom: 1pt solid rgb(102,153,102);">&nbsp;</th>
     <td width="160" bgcolor="#B4C9B4" style="border-bottom: 1pt solid rgb(102,153,102); border-left: 1pt solid rgb(150,179,150); border-right: 1pt solid rgb(150,179,150);">&nbsp;</td>
     <td width="540" style="border-right: 1pt solid rgb(102,153,102); border-bottom: 1pt solid rgb(102,153,102);">&nbsp;</td>
    </tr>
    </table>

  </td>
 </tr>
 <tr height="5">
  <td valign="top">

   <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
     <td height="5" style="border-right: 1pt solid rgb(102,153,102); border-left: 1pt solid rgb(102,153,102); border-bottom: 1pt solid rgb(102,153,102); background-image: url('images/gruen_footer.gif'); background-repeat:repeat-x"><font size="0">&nbsp;</font></td>
    </tr>
   </table>

  </td>
 </tr>
</table>

</body>
</html>
 
Zuletzt bearbeitet:
nochmal anschupsen....ich hab bis jetzt noch keine Lösung gefunden!

Hat jemand einen Ansatz wo der Hase begraben sein könnte?
 
Hi, danke für die antwort!

Das ist das erste was ich geändert habe. Es hat leider nix gebracht. Es ist ein sehr merkwürdiges Phänomen.

Wahrscheinlich hilft mir nur der Weg zum umbauen - abe reigentlich sollte das doch so gehen. Ich würde schon mal gerne wissen woran das liegt.

Vieleicht noch ne andere Idee?
 
Hi,

wieso benötigst du eigentlich so viele Tabellen?

Es ist doch möglich, die innere Struktur mit nur einer einzigen Tabelle zu realisieren. Damit wäre
auch das Grössenproblem umgangen.

Im folgenden Beispiel habe ich das mal realisiert. Das Rahmengrundlayout habe ich als CSS
in den Head ausgelagert. In den Zellen der Tabelle weise ich nur noch die Rahmenstärken zu.

Quelltext:
HTML: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese" />
<style type="text/css">
  <!--
.rahmenStyle{ border-style: solid;
              border-color: rgb(150,179,150);}
 //-->
</style>
</head>
<body text="#000000" bgcolor="#DEE9DE" link="#FF0000" alink="#FF0000" vlink="#FF0000">

<table border="0" align="center" cellspacing="0" cellpadding="0">
<tr height="50">
  <td>&nbsp;</td>
</tr>
<tr>
  <td valign="top">

    <table cellpadding="0" cellspacing="0">
      <tr style="height: 20px;">
        <td class="rahmenStyle" style="width: 70px; border-width: 0 1px 1px 0;">&nbsp;</td>
        <td class="rahmenStyle" style="width: 160px; border-width: 1px 1px 1px 0; background: #B4C9B4;" rowspan="3">&nbsp;</td>
        <td class="rahmenStyle" style="width: 540px; border-width: 0 0 1px 0;">&nbsp;</td>
      </tr>
      <tr style="height: 80px;">
        <td class="rahmenStyle" style="width: 70px; border-width: 0 1px 1px 1px;">&nbsp;</td>
        <td class="rahmenStyle" style="width: 540px; border-width: 0 1px 1px 0;">&nbsp;</td>
      </tr>
      <tr style="height: 20px;">
        <td class="rahmenStyle" style="width: 70px; border-width: 0 1px 0 1px;">&nbsp;</td>
        <td class="rahmenStyle" style="width: 540px; border-width: 0 1px 0 0;">&nbsp;</td>
      </tr>
      <tr style="height: 350px;">
        <td class="rahmenStyle" style="width: 70px; border-width: 0 1px 1px 1px;">&nbsp;</td>
        <td class="rahmenStyle" style="width: 160px; border-width: 0 1px 1px 0; background: #B4C9B4;">&nbsp;</td>
        <td class="rahmenStyle" style="width: 540px; border-width: 0 1px 1px 0;">&nbsp;</td>
      </tr>
      <tr style="height: 5px;">
        <td class="rahmenStyle" style="font-size: 5px; border-width: 0 1px 1px 1px;" colspan="3">&nbsp;</td>
      </tr>
    </table>

  </td>
</tr>
</table>

</body>
</html>
Das Layout funktioniert tadellos mit IE 5.0, IE 5.5, IE 6, Opera 7.54, Netscape 7.1 und Firefox 1.0.

Ciao
Quaese
 
wow! Ich weiß auch nicht warum ich mir das so kompleziert gemacht habe...

aber das ist der richtige Weg!

Vielen Dank dafür ...

wenn ich mal wieder länger zeit haben sollte versuch ich trozdem den Fehler zu finden...

Greez
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück