✔ Tabellenformatierung fuer Netscape, Mozilla, IE, Opera, ..

Status
Nicht offen für weitere Antworten.
Suchfunktion

Suchfunktion

Erfahrenes Mitglied
Hallo,

ich habe eine Tabelle die soll im endeffekt so aussehen:
<<click>>

So sieht es auch im Interneexplorer aus,
aber im Mozillla, Opera, usw. sieht es so aus:
<<click>>

Hier mein Tabellen-Source:
HTML: 
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
</head>

<body class="body">
<table bordercolor="#e6c8ca" bordercolordark="#e6c8ca" bordercolorlight="#e6c8ca" width="80%" border="2" class="table" cellpadding="0" cellspacing="0">
    <!--DWLayoutTable-->
  	<tr> 
  	    <td width="44" height="43" id="date">
  	      <div class="DayOfMonth">02</div>
  		  <div class="DayOfWeek">So</div>
	    </td>
	    <td width="244" valign="middle" id="info">
		  <div class="time">20:30</div>
		  <div class="title">Babytalk</div>
		  <div class="info">
		    <span class="place">Dinner Theatre </span>
		    <span class="verkauf">| FREIER VERKAUF </span>
		    <span class="abo"></span>
		  </div>
	    </td>
	    <td width="55" valign="top" id="premiere">Premiere</td>
	  <td width="1" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
	  <td width="359" valign="top" id="bla"><!--DWLayoutEmptyCell-->&nbsp;</td>
    </tr>
	<tr height="5" id="emptyrow">&nbsp;</tr>
  </table><table bordercolor="#e6c8ca" bordercolordark="#e6c8ca" bordercolorlight="#e6c8ca" width="80%" border="2" class="table" cellpadding="0" cellspacing="0">
    <!--DWLayoutTable-->
  	<tr> 
  	    <td width="44" height="43" id="date">
  	      <div class="DayOfMonth">05</div>
  		  <div class="DayOfWeek">Mi</div>
	    </td>
	    <td width="244" valign="middle" id="info">
		  <div class="time">20.00</div>
		  <div class="title">Kleiner Mann, was nun?</div>
		  <div class="info">
		    <span class="place">Große Bühne </span>
		    <span class="verkauf">| FREIER VERKAUF </span>
		    <span class="abo">| Abo Mi</span>
		  </div>
	    </td>
	    <td width="55" valign="top" id="premiere"></td>
	  <td width="1" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
	  <td width="359" valign="top" id="bla"><!--DWLayoutEmptyCell-->&nbsp;</td>
    </tr>
	<tr height="5" id="emptyrow">&nbsp;</tr>
  </table><font size="1"> </font> 
</body>
</html>

Und hier mein CSS-Zeug:
Code: 
.body {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

.table {
	background-color: #e6c8ca;
	table-layout: auto;
}

TD#date {
	/*width: 50px;*/
	text-align: center;
	padding-left: 0px;
	padding-right: 0px;
}

.DayOfMonth {
	font-weight: bold;
	font-size: 24px;
	color: #86141c;
}

.DayOfWeek {
	font-weight: bold;
	font-size: 10px;
}

.time {
	padding-left: 5px;
	font-size: 10px;
	background-color: #ffffff;
	border: White;
}

.title {
	padding-left: 5px;
	font-size: 11px;
	font-weight: bold;
	background-color: #ffffff;
	border: White;
	padding-top: 0;
}

.info {
	padding-left: 5px;
	font-size: 11px;
	background-color: #ffffff;
	border: White;
	padding-top: 0;
}

.place {
	font-size: 10px;
	background-color: #ffffff;
	padding-top: 0;
}

.verkauf {
	font-size: 10px;
	background-color: #ffffff;
}

.abo {
	font-size: 10px;
	background-color: #ffffff;
}

TD#premiere {
	text-decoration: blink;
	background-color: white;
	padding-left: 5px;
	border: White;
	border: 0;
	color: #86141c;
	padding-top: 5px;
	font-size: 10px;
}

TD#info {
	background-color: white;
	padding-left: 5px;
	border: White;
	border: 0;
	padding: 0;
}

TD#info_ext {
	background-color: white;
	padding-left: 5px;
	border: White;
	border-left: 1px;
	/*border: 0;*/
	padding: 0;
}

TD#bla {
	background-color: white;
	padding-left: 5px;
	border: White;
	border-left: 1px;
	/*border: 0;*/
	padding: 0;
}

TR#emptyrow {
	border: 0;
	font-size: 2px;
}


Kann mir jemand sagen wie ich es bewerkstellige, dass es im Mozilla (etc.) genauso aussieht wie im IE?

Danke.
 
:suspekt:

wieso mit tabelle? mach doch div container?

ohne garantie, aber ich glaube ff moz etc zeigen tabellen immer so an.
 
Hi,

IDs müssen innerhalb eines Dokumentes eindeutig sein, d.h. sie dürfen nur ein einziges Mal vergeben
werden. Du verwendest sie jedoch häufiger. In diesem Fall solltest du das Attribut class verwenden.
Die CSS-Definitionen müssen ebenfalls angepasst werden - aus #info wird .info. Ebenso für
#premiere, #date, #bla und #emptyrow.

Die ungewollte Anzeige wird durch die Angabe border="2" verursacht. Im übrigen wird bei
mir die rechte Spalte im IE genauso angezeigt.
Abhilfe kannst du schaffen, indem du den Tabellenrahmen im CSS (.table) angibst.

CSS:
Code: 
.table {
	background-color: #e6c8ca;
	table-layout: auto;
        border: 3px solid #e6c8ca;
        margin-top: 3px;
}

TD.date {
	/*width: 50px;*/
	text-align: center;
	padding-left: 0px;
	padding-right: 0px;
}

.DayOfMonth {
	font-weight: bold;
	font-size: 24px;
	color: #86141c;
}

.DayOfWeek {
	font-weight: bold;
	font-size: 10px;
}

.time {
	padding-left: 5px;
	font-size: 10px;
	background-color: #ffffff;
	border: White;
}

.title {
	padding-left: 5px;
	font-size: 11px;
	font-weight: bold;
	background-color: #ffffff;
	border: White;
	padding-top: 0;
}

.info {
	padding-left: 5px;
	font-size: 11px;
	background-color: #ffffff;
	border: White;
	padding-top: 0;
}

.place {
	font-size: 10px;
	background-color: #ffffff;
	padding-top: 0;
}

.verkauf {
	font-size: 10px;
	background-color: #ffffff;
}

.abo {
	font-size: 10px;
	background-color: #ffffff;
}

TD.premiere {
	text-decoration: blink;
	background-color: white;
	padding-left: 5px;
	border: White;
	border: 0;
	color: #86141c;
	padding-top: 5px;
	font-size: 10px;
}

TD.info {
	background-color: white;
	padding-left: 5px;
	border: White;
	border: 0;
	padding: 0;
}

TD#info_ext {
	background-color: white;
	padding-left: 5px;
	border: White;
	border-left: 1px;
	/*border: 0;*/
	padding: 0;
}

TD.bla {
	background-color: white;
	padding-left: 5px;
	border: White;
	border-left: 1px;
	/*border: 0;*/
	padding: 0;
}

TR.emptyrow {
	border: 0;
	font-size: 2px;
}
HTML:
Ich habe die unnötigen Attribute aus den TABLE-Tags entfernt. Weiterhin wird der Abstand zwischen
den Tabellen durch den margin-top-Wert in .table innerhalb der CSS-Definitionen
geregelt.
HTML: 
  <table width="80%" class="table" cellpadding="0" cellspacing="0">
    <!--DWLayoutTable-->
  	<tr>
      <td width="44" height="43" class="date">
        <div class="DayOfMonth">02</div>
  		  <div class="DayOfWeek">So</div>
	    </td>
	    <td width="244" valign="middle" class="info">
	      <div class="time">20:30</div>
	      <div class="title">Babytalk</div>
	      <div class="info">
	        <span class="place">Dinner Theatre </span>
	        <span class="verkauf">| FREIER VERKAUF </span>
	        <span class="abo"></span>
	      </div>
	    </td>
	    <td width="55" valign="top" class="premiere">Premiere</td>
	  <td width="1" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
	  <td width="359" valign="top" class="bla"><!--DWLayoutEmptyCell-->&nbsp;</td>
    </tr>
  </table>
  <table width="80%" class="table" cellpadding="0" cellspacing="0">
    <!--DWLayoutTable-->
  	<tr>
  	    <td width="44" height="43" class="date">
  	      <div class="DayOfMonth">05</div>
  		  <div class="DayOfWeek">Mi</div>
	    </td>
	    <td width="244" valign="middle" class="info">
		  <div class="time">20.00</div>
		  <div class="title">Kleiner Mann, was nun?</div>
		  <div class="info">
		    <span class="place">Große Bühne </span>
		    <span class="verkauf">| FREIER VERKAUF </span>
		    <span class="abo">| Abo Mi</span>
		  </div>
	    </td>
	    <td width="55" valign="top" class="premiere"></td>
	  <td width="1" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
	  <td width="359" valign="top" class="bla"><!--DWLayoutEmptyCell-->&nbsp;</td>
    </tr>
  </table>
Ciao
Quaese
 
Ah suuuuuuuuuuuuuper vielen Dank! :)

Klappt alles.. fast.. :suspekt: :suspekt: :suspekt:

Also die Rahmen sind alle da, nix verzerrt oder sonstiges, das is schonmal gut, aber:
Der untere und der rechte Rahmen der Tabelle(n) sind ca. 3x so breit wie der obere und linke Rahmen.. wie kommt das?

(Was ich meine ist auf dem Bild im Anhang zu sehen)

Also wie mache ich es dass alle Rahmen gleich breit sind?
 
Hi,

den Anhang habe ich nicht gefunden ;-)

Die Rahmen oben, unten und rechts sind bei mir alle 3 Pixel breit (getestet in IE 5.01, IE 5.5, IE 6,
Netscape 6.2, Netscape 7.1, Opera 7.54 und Firefox 1.0.4).

Einzig der vertikale Rahmen in der Mitte ist breiter. Das liegt daran, dass ein Leerzeichen zum Füllen
verwendet wird. Dieses benötigt mehr Platz und deshalb passt sich die Breite des Rahmens an.
Abhilfe könnte eine weitere CSS-Klasse schaffen, in der die Schriftgrösse und die Breite definiert
wird.
Code: 
.centerBorder{ font-size: 1px;
               width: 3px;}
Aus
HTML: 
<td width="1" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
wird
HTML: 
<td class="centerBorder"><!--DWLayoutEmptyCell-->&nbsp;</td>
Damit sollten alle Rahmen - ausser der Datumsbereicht - gleich breit sein.

Ciao
Quaese
 
Hi!

Jetz hier im Anhang is das Bild ;)

kA wieso das so merkwuerdig aussieht, bei mir sind die Rahmen unterschiedlich dick :(
(Der mittlere vertikale Rahmen kann so bleiben, er dient als Abtrennung, daher ist die Breite okay so)
 

Anhänge

  • tbl4.JPG
    tbl4.JPG
    6,3 KB · Aufrufe: 76
Achja, wo wir gerade dabei sind:

Wieso wird die mittlere Linie beim Netscape Navigator & Mozilla (und so weiter) nach links versetzt,
aber beim Internetexplorer und Opera nicht?

Hier mein Source (und im Anhang Bilder; Bild 1 = IE, Opera, Bild 2 = Mozilla, Netscape)
HTML: 
<table class="table" cellpadding="0" cellspacing="0">
   <!--DWLayoutTable-->
   <tr> 
	<td width="45" height="43" class="date">

	<div class="DayOfMonth">05</div>
	<div class="DayOfWeek">Mi</div>
	</td> 
	<td width="183" valign="middle" class="info">
	 <div class="time">20.00</div>
	 <div class="title"><a href="index.php?id=kleiner_mann">Kleiner Mann, was nun?</a></div>
	 <div class="info">

	   <span class="location">Große Bühne </span>
	   <span class="verkauf">| FREIER VERKAUF </span>
	   <span class="abo">| Abo Mi</span>
	 </div>
	</td>
	<td width="70" valign="top" class="premiere"></td>
	<td width="1" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>

	<td width="249" valign="top" class="info_ext"><!--DWLayoutEmptyCell--></td>
	<td width="5" valign="top" class="premiere"><!--DWLayoutEmptyCell--></td>
   </tr>
   <tr height="5" class="emptyrow">&nbsp;</tr>
  </table>
  <table class="table2" cellpadding="0" cellspacing="0">
   <!--DWLayoutTable-->
   <tr> 
	<td width="45" height="43" class="date">

	<div class="DayOfMonth">07</div>
	<div class="DayOfWeek">Fr</div>
	</td> 
	<td width="183" valign="middle" class="info"><!--DWLayoutEmptyCell--></td>
	<td valign="top" class="premiere"><!--DWLayoutEmptyCell--></td>
	<td width="1" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
	<td width="250px" valign="top" class="info_ext">
	 <div class="time">Hamburg | 20.00</div>

	 <div class="title"><a href="index.php?id=indische_halstuch">Das indische Halstuch</a></div>
	 <div class="info">
	   <span class="location">Große Bühne </span>
	   <span class="verkauf">| FREIER VERKAUF </span>
	   <span class="abo">| ABO Fr 2</span>
	 </div>
	</td>

	<td valign="top" class="premiere"><img src="images/premiere.gif" /></td>
   </tr>
   <tr height="5" class="emptyrow">&nbsp;</tr>
  </table>

Und hieeeeeeeeeeeeeeeeer CSS:
Code: 
/*dunkel: ceb6b6 / hell: e6c8ca*/

.body {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

.table {
	background-color: #e6c8ca;
	table-layout: auto;
   border: 3px solid #e6c8ca;
   margin-top: 3px;
	width: 695;
}

.table2 {
	background-color: #ceb6b6;
	table-layout: auto;
   border: 3px solid #ceb6b6;
   margin-top: 3px;
	width: 695;
}

.date {
	text-align: center;
	padding-left: 0px;
	padding-right: 0px;
}

.DayOfMonth {
	font-weight: bold;
	font-size: 22px;
	color: #86141c;
}

.DayOfWeek {
	font-weight: bold;
	font-size: 10px;
}

.time {
	padding-left: 5px;
	font-size: 11px;
	border: White;
}

.title {
	padding-left: 5px;
	font-size: 12px;
	font-weight: bold;
	border: White;
	padding-top: 0;
}

.info {
	padding-left: 5px;
	font-size: 10px;
	background-color: #ffffff;
	border: White;
	padding-top: 0;
	width: 255px;
}

.info_ext {
	padding-left: 5px;
	font-size: 10px;
	background-color: #ffffff;
	border: White;
	padding-top: 0;
	width: 255px;
}

.location {
	font-size: 10px;
	background-color: #ffffff;
	padding-top: 0;
}

.verkauf {
	font-size: 10px;
	background-color: #ffffff;
}

.abo {
	font-size: 10px;
	background-color: #ffffff;
}

.premiere {
	text-decoration: blink;
	background-color: white;
	padding-left: 5px;
	border: White;
	border: 0;
	color: #86141c;
	padding-top: 5px;
	font-size: 10px;
	width: 55px;
}

/*TD.info {
	background-color: white;
	padding-left: 5px;
	border: White;
	border: 0;
	padding: 0;
}*/

.emptyrow {
	border: 0;
	font-size: 2px;
}

A{
 color: #000000;
 font-weight: bold;
 text-decoration: none;
}

A:hover{
 color: #86141c;
 font-weight: bold;
 text-decoration: none;
}

A:visited:hover{
 color: #86141c;
 font-weight: bold;
 text-decoration: none;
}

Und wie gesagt:
Im anhang auf Bild 1 ist die Darstellung im IE und Opera (so soll es aussehen) und Bild 2 ist die Darstellung in Mozilla und Netscape (Boese, boese! ;-) )

(Achtung: Nicht durch die Farben irritieren lassen! Es ist beabsichtigt dass sich die Farben aendern!)
 

Anhänge

  • tbl5.JPG
    tbl5.JPG
    17,7 KB · Aufrufe: 75
  • tbl6.JPG
    tbl6.JPG
    18 KB · Aufrufe: 77
Ah hat sich erledigt.. war nen Fehler im PHP-Script das die Tabelle erstellt..

Nie wieder 1200-Zeilen-Code im Texteditor schreiben :suspekt: :suspekt:
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück