• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

background-image über drei Spalten

wumble

wumble

New member
Habe mal wieder ein Problem mit der Darstellung beim IE, ich habe eine einfach Tabelle mit drei Zeilen, eine für die Headline, eine für den Text und eine abschliessende Zeile.
Die Spalten für Text und Headline bestehen aus drei Spalten, links und rechts wird ein bestimmter Abstand bestimmt damit der Text nicht direkt am Tabellenrand anfängt und in der mittleren Spalte steht der Text.
Nun wollte ich da aber auch gerne eine Grafik hinter die einzelnen Zeilen legen und zwar über die komplette Zeile, beim Firefox klappt dies auch wunderbar, aber der IE wiederholt jede Grafik am Anfang jeder Spalte wieder. Hab es auch mit background-repeat:no-repeat versucht, klappt aber leider auch nicht.
Hier mal der Code:

HTML: 
<table border="0" Cellpadding="0" cellspacing="0">
    <tr style="height:28px; background-image:url(jpgs/oben.jpg); background-repeat:no-repeat;">
    <td style="width:20px;"> </td>
    <td style="width:475px;">HEADLINE</td>
    <td style="width:14px;"> </td>
    </tr>
    <tr style="background-image:url(jpgs/mitte.jpg);">
    <td style="width:20px;"> </td>
    <td style="width:475px;">TEXT</td>
    <td style="width:14px;"> </td>
    </tr>
    <tr style="height:28px; background-image:url(jpgs/unten.jpg);">
    <td colspan="3" style="width:509px;"> </td>
    </tr>
    </table>

Und hier die HTML:
>>klick<<


Weiß jemand woran dies liegt?
 
Im Opera sieht's auch ganz schön mistig aus...
IE hab' ich nicht.
Das was Du bei Deinem Beispiel zeigst,
kann man aber auch ohne Hintergrundgrafik machen.
Code: 
[B]<div style="border:1px solid #ff0000;">
<div style="border:1px solid #000;">[/B]
<table border="0" Cellpadding="0" cellspacing="0">  
<tr>  <td style="width:20px;"> </td>  
<td style="width:475px;">HEADLINE</td>  
<td style="width:14px;"> </td>  </tr>  
<tr>  
<td style="width:20px;"> </td>  
<td style="width:475px;">TEXT</td>  
<td style="width:14px;"> </td>  </tr>  
<tr style="height:28px;">  
<td colspan="3" style="width:509px;"> </td>  </tr>  
</table>
[B]</div></div>[/B]
 
danke für die Antwort, hätte noch schreiben sollen, das es nur als Beispiel dient, wenn es geht möchte ich dann auch aufwendigere Grafiken einsetzen. Ich könnte natürlich auch die Grafiken wo Text stehen soll nochmal in drei Teile slicen, für jede Spalte eine Grafik, aber wäre schön wenn es auch ohne diesen Aufwand geht.
 
Danke für die Links, habe mich nun auch mal versucht etwas mit divs zu beschäftigen, aber auch hier macht der IE mal wieder Probleme, er zeigt die Seite komplett falsch an.
Ich habe noch eine grosse Tabellenkonstruktion, aber eine Zeile davon habe ich nun mal versucht mit divs zu gestalten, beim Firefox wird auch alles wunderbar angezeigt, hier der Coder von den Divs

HTML: 
  <div id="login_rahmen">
  <div id="r_rand">
   <img src="jpgs/rand_innnen_rechts.jpg" alt="" style="width: 8px;  border: none;" />
   </div>
   <div id="login_header">
   <img src="jpgs/login_header.jpg" alt="" style="width: 196px; height: 16px; border: none;" />
   </div>
   <div id="login_inhalt">
   <div id="login_rand">
    
   </div>
   <div id="leer">
    
   </div>
   <form action="<?php echo $_SERVER[PHP_SELF];?>" method="post">
   <input type="text" name="user" id="input"><br><br>
   <input type="text" name="userpw" id="input"><br><br><br><br>
   <input type="submit" name="submit" id="submit" value=" "/><br><br>
   <a href="#"><img src="jpgs/registrieren.jpg" alt="" style="width: 84px; height: 18px; border: none;" /></a>
   <a href="#"><img src="jpgs/passwort.jpg" alt="" style="width: 84px; height: 18px; border: none;" /></a>
   </form>
   </div> 
   </div>

Und hier die grosse Tabellekonstruktion:
HTML: 
  <TABLE WIDTH="1024" BORDER="0" CELLSPACING="0" CELLPADDING="0" align="center">
<TR>
<TD COLSPAN="5"><img src="jpgs/top_rand.jpg" alt="" style="width: 1024px; height: 12px; border: none;"></TD>
</TR>
<TR>
<TD ROWSPAN="4"><img src="jpgs/linker_rand.jpg" alt="" style="width: 38px; border: none;" /></TD>
<TD BGCOLOR="#FFFFFF" ALIGN="CENTER" VALIGN="TOP" COLSPAN="3" ><img src="jpgs/header.jpg" alt="" style="width: 950px; height: 130px; border: none;" /></TD>
<TD BGCOLOR="#FFFFFF" ALIGN="CENTER" VALIGN="TOP" ROWSPAN="4" ><img src="jpgs/rechter_rand.jpg" alt="" style="width: 36px;  border: none;" /></TD>
</TR>
<TR>
<TD COLSPAN="3" >
<?php
include ("pages/navi.html");
?>
</TD>
</TR>
<TR>
<TD COLSPAN="3" ><img src="jpgs/bt-bottom_rand.jpg" alt="" style="width: 950px; height: 9px; border: none;" /></TD>
</TR>
<TR>
<TD BGCOLOR="#565656" ALIGN="CENTER" VALIGN="TOP" >
<?php
  include ("pages/thema.php");
  ?>
</TD>
<TD BGCOLOR="#565656" ALIGN="CENTER" VALIGN="TOP" >
<table border="0" cellpadding="0" cellspacing="0">
  <tr>
  <td rowspan="3" style="width:8px; background-color:#565656;"> </td>
<td><img src="jpgs/sponsor_header.jpg" alt="" style="width: 525px; height: 16px; border: none;" /></td>
<td rowspan="3" style="width:8px; background-color:#565656;"> </td>
  </tr>
  <tr>
  <td><img src="jpgs/sponsor_logo.jpg" alt="" style="width: 525px; height: 81px; border: none;" /></td>
  </tr>
  <tr>
  <td style="background-color:#565656;"> </td>
  </tr>
  </table>
</TD>
<TD BGCOLOR="#565656" ALIGN="CENTER" VALIGN="TOP" >
  <?php
  include ("pages/login.php");
  ?>
  </td>
  </tr>
  <tr>
  <td colspan="5"><img src="jpgs/bottom.jpg" alt="" style="width: 1024px; height: 27px; border: none;" /></td>
  </tr>
  </table>


hier der Link zur Seite mit dem genannten Problem:
>>klick<<
gibt es auch irgendeine Möglichkeit das der IE dies auch richtig anzeigt?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben