IE muckt bei tabellenlosem Layout

[ipu]

Hallo,

ich möchte euch bitten, mir etwas unter die Arme zu greifen
Ich bin gerade dabei, für unser Büro die Internetseite zu gestalten. Dabei möchte ich auch html, css, php usw lernen und möglichst tabellenlos etc arbeiten.
Hier könnt ihr schonmal vorab einen Blick drauf werfen. Im angehängten JPG ist die quasi-Tabelle dargestellt (das Prinzip findet man an mehreren Stellen auf der HP), so wie es in Safari, Firefox und Opera erscheint. Der IE auf Win&Mac macht allerdings große Schritte zwischen den einzelnen divs.
Die Lösung ist bestimmt im css zu suchen, aber ich weiss nicht mehr weiter.

Bitte stört euch nicht am Javascript (zB im Kontaktformular), das noch hier und da drin ist. Ich suche da auch noch nach schöneren (php) Lösungen.

Ich bin gespannt auf eure Eindrücke. Danke schonmal.

 

[stk]

Moin,

nur mal vom ganz spontanen draufschauen:

padding: 0; und margin: 0; mal überall rein wo's geht und schauen was die IE dann macht. I.d.R. hängt es damit zusammen das IE die Abstände innerhalb des Box-Models - sagen wir etwas eigenwillig - errechnet.

Für die Auflistung der Jahreszahlen solltest Du in der Tat auch ein Listenelement verwenden. Zusätlich eine <dl> für Definitionlist würde sich IMHO ganz gut anbieten:

<ul>
 <li>
 <dl>
   <dd>2004 - 2007</dd>
   <dt>Neubau …</dt>
  </dl>
 </li>
 <li>… usw.
</ul>

Über float: left bringst die <dl>-Elemente dann hübsch nebeneinander. Auf keinen Fall geht an der Ecke ein id für die divs höchstens ein class. id muß auf einer Seite eindeutig sein und darf sich nicht wiederholen.

Für's Kontaktforumlar schau mal bei http://pear.php.net vorbei. Da kriegst fertige Klassen inkl. JS-Überprüfung samt PHP-Fallback.

Gruß Stefan

 

[ipu]

Danke, Stefan, für die Tipps. Ich werde dann mal die Tage deine Vorschläge umsetzen und erzähle dann vom Ergebnis.

 

[ipu]

So, ich bin schon weitergekommen. Ist noch nicht perfekt, aber so langsam macht es sich. Ich hatte ein height:100% noch drinnen. Das hat der IE vom div geholt - somit war es entsprechend gross. Jetzt ist der Abstand immer noch größer als bei Safari, aber es wird.
Jetzt sind es nur noch Tabellen - außer den groben Blöcken halt. Ein paar Sachen verstehe ich immer noch nicht (zB wieso das php im Kontaktformular funktioniert – das immer noch nicht ganz zufriedenstellend ist; vorerst aber egal).

Endlich räume ich mal mein css auf. Mensch, da lernt man jede Minute. Mein Dank nochmal Richtung Thalmässing.

 

[stk]

Moin,

schaut doch sehr gut aus, vor allem im wichtigsten aller Browser - Lynx
Wenn Du es 150 %ig machen willst nimmst im Quellcode noch den Content vor die Navigation und rückst das per CSS passend. Freut die Suchmaschinen sehr .

Apropos: http://www.seekport.de/seekbot/seekbot.cgi?q=http://www.spai.de/at/ref_infra.php&submit=Seite+testen

Gruß Stefan

 

[ipu]

schaut doch sehr gut aus, vor allem im wichtigsten aller Browser - Lynx

Danke für die Blumen Lynx hatte ich mir noch gar nicht angeschaut. Habe es aber soeben heruntergeladen und werde es in Zukunft immer schön benutzen, um die Inhalte und deren Lesbarkeit zu prüfen. Guter Tipp!

Wenn Du es 150 %ig machen willst nimmst im Quellcode noch den Content vor die Navigation und rückst das per CSS passend. Freut die Suchmaschinen sehr .

Ja, das will ich gerne machen. Ich denke auch, dass ich mit dem Layout der Seiten weniger Stress bekomme, wenn ich die divs mit position:fixed oder ähnlichem versehe. Noch ist es mir zu schwammig.

Apropos: http://www.seekport.de/seekbot/seekbot.cgi?q=http://www.spai.de/at/ref_infra.php&submit=Seite+testen

Ja, das ist ja mal eine klasse Seite. Da werde auch wieder viel von zehren. Da gibt es ja auch viele Tipps, super.

Gruß Stefan

Gruß zurück Ingo

Edit: Karma gibt's später. Muss erstmal andere beglücken ...

 

[stk]

Moin

sei vorsichtig mit position:fixed! IE geht dir dabei garantiert in die Grätsche und Opera je nach Konstrukt (kurz: Elternelement absolute und Kindelement fixed) auch.

Gruß Stefan

 

[ipu]

Hmm, ich werde erstmal zusehen, dass ich die Seiten mit Inhalt fülle. Im Augenblick sieht es ja relativ ansehnlich aus. Den css-Umbau mache ich später. Auf der Büroseite habe ich vorab 2 Seiten gestellt und habe den Start incl. Inhalt für den 1. Juni angekündigt.
Jetzt muss ich mich erstmal um meine Bauherren kümmern. Wenn so ein Projekt dem Ende zugeht, kommen die Extrawünsche. Die muss ich zuerst zufriedenstellen.
Wegen dem Classic melde ich mich bald.

 

[Timotheus]

Hallo,

schicke Seite hast du da gestaltet. Mitunter verrückt sich dein "Inhaltsfenster" bei mir im Firefox 1.5 auf Windows, wenn man einen Untermenüpunkt (linke Seite) auswählt. Hast vielleicht irgendwo zwei Einstellungen die verschieden sind. Am besten die Zentrierung auch zentral regeln, falls du das nicht schon gemacht hast.

Gruß, Tim.

 

[ipu]

...schicke Seite hast du da gestaltet. Mitunter verrückt sich dein "Inhaltsfenster" bei mir im Firefox 1.5 auf Windows, wenn man einen Untermenüpunkt (linke Seite) auswählt. Hast vielleicht irgendwo zwei Einstellungen die verschieden sind. Am besten die Zentrierung auch zentral regeln, falls du das nicht schon gemacht hast.

Danke für die Blumen! *freu*
Hmm, ich werde es mal bei uns via VPC im Firefox ausprobieren.
Mitunter verrückt es auch den Inhalt optisch, wenn man von einer Seite ohne Scrollbalken zu einer Seite mit Scrollbalken wechselt. Dann sollte ich wohl den linken Rand fix setzen und die minimale Fensterbreite so wählen, dass alles wieder mittig liegt.
Danke für die Resonanz.

 

[Timotheus]

Hallo,

hab nochmal ein bisschen mit dem IE 6.0 auf Windows XP SP2 deine Seite betrachtet. Es gibt ein Problem auf der Seite Referenzen -> Büro/Verwaltung. Der Text steht unten und ist nicht sichtbar. Man muss erstmal runterscrollen. Hab daraufhin mal deine spai.css und die ref_verwaltung.php näher angesehen. Hab auch einiges probiert mit min-height:0px; und vertical-align:top;, aber leider ohne Erfolg. Weiss leider nicht wie dies zu lösen ist.Trifft ebenso für ref_wohnen.php zu. Interessanterweise tritt der Fehler nicht bei anderen Seiten mit kurzem Text auf, owohl ansich alles gleich gemacht wurde.

Tut mir leid, dass ich Dir da auch nicht weiterhelfen kann. vielleicht finde ich nochmal Zeit und probier noch was.

Gruß, Tim.

 

[ipu]

Ich werde das morgen mal im Büro auch nochmal anschauen. Ist schon seltsam; als ob er auf den beiden Seiten noch das alte css geladen hat. Da ist nämlich das Problem aufgetaucht (deshalb auch dieser thread). Ich dachte, dass ich das behoben hätte. Hmm. Jetzt geht es aber erstmal zu Bett. Morgen ist auch noch ein Tag.
Danke für deine Mühe.

 

[Timotheus]

Hallo,

kann das auch nicht richtig nachvollziehen. Hatte es gestern nochmal runtergeladen, sowohl die php als auch die css Datei und dann hat IE es bei mir korrekt angezeigt. Speichere ich allerdings die php Seite nicht als ein Dokument, sondern IE erstellt dann einen Ordner mit der css Datei und den Bildern, dann zeigt er die Verschiebung nach unten, wie im Web. Ist mir unerklärlich, da ja eigentlich jeweils die gleiche php und css Datei benutzt werden.

Falls ich nochmal Zeit habe, teste ich es auch nochmal. Evtl. aber erst morgen abend.

Gruß, Tim.

 

[ipu]

Oh, jetzt habe ich es auch gesehen. Da liegt ja doch noch ganz dick was im Argen.
Ich werde dann mal weiter die Seiten vergleichen und das css studieren ... merci

 

[Timotheus]

Hallo,

ein Lösungsvorschlag. Bei Referenzen -> Büro/Verwaltung liegt es am oberen der beiden Bilder (pb231k.jpg). Es ist zu breit. Ich habe es mal auf die 32ßpx des unteren Bildes gestützt und siehe da, der Text wird oben richtig angezeigt. Bei Referenzen -> Wohnungen könnte es an dem untersten Bild liegen. Das sieht mir auch ziemlich breit aus. Wie ich gerade sehe ist es auch das pb231k.jpg.

Außerdem soll man auch <dd> und <dt> wieder schließen. Zumindest bei Referenzen -> Büro/Verwaltung ist dies einige Male mit <dd> nicht geschehen. Hatte bei mir allerdings im Firefox und IE keine Auswirkungen auf die richtige Darstellung.

Gruß, Tim.

 

[ipu]

jepp, das Bild war's!

Hallo, Tim !

Ja, danke, daran hatte es gelegen. Ich habe jetzt erstmal das Bild geändert ... später versuche ich dann nachzuvollziehen, wieso das Bild der Auslöser war. Gerade bin ich doch zu sehr mit meinem eigentlichen Beruf beschäftigt.
Ausserdem sehen die Seiten im IE immer noch schlecht aus. Ich werde wohl doch ein eigenes css für den IE basteln müssen. So macht das Ergebnis keinen Spaß.

Ich habe nach deinem Einwand nochmal meine Definitionslisten bei den Referentprojekten angeschaut und habe keine </dd> oder </dt> vermisst. Wo ist dir das denn aufgefallen? Bei den Referenzen oder auf einer ganz anderen Seite?

Schönen Tag noch. Gruß,Ingo

 

[Timotheus]

Scheint doch richtig zu sein. Hatte die ref_gewerbe.php und ref_verwaltung.php im IE geöffnet und gespeichert. In diesen gespeicherten Dateien fehlten jeweils die schließenden </dd>. Wenn ich mir jetzt die Seite mit Firefox ansehen und den Quelltext anzeigen lasse, ist alles richtig angegeben. Muss also auch ein Fehler beim SSpeichern des IE sein und nicht in deinen Seiten.

Ich nehme an, dass das Bild zu breit ist für die Box und eben erst weiter unten, wo keine andere Box daneben diese Breite behindert, angezeigt werden kann. Ist aber auch nur eine Vermutung. Am css und Quelltext kann es nicht liegen, daher hatte ich mir das Bild mal näher angesehen, ob evtl. da unterschiede zwischen den bildern sind. Wenn nämlich nur das Scmalere eingebunden wird, stimmte die Anzeige. Hängt warscheinlich auch irgendwie mit dem Boxfehler des IE zusammen.

Gruß, Tim.

 

[ipu]

...Hängt warscheinlich auch irgendwie mit dem Boxfehler des IE zusammen...

Ja, der Boxfehler trägt bestimmt seinen Teil dazu bei. Allerdings auch mein schlecht auf den IE abgestimmtes css
Ich wünsche schonmal ein schönes Wochenende. Mal gucken, was sich bis Montag alles ändert.

 

[ipu]

...
Für die Auflistung der Jahreszahlen solltest Du in der Tat auch ein Listenelement verwenden. Zusätlich eine <dl> für Definitionlist würde sich IMHO ganz gut anbieten:

<ul>
 <li>
 <dl>
   <dd>2004 - 2007</dd>
   <dt>Neubau ...</dt>
  </dl>
 </li>
 <li>... usw.
</ul>

...

Hallo, Stefan!

Ich habe da noch folgende Frage zu deinem Vorschlag:
Wieso hast du die Definitionslisten in eine Aufzählungsliste gepackt? Geht es nicht auch so?

  <dl>
   <dd>2004 - 2007</dd>
   <dt>Neubau ...</dt>
  </dl>
 <dl>... usw.

Wenn ich nämlich nun im css einfachen Aufzählungslisten einen list-style-type gebe, so bekommt (komischerweise auch und nur der <dt>-Teil) ebenfalls den "type" vorgesetzt.
Aber du wirst deinen Vorschlag ja aus einem guten Grund so gemacht haben.

Gruß, Ingo

 

[stk]

Moin,

weil es faktisch eine verschachtelte Liste ist:

a) die Aufzählung der Chronologie
b) zu jedem Eintrag innerhalb der Chronologie eine Bemerkung

a) ist durch die <ul> abgebildet
b) durch die Definitionsliste

Aber du hast recht: das sind sematische Spitzfindigkeiten. Mehr davon z.B. bei Dan Cederholm auf simplebits.com.

Beim CSS kannst Du (Kaskade halt ) den Wert den dl von ul erbt natürlich nochmal explizit anders belegen also z.B.:

ul {list-style: square outside;}
ul dl {list-style: none inside;}

Gruß