nicht angemeldet
Tabellenzellen im Internet Explorer verschoben. Warum?
Ich habe leider nicht besonders viel Ahnung und hoffe daher auf Eure Hilfe!
Die Tabellenzellen sind im Internet Exploerer total verschoben. Warum?
Im Firefox ist alles in Ordung.
Ich habe einige Beiträge zu dem Thema gefunden, aber keiner hat MEIN Problem gelöst.
Hier das Problemkind:
http://kurse.medienakademie.de/~medak38/kontakt.html
Bitte helft mir! Danke.
-
Es denkt sich bestimmt jeder von Euch, warum nur eine Tabelle und keine divs!?
Das liegt am generellen Aufbau der Seite. Auf den anderen Seiten ist der Contentbereich in 16 quadratische Flächenelemente aufgeteilt und das mit CSS browserkompatibel zu lösen, ist für mich zu schwer bzw. unmöglich.
Deswegen ist der ursprüngliche Grundaufbau eine Tabelle.Vielleicht hat ja jetzt jemand erbarmen mit mir und hilft! :-)
http://kurse.medienakademie.de/~medak38/kontakt.html
-
Hallo,
Es denkt sich bestimmt jeder von Euch, warum nur eine Tabelle und keine divs!?
Exakt. Wobei auch übermäßiger Gebrauch von Divs evtl. gar nicht sein muss.
Das liegt am generellen Aufbau der Seite. Auf den anderen Seiten ist der Contentbereich in 16 quadratische Flächenelemente aufgeteilt und das mit CSS browserkompatibel zu lösen, ist für mich zu schwer bzw. unmöglich.
Sollte aber gehen.
Deswegen ist der ursprüngliche Grundaufbau eine Tabelle.
Was man aber trotzdem nicht machen sollte.
;)
Vielleicht hat ja jetzt jemand erbarmen mit mir und hilft! :-)
Das Table-Durcheinander schreckt mich irgendwie ab. Aber gut...
:)
Mir fallen auf Anhieb mehrere Möglichkeiten ein, ohne den COde jetzt en dtail analysiert zu haben, also eher allgemeine Vermutungen wodurch solche Probleme entstehen.:
-
es sind evtl. nicht überall margins und paddings gesetzt, das kann dazu führen das die Browser (unterschiedliche) Default-Werte dafür nehmen. Im FF passt es zufällig, im IE6 nicht. Falsch macht es keiner, es wurde ja keien Angabe dazu gemacht, also kann er tun wie er meint.
-
manche Tabellen-Zellen haben keinen Inhalt. Also ist da auch nichts, vielleicht kommt es deswegen zu Fehldarstellungen. WO nichts ist wird auch nichts angezeigt. Testweise ein reinklopfen. Semantischer Unfug ist es durch die Tabellen sowieso schon.
;)
Die Tabelle soll Browserkompatibilität bringen, im IE wirds aber zerhauen. Vielleicht sollte man sich das Konzept, eine Tabelle als Lösung des Problems, doch nochmal überlegen?
;)
-----
Fehler
Aha.
Das Format Ihres Postings scheint unsauber zu sein
Ja?
(z. B. keine Zeilenumbrüche,
Sind vorhanden.
keine Satzzeichen,
Sind vorhanden.
alles klein geschrieben oder ähnliches).
Nein. Ich verwenden Großkleinschreibung.
Solche Postings sind ungern gesehen, da sie oft schwer zu lesen sind.
Und was hat das mit meinem Posting zu tun?
Sind Sie sicher, dass Sie so posten möchten?
Ja, ich bin mir sicher.
-
Erstmal danke für die Hilfe, nur leider keine Lösung.
-
Hab alle margin und padding-Varianten ausprobiert. Keine Veränderung.
-
hab ich den beiden leeren Zellen drin.
-
Wie würde das mit divs aussehen? Vielleicht sollte ich es wirklich nochmal überdenken. Würde es aber eigentlich doch gerne so lösen. :-)
Vielleicht hat ja noch jemand eine Idee.
-
-
-
hallo,
Es denkt sich bestimmt jeder von Euch, warum nur eine Tabelle und keine divs!?
Auch die sind kein Allheilmittel. Aber immerhin für Layoutzwecke eher geeignet als die Zweckentfremdung einer Tabelle.
Das liegt am generellen Aufbau der Seite. Auf den anderen Seiten ist der Contentbereich in 16 quadratische Flächenelemente aufgeteilt und das mit CSS browserkompatibel zu lösen, ist für mich zu schwer bzw. unmöglich.
Das ist durchaus möglich. Folgender Vorschlag: du definierst dir zuerst ein DIV, das gewisermaßen als Container für die vier "Spalten" dient:
.cell4 {width: xxx; float: left;} -> der Namensvorschlag könnte symbolisieren, daß es eben vier "Zellen" darin geben soll
Dann definierst du dir vier "Module":
.modul1, .modul2, .modul3, modul4 {width: xxx;}
Wenn du in die "Module" noch weitere HTML-Elemente wie <p>, <hx>, <ul> <form> usw. stecken willst, kannst du das ja tun. Und wenn die nun alle jeweils einen Abstand von 1em zum Nachbarn haben sollen, definierst du das so:
.modul1 {float: left;}
.modul2 {position: relative; left 1em;}
.modul3 {position: relative; left 2em;}
.modul4 {position: relative; left 3em;}Und im HTML setzt du eben vier solche Container untereinander:
<div class="cell4">
<div class="modul1">...</div>
<div class="modul2">...</div>
<div class="modul3">...</div>
<div class="modul4">...</div>
</div>
<div class="cell4">
<div class="modul1">...</div>
<div class="modul2">...</div>
<div class="modul3">...</div>
<div class="modul4">...</div>
</div>
...[usw. - insgesamt viermal]Wie "schön" das am Ende ist, kann man diskutieren. Möglich ist es immerhin. Und die berühmte "DIV-Suppe" ist das auch nur bedingt; davon wäre zu sprechen, wenn jetzt zuviele DIVs ineinander gestopft werden. Es geht aber ohne solche tiefen Verschachtelungen.
Vielleicht hat ja jetzt jemand erbarmen mit mir und hilft! :-)
Bei deiner Tabelle bzw. bei den ineinander geschachtelten Tabellen solltest du insbesonere die "rowspan" und "colspan" prüfen.
Grüße aus Berlin
Christoph S.
-
Vielen Dank für Deine Antwort Christoph!
Du hast Dir ja richtig Arbeit gemacht.Das Prinzip habe ich verstanden. Ob ich es hinbekommen würde, weiß ich nicht. Mein Problem ist die Abgabe des Projekts (IHK) und das sehr bald...
Irgendwie muss dass doch zu lösen sein, ohne dass ich die ganze Seite nochmal umbaue.
rowspan und colspan stehen bei mir beide auf 0. Daran liegt es auch nicht.
-
Quatsch! Ich meine natürlich cellpadding="0" cellspacing="0"! :-)
Ich hab wohl gestern zu tief ins Glas geschaut!!!So sieht die Tabelle aus:
<table id="Content" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" rowspan="2"class="bildergross braunflaeche"> </td>
</tr>
<tr>
<td colspan="2" rowspan="3" class="textflaeche rotflaeche"> </td>
</tr>
<tr>
<td colspan="2" rowspan="1" class="bilduntertitel gruenflaeche"> </td>
</tr>
</table>Das dazugehörige CSS kann man sich ja im Firefox auf meiner kontakt.html anzeigen lassen.
-
hallo Brigitte,
Quatsch! Ich meine natürlich cellpadding="0" cellspacing="0"! :-)
Die beiden solltest du über deine CSS bestimmen. Das einzige, was sich über CSS nicht machen läßt, betrifft "colspan" und "rowspan".
<td colspan="2" rowspan="2"class="bildergross braunflaeche"> </td>
Und genau diese Stellen sind es, die zumindest fragwürdig sind. Darüber hinaus mußt du dir mal anschauen, wie groß der Abstand der "verschobenen" Tabelle von oben ist. Es könnte dir auffallen, daß das ziemlich genau die Länge deines "Ausklappmenüs" ist. Und wenn du das weißt, fällt dir auch eine Gegenstrategie ein.
Aber ich wiederhole den "Standardhinweis", den es bei solchen Fragen hier im Forum so gut wie immer gibt: Tabellen sind nicht für Layoutzwecke vorgesehen, sondern für tabellarische Inhalte.
Grüße aus Berlin
Christoph S.
-
Wenn ich cellpadding="0" cellspacing="0" aus dem HTML-Code raus nehme, haben die Zellen einen Abstand zueinander, obwohl es im CSS steht.
Oder wie wird es im CSS geschrieben?
padding ist logisch nur spacing nicht.Das Ausklappmenü ist doch überhaupt nicht so hoch. Oder hab ich einen Knick in der Optik? :-)
Und eine Gegenstrategie fällt mir leider auch nicht ein. Vielleicht steh ich ja auf der Leitung.Ich bin jetzt leider weg. Würd mich aber sehr über weitere Hilfe freuen. Antworte dann später oder morgen. Danke!!!
-
hallo,
Wenn ich cellpadding="0" cellspacing="0" aus dem HTML-Code raus nehme, haben die Zellen einen Abstand zueinander, obwohl es im CSS steht.
Oder wie wird es im CSS geschrieben?Probiere es mit "border-collapse: collapse;", eine meiner Ansicht nach sehr sinnvolle Einstellung, wenn man denn unbedingt eine Tabelle haben will.
Grüße aus Berlin
Christoph S.
-
Das hat funktioniert! Danke!
Aber mein eigentliches Problem ist leider immer noch nicht gelöst. :-(
Ich werd es jetzt doch mal mit divs probieren, zumindest für diese in drei Flächen aufgeteilten Seiten.Vielleicht hat ja doch noch jemand eine Idee...
-
Ich hab es jetzt doch mit divs gelöst.
Leider kann ich die Seite im Moment nicht hochladen, da der Server heute irgendwie nicht erreichbar ist.Deswegen hier der Code (bezieht sich nur auf den Contentbereich):
<div id="contentwrapper">
<div id="bildergross">bildergross</div>
<div id="textflaeche">
<div id="textflaeche_content">textflaeche</div>
</div>
<div id="bilduntertitel">
<div id="bilduntertitel_content">bilduntertitel</div>
</div>
</div>Die Verschachtelung habe ich gemacht, um für die Textbereiche ein padding zu erzeugen, dass im IE und im FF gleichermaßen funktioniert, ohne mir die Größen zu zerschießen. :-)
Hier das zugehörige CSS:
#contentwrapper {
width: 720px;
height: 540px;
margin-top: 12px;
text-align:left;
}#bildergross {
width: 360px;
height: 360px;
padding: 0;
float: left;
}#textflaeche {
width: 360px;
height: 540px;
padding: 0;
float: right;
}#textflaeche_content {
margin: 8px;
}#bilduntertitel {
width: 360px;
height: 180px;
padding:0;
float: left;
}#bilduntertitel_content {
margin: 8px;
}Funktioniert jetzt einwandfrei im IE und im FF. Safari werde ich morgen noch testen.
Trotzdem vielen Dank für Eure Hilfe!
-
-
-
-
-
-
-
-