Layout-Tabellen werden vom Internetexplorer falsch dargestellt.
kawasi
- css
0 bleicher0 Dr. Mabuse
Hallo zusammen,
ich habe mit Dreamwaver eine Seite erstellt.
Das Layout der Seite habe ich mit Tabellen festgelegt.
Firefox setzt dies auch ganz brav um.
Der Internet Explorer in der Version 6.0 verschiebt die Zellen jedoch bunt durcheinander.
Screenshots:
pictureminds.de/screenshots/firefox.jpg
pictureminds.de/screenshots/internetexplorer.jpg
(Die Blauen Balken sind nicht eingebaut sondern nur im Screenshot eingefügt, da noch nicht alles öffentlich ist)
Quellcode:
"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="970" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="10" height="28"></td>
<td width="30" rowspan="10" valign="top"><!--DWLayoutEmptyCell--> </td>
<td colspan="6" align="right" valign="bottom" background="Unternehmensbörse_Bilder/balken_top.gif" "><span class="text_top">
<a href="links.htm" class="text_top">Links</a> </span><a href="impressum.htm" class="text_top">Impressum</a><a href="abg.htm" class="text_top"> ABG </a></td>
<td width="10"></td>
</tr>
<tr>
<td height="4"></td>
<td width="170"></td>
<td width="30"></td>
<td width="390"></td>
<td width="25"></td>
<td width="290"></td>
<td width="15"></td>
<td></td>
</tr>
<tr>
<td rowspan="8" valign="top"><!--DWLayoutEmptyCell--> </td>
<td height="5" "></td>
<td "></td>
<td "></td>
<td "></td>
<td "></td>
<td "></td>
<td rowspan="8" valign="top"><!--DWLayoutEmptyCell--> </td>
</tr>
<tr>
<td height="96" colspan="6" valign="bottom" background="Unternehmensbörse_Bilder/headpics/welcome.gif" "><div align="right"></div></td>
</tr>
<tr>
<td height="4" "></td>
<td "></td>
<td "></td>
<td "></td>
<td "></td>
<td "></td>
</tr>
<tr>
<td height="35" colspan="6" valign="top" "><!--DWLayoutEmptyCell--> </td>
</tr>
<tr>
<td rowspan="4" valign="top" "><a href="unternehmensberatung_persoenliches.htm" class="navigation">Persönliches</a> <p><a href="wirtschaftsberatung_profil.htm" class="navigation">Profil</a> </p>
<p><a href="leistungen.htm" class="navigation">Leistungen</a></p>
<p><a href="wirtschaftsberatung_preise.htm" class="navigation">Preise</a></p>
<p> </p>
<p><a href="wirtschaftsberatung_kontakt.htm" class="navigation2">Kontakt</a></p>
<p><a href="wirtschaftsberatung_anfahrt.htm" class="navigation2">Anfahrt</a></p></td>
<td height="25" "></td>
<td colspan="4" valign="middle" "><span class="Herzlichwillkommen">Herzlich Willkommen </span></td>
</tr>
<tr>
<td height="20" colspan="5" valign="top" "><!--DWLayoutEmptyCell--> </td>
</tr>
<tr>
<td rowspan="2" valign="top" "><!--DWLayoutEmptyCell--> </td>
<td rowspan="2" valign="top" "><img src="Unternehmensbörse_Bilder/wirtschaftsberatung_title.jpg" width="390" height="205" vspace="0" border="0" align="top"> <p class="titeltext">Ommolortis numsan vullam, verostrud dolorpe rcidunt nis nis dipit, conse quam, vulputet velit prat, volorem iusto eugiam, veros euisim vent aci eugait venibh enis ea commodo od modigna consequat alis am, sum inisi.</p></td>
<td rowspan="2" valign="top" "><!--DWLayoutEmptyCell--> </td>
<td rowspan="2" valign="top" class="uboerse_ueberschrift" ">Sie Wünschen einen Eintrag in<br>
die Datenbank?
<p><span class="uboerse_auswahl">Sie haben ein Angebot ?<img src="Unternehmensbörse_Bilder/pfeil_rot.gif" width="14" height="11"> weiter</span> <br>
<img src="Unternehmensbörse_Bilder/linie_strich_rot.gif" width="253" height="6"><br>
<span class="uboerse_ueberschrift"><span class="uboerse_auswahl">Sie haben ein Gesuch ? <img src="Unternehmensbörse_Bilder/pfeil_rot.gif" width="14" height="11"> weiter</span> </span></p>
<p class="uboersetext">Die Weitergabe von Firmendaten und -adressen beziehungsweise eine Kontaktherstellung erfolgt<br> bei allen Anbietern und Interessenten nur nach schriftlicher Anweisung. <br>
Bis dahin bleiben alle Daten anonym!</p>
<p class="uboersetext"><img src="Unternehmensbörse_Bilder/linie_durchgehend_rot.gif" width="255" height="18"></p></td>
<td height="35" "></td>
</tr>
<tr>
<td height="390" valign="top"><!--DWLayoutEmptyCell--> </td>
</tr>
<tr>
<td height="270"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
"
hatte auch versucht die "leeren Zellen" mit einer Platzhaltergrafik zu füllen, aber das hatte auch nichts gebracht.
Ich habe auch schon anderer Seiten mit dieser Layoutmethode erstellt und da machte der IExplorer keine Probleme.
Bin gerade etwas ratlos und wäre für jeden Tip dankbar.
Viele Grüße
Jens
Grüße,
ich habe mit Dreamwaver eine Seite erstellt.
somit unterschreibst du doch die verzichtserklärung^^
ist es gehostet? den code so durchzuwursten ist etwas unbequem..
MFG
bleicher
Für mich ist die Arbeit mit Dreamwaver nunmal eine wichtige Hilfe aufgrund mangelnder "Direktschreibkentnisse".
Das Problem waren wohl die ganzen sinnlosen Anführungszeichen, nach deren Entfernung auch der IE alles schön anzeigt.
Allerdings bin ich jetzt bezüglich des Grundaufbaus des Layout am Schwanken, wegen den oben genannten Hinweisen auf Divs.
Hi nochmal!
Allerdings bin ich jetzt bezüglich des Grundaufbaus des Layout am Schwanken, wegen den oben genannten Hinweisen auf Divs.
Das ist schon ein falscher Denkansatz. Divs sind einfach nur Blockelemente, die man als Container benutzen kann. Divs werden aber gern fuer alles moegliche missbraucht. (DIV Suppe)
Man darf nicht vergessen, dass jedes Element formatierbar ist. (auch body und html) etwas wie <div><h1>Willkommen</h1><div> macht z.B. erstmal keinen Sinn und sollte unterlassen werden (entweder H1 ordentlich direkt formatieren oder mit IDs, meinetwegen auch Klassen, arbeiten). Ein <div><h1>Willkommen</h1><p>Begruessungstext</p></div> ist aber wieder schon sinnvoll fuer den Rahmen um den Content oder die nette Hintergrundfarbe...
Tach, der Herr!
I. d. R. ist es der MSIE, der alles frißt, aber es geschehen ja bekanntlich Zeichen und Wunder. :-D
1. Gib deiner Tabelle erst mal einen Rand damit du was siehst. (border="1")
2. Dann setzt in alle leeren TD's ein Leerzeichen damit du was siehst. ( )
3. Dann lösche alle überflüssigen Kommentare. (<!--DWLayoutEmptyCell-->)
4. Und dann schmeiß die ganzen sinnlosen Anführungszeichen in den Tabellenzellen raus. (<td ">)
Und wenn du damit fertig bist, siehst du das, was 98% aller Poster hier zur Verzweiflung treibt.
Für eine Unternehmens- bzw Wirtschaftsberatung dürfte ein solches Layout jedenfalls keine gute Werbung sein.
Dafür bist du bei selfHTML jetzt aber an der richtigen Stelle.
Vergiß den Dreanweaver...
Gruß Dr.Mabuse
Hi!
Ja, fuer eine professionelle Arbeit ist schon allein das Konzept eine Tabelle als Layout zu benuten kein gutes Zeugnis. Dringende Gruende das so zu machen (CSS hat ja auch die ein oder andere grenze) sehe ich spontan jedenfalls nicht.
Ich weiss nicht, wie es heute ist. Frueher war sowas bei Webagenturen jedenfalls normal. Es ging nicht darum Qualitaet abzuliefern sondern Quantitaet mit nettem Look. Wer Dreamweaver nicht benutzt hat, hatte kaum chancen. Ich hab damals oft gehoert "Das dauert zu lange". Ich denke von daher stammt auch die heute noch gelaeufige Einstellung (jedenfalls beim Verbraucher), das jeder Internetseiten erstellen kann und sie demzufolge auch nichts kosten koennen.
Ich kenne uber einen ehemaligen Kollegen auch noch ukrainische Agenturen, die jede gewuenschte Webseite (wohlgemerkt komplett) fuer ein paar Euro in ein oder zwei Tagen abliefern. Gut (oder individuell) kann das Ergebnis dabei eigentlich nicht sein. Mein Kollege hat jedenfalls drauf geschworen und geflucht, wie hier jemand fuer eine Seite mit Layout 100.- verlangt, wenn man doch ganze Webauftritte fuer 30.- hinbekomen kann.
Hallo Steel.
Ich bin nicht unbedingt ein Freund von "Div-Suppen" und hab auch keine Probleme mit Tabellen als Layouthilfe.
Manche Tabellen-Konstruktionen sind mit "Div-Containern" überhaupt nicht realisierbar. Jedenfalls bin ich bei einigen Versuchen schon kläglich gescheitert.
But that's possibly some defect in me!? :-)
Gruß Dr.Mabuse
Hiho!
Oha! Keiner hat was von Divsuppe gesagt!
Aber was ist denn an:
<div>
header
</div>
<ul>
menue
<ul>
<div>
content
</div>
bitte schlimm? das ist doch allemal uebersichtlicher als das Tabellenkonstrukt? meinetwegen noch ein <div>content2</div> fuer seine
Spalte neben dem Bild. und wenn man ganz verwegen ist noch ein Div um alles was nicht header ist, wenn es zu irgendwas noetig sein sollte. Seh ich aber grad nicht. Immer noch besser als z.B. so ein tr mit 6 leeren tds drin.
Das waere dann schonmal das Grundtemplate der Seite. (und wetten ich habs schneller eingetippt, als er das mit Dreamweaver als Tabelle erstellt hat?)
Hallo und danke für die vielen Antworten.
Also Ihr meint ich solle alles über Ebenen (Divs) machen?
Ich dachte Tabellen sind unproblematischer (da statischer) für Browser?
Viele Grüße
Hi!
Du KANNST und solltest vielleicht auch. Das wirft allerdings oft andere Probleme auf. *Richtung IE Schiel und z.B. an den Boxmodellbug denk*
Tabellen sind nicht statischer. Hast Du noch nie eine Zeile, Zelle,... aus ner Tabelle entfernt und daneben gesetzt? Mein erstes DOM Menue sah so aus. Die aufklappbaren Untermenues waren einfach Teile der gleichen Tabelle, die daneben gesetzt und nicht sichtbar gemacht wurden. Und auch heute bekommen viele Tabellen noch einen zweiten (dritten,...), auf dem Screen unsichtbaren, Header in der Mitte, damit mehrseitige Ausdrucke uebersichtlich bleiben.
Ubersichtlicher durfte eine CSS gestaltete Seite aber schon sein.
Dein Header koennte dann ungefaehr so aussehen:
<div>
<ul>
<li><a>Link</a></li>
<li><a>Link</a></li>
</ul>
<div>
per CSS (CSS natuerlich in einer eigenen Datei und nicht als inline styles):
Das Div relativ positioniert und mit deiner Grafik als Hintergrund
Die Liste abolut positioniert oben und rechts 0px und
Die Listenelemente inline formatiert.
Die Bulletzeichen der Liste entfernen und die Abstande anpassen.
Das finde ich einfacher, uebersichtlicher und auch flexibler als eine Tabelle. Die Navi soll nach links oben? Also statt right 0 einfach left 0. Sie soll nach unten, also bottom 0...
Aufschwatzen will ich Dir aber nichts. Vor allem mit bestimmten nicht standardkompatiblen Browsern oder bei Sonderwuenschen kann CSS echt laestig werden. Umfangreich sind die CSS Angaben eh meist. Eine Tabelle ist aber auf jeden Fall semantisch nicht korrekt, wenn sie nur dem Layout dient und keine tabellarischen daten enthaelt.
Aber manchmal... ja manchmal hat man keine Wahl und muss (noch) zur Tabelle greifen um bestimmte gewuenschte Eigenschaften zu produzieren. Genauso wie sich Frames gelegentlich nur schwer vermeiden lassen.
Bei Deinem Layout sehe ich aber spontan keine CSS Probleme lauern. Ein Problem ist oft, wenn Content und Menue stets die gleiche hoehe haben sollen. Da Dein Menue aber keine besonderen Hintergruende oder Rahmen zu haben scheint, ist das hier nicht gegeben.
Ueberlegenswert ist es.
Habe jetzt ein ordentliches CSS Tutorial durchgelesen und mich gleich ans umsetzen gemacht.
Das geht eigentlich ganz gut, außer dass ich jetzt wirklich alles per Hand schreiben muss, da Dreamwaver in der Vorschau mitunter Unsinn anzeigt.
http://www.pictureminds.de/rwi/test.htm
Nur klappt es nicht ein Bild in einem Div als Hintergrund anzulegen.
Es wird einfach nicht angezeigt. Normal als Bild integriert funktioniert es, aber ich muss etwas darüber schreiben.
Desweiteren wird der Menuecontainer 2 viel zu weit unten angezeigt obwohl
margin-top nur 37 ist *seufz*
Ist zwar gut umzusetzen, aber teilweise schlecht durchschaubar wo die Positionierungsprobleme liegen.
Viele Grüße
Habe jetzt ein ordentliches CSS Tutorial durchgelesen und mich gleich ans umsetzen gemacht.
Das hoert man gern. :)
Das geht eigentlich ganz gut, außer dass ich jetzt wirklich alles per Hand schreiben muss, da Dreamwaver in der Vorschau mitunter Unsinn anzeigt.
Ja... Am besten im Firefox oder aehnlich standardkompatiblem browser testen und dann IE tauglich machen.
http://www.pictureminds.de/rwi/test.htm
schonmal nicht schlecht.
Nur klappt es nicht ein Bild in einem Div als Hintergrund anzulegen.
Es wird einfach nicht angezeigt. Normal als Bild integriert funktioniert es, aber ich muss etwas darüber schreiben.
Nimm doch mal das / am Anfang der pfadangabe weg.
Desweiteren wird der Menuecontainer 2 viel zu weit unten angezeigt obwohl
margin-top nur 37 ist *seufz*
Schau doch mal in dein CSS. Jede Angabe wird mit einem ';' von der naechsten getrennt. Du hast da was vergessen...
Hi Kawasi,
Das geht eigentlich ganz gut, außer dass ich jetzt wirklich alles per Hand schreiben muss, da Dreamwaver in der Vorschau mitunter Unsinn anzeigt.
http://www.pictureminds.de/rwi/test.htm
Nur ein zwei Tipps am Rande, (nicht erschrecken, alles halb so Wild)
Diese Seite solltest du dir Bookmarken und deine korrigieren
Diese auch und dein CSS entsprechend korrigieren
Wenn du mit dem FF in den weiten des Web unterwegs bist eignen sich noch die Developer Toolbar und der Firebug.
Das ganze erleichtert dir die Arbeit an deiner Webseite ungemein, besonders der Firebug, der ist Klasse!
Ansonsten siehe Steel!
Grüße aus H im R,
Engin
@@Dr.Mabuse:
[…] und hab auch keine Probleme mit Tabellen als Layouthilfe.
Blinde schon. Die Reihenfolge, in der ein Screenreader eine Layout-„Tabelle“ vorliest, kann die Inhalte zur Unkenntlichkeit verzerren.
„5.3 Verwenden Sie keine Tabellen für Layout, wenn diese in linearisierter Form keinen Sinn ergeben. […] Anmerkung: Sobald Benutzeragenten Positionierung mit Hilfe von Stylesheets unterstützen, sollten Tabellen nicht mehr für Layout-Zwecke benutzt werden.“ [WCAG10]
Manche Tabellen-Konstruktionen sind mit "Div-Containern" überhaupt nicht realisierbar.
JEDE Tabellen-Konstruktion ist auch mit 'div'-Suppe realisierbar. (CSS-fähigen Browser vorausgesetzt; IEs scheiden aus.)
Jedenfalls bin ich bei einigen Versuchen schon kläglich gescheitert.
Das hört sich schon anders an.
Live long and prosper,
Gunnar
JEDE Tabellen-Konstruktion ist auch mit 'div'-Suppe realisierbar. (CSS-fähigen Browser vorausgesetzt; IEs scheiden aus.)
Jedenfalls bin ich bei einigen Versuchen schon kläglich gescheitert.
Das hört sich schon anders an.
Stefan Münz hat angesichts dieser albernen, immer wiederkehrenden Layout-Debatte im Forum mal geäußert, wer will kann ja mal versuchen die selfHTML-Seiten, die - wer hätte das gedacht - allesamt immer noch Tabellen als Layouthilfe einsetzen, div-gerecht umzubauen und gemeint "da dürften Einige ganz schön ins Schwitzen kommen".
Ich schlage vor, du fängst schon mal an. :-D
Gruß Dr.Mabuse
Hm. Das war aber ein schlechtes Beispiel, denke ich. Es gibt eine Menge Zitate von Leuten die zu der Zeit, als sie es sagten, vielleicht auch korrekt waren, aber heutzutage keinerlei Gueltigkeit mehr besitzen.
Vielleicht moechtest Du auch jemanden zitieren, der behauptet hat, die Erde sei eine Scheibe? Das galt mal als Wahrheit.
Es ist wohl auch an Dir vorbeigegangen, dass mittlerweile an einem neuen Layout gearbeitet wird. So ist das eben: never change a running system. Und etwas das gewachsenist (wie z.B. auch dieses Forum) laesst sich teilweise nur schwierig und mit grossem Aufwand umbauen.
@@Gunnar Bittersmann:
JEDE Tabellen-Konstruktion ist auch mit 'div'-Suppe realisierbar.
Hm, wirklich jede? Mit colspan/rowspan?
Live long and prosper,
Gunnar
Hi!
*grins* Na Gunnar, wie gehts euch heute? ;)
naja. sobald das Design keine festen hoehen und breiten mehr hat wird schwierig das den daneben, oder darueber stehenden mitzuteilen.
Ich finde Tabellen aehneln Frames: Manchmal braucht man die Dinger halt.
naja. sobald das Design keine festen hoehen und breiten mehr hat wird schwierig das den daneben, oder darueber stehenden mitzuteilen.
Right-Ho!
Ich hab einen Fall, bei dem sich der Seiteninhalt in der Vertikalen immer zu 100% der jeweiligen Fenstergröße ( und/oder Auflösung ) anpaßt. Sowas ist mit Divs schlechterdings nicht machbar, jedenfall noch nicht. Oder vielleicht doch? Live and learn! :-)
Gruß Dr.Mabuse
@@Dr.Mabuse:
Ich hab einen Fall, bei dem sich der Seiteninhalt in der Vertikalen immer zu 100% der jeweiligen Fenstergröße ( und/oder Auflösung ) anpaßt. Sowas ist mit Divs schlechterdings nicht machbar, jedenfall noch nicht. Oder vielleicht doch?
Natürlich.
Live and learn! :-)
... about “faux columns”.
Live long and prosper,
Gunnar
Da koennte ich was fuer dich haben:
html { padding:100px 100px 100px; height:100%; width:100%; overflow:hidden; }
body { margin:0px; height:100%; width:100%; padding:0px; background-color:#336699; overflow:scroll;}
Spiel mal damit etwas rum. (z.B. das padding vom html wegnehmen und vielleicht noch nen div in den body packen)
Das gibt lauter Elemente die Viewportgroesse besitzen.