1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  2. Unsere jährliche Weihnachts-Banner-Aktion hat begonnen! Wir freuen uns auf viele, viele kreative Vorschläge.
    Mehr dazu könnt Ihr hier nachlesen: Weihnachtsbanner 2016

    Information ausblenden

IE muckt bei tabellenlosem Layout

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von ipu, 05.04.06.

  1. ipu

    ipu Apfel der Erkenntnis

    Dabei seit:
    05.05.04
    Beiträge:
    732
    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.
     

    Anhänge:

  2. stk

    stk Grünapfel

    Dabei seit:
    05.01.04
    Beiträge:
    7.141
    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:
    Code:
    <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 gefällt das.
  3. ipu

    ipu Apfel der Erkenntnis

    Dabei seit:
    05.05.04
    Beiträge:
    732
    Danke, Stefan, für die Tipps. Ich werde dann mal die Tage deine Vorschläge umsetzen und erzähle dann vom Ergebnis.
     
  4. ipu

    ipu Apfel der Erkenntnis

    Dabei seit:
    05.05.04
    Beiträge:
    732
    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.
     
  5. stk

    stk Grünapfel

    Dabei seit:
    05.01.04
    Beiträge:
    7.141

    Anhänge:

  6. ipu

    ipu Apfel der Erkenntnis

    Dabei seit:
    05.05.04
    Beiträge:
    732
    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!
    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.
    Ja, das ist ja mal eine klasse Seite. Da werde auch wieder viel von zehren. Da gibt es ja auch viele Tipps, super.
    Gruß zurück ;) Ingo

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

    stk Grünapfel

    Dabei seit:
    05.01.04
    Beiträge:
    7.141
    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
     
  8. ipu

    ipu Apfel der Erkenntnis

    Dabei seit:
    05.05.04
    Beiträge:
    732
    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. ;)
     
  9. Timotheus

    Timotheus Gast

    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 gefällt das.
  10. ipu

    ipu Apfel der Erkenntnis

    Dabei seit:
    05.05.04
    Beiträge:
    732
    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.
     
  11. Timotheus

    Timotheus Gast

    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.
     
  12. ipu

    ipu Apfel der Erkenntnis

    Dabei seit:
    05.05.04
    Beiträge:
    732
    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.
     
  13. Timotheus

    Timotheus Gast

    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.
     
  14. ipu

    ipu Apfel der Erkenntnis

    Dabei seit:
    05.05.04
    Beiträge:
    732
    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
     
    1 Person gefällt das.
  15. Timotheus

    Timotheus Gast

    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.
     
  16. ipu

    ipu Apfel der Erkenntnis

    Dabei seit:
    05.05.04
    Beiträge:
    732
    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
     
  17. Timotheus

    Timotheus Gast

    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.
     
  18. ipu

    ipu Apfel der Erkenntnis

    Dabei seit:
    05.05.04
    Beiträge:
    732
    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. :)
     
  19. ipu

    ipu Apfel der Erkenntnis

    Dabei seit:
    05.05.04
    Beiträge:
    732
    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?
    Code:
      <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. o_O
    Aber du wirst deinen Vorschlag ja aus einem guten Grund so gemacht haben.

    Gruß, Ingo
     
  20. stk

    stk Grünapfel

    Dabei seit:
    05.01.04
    Beiträge:
    7.141
    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ß
     

Diese Seite empfehlen