• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Unterschiedliche Interpretation von CSS im Browser

D

Der_Johnny

Neues Mitglied
Ich hab ein Problem, bei dem ich nicht so recht weiterkomme. Ich habe mittels CSS DIV Elemente gebaut, die nun aber im Internet Explorer anders aussehen, als im Firefox, Safari und Chrome Browser! Im IE sieht die Ausgabe somit falsch aus. Aber ich hab keine Peilung, wie ich meinen Code so stricken kann, dass alle Browser damit klarkommen.

Schaut Euch mal folgende Page an (DIV-Elemente ganz unten auf der Seite):

Gottesdienste | Gemeindezentrum Auerstraße - Mülheim
 
Ääh, ich muss den Thread nochmal wiederbeleben, weil die Methode mit dem Doctype doch nicht ganz den gewünschten Erfolg zeigte. Ich hatte zu der Zeit nur keine Möglichkeit die Seite mit dem IE anzuschauen.

Im Generellen hat sich die Darstellung und Plazierung der DIV-Elemente verbessert. Aber im konkreten Fall bleibt der Darstellungsfehler bestehen zwischen Firefox, Safari, Chrome und IE. Seht Euch die Seite mal im Firefox und im IE an, dann seht ihr was ich meine...
 
Ich habe das alles nochmal schön aufgemalt, wie sich die unterschiedliche Interpretation darstellt:

beispiel.jpg


die gd.php sieht an der Stelle wie folgt aus:

PHP: 
<div class="blog_post">

  <div class="date_box">
        <h1><?php echo $wochentage[$wochentag]; ?></h1>
        <h2><?php echo(date('d', strtotime($zeile->datum))); ?></h2>
        <h1><?php echo $monate[$amonat]; ?></h1>
  </div>

  <div class="blog_post_title_image">

    <?php

        if (empty($zeile->image)) {
        }
        else { ?>

        <img src="<?php echo("$zeile->image"); ?> ">

    <?php } ?>

  </div>

  <div class="blog_post_title_box">
        <h2><?php echo("$zeile->beschreibung"); ?></h2>
  </div>

  <p><b>Wo: </b><?php echo("$zeile->ort"); ?>
  <br>
  <b>Zeit:</b> <?php echo(date('H:i',strtotime($zeile->time))); ?>&nbsp;Uhr<br></p>

</div>
Der DIV-Elemente sehen im CSS wie folgt aus:

Code: 
.blog_post {
    width:440px;
    padding-bottom:0px;
    border-bottom:1px solid #DDDDDD;
    margin-bottom: 15px;
}

.date_box {
    width:77px;
    height:52px;
    background-color:#dddddd;
    padding:4px;
    margin-right:10px;
    float:left;
}

.blog_post_title_box {
    height:60px;
    width: 330px;
    padding-bottom:20px;
    background-image: url(images/layout/blog_pointer.gif);
    background-repeat: no-repeat;
    background-position: 10px 60px;
}

.blog_post_title_box h2{
    height:30px;
    width: 330px;
    padding:15px;
    background-color:#dddddd;
}

.blog_post_title_image {
    height:60px;
    width: 85px;
    background-color:#dddddd;
    float:right;
}

.date_box h1{
    width:77px;
    padding-bottom:3px;
    text-align:center;
    font-size: 12px;
    line-height:12px;
    font-weight: bold;
    color: #464646;
}

.date_box h2{
    background-color:#FFFFFF;
    color: #464646;
    width:77px;
    text-align:center;
    font-size:20px;
    line-height:20px;
    padding-top:2px;
    padding-bottom:1px;
    margin-bottom:3px;
}
Über den Link im ersten Beitrag könnt ihr Euch ein Bild davon machen. Die Frage ist für mich, wie ich dieses Darstellungsproblem beheben kann! Die Darstellung im Firefox ist auch nicht ganz sauber, da die blog_post_title_box über die date_box rutscht, obwohl sie eigentich recht daneben stehen sollte, aber damit könnte ich mich abfinden. Es sollte halt alles schön in einer Reihe sein und nicht wie der IE es dargestellt versetzt untereinander...
 
Das kommt mir jetzt irgendwie bekannt vor...das muss einer der zahlreichen float bugs des IE sein. Vielleicht findest Du was, wenn Du danach googlest.

Aber die Semantik des ganzen (und ich meine jetzt nichtmal die Tabellen) erschließt sich mir nicht. Ich verstehe nicht, warum "Son" und "Mär" Überschriften erster Ordnung und "08" und "Gottesdienst" Überschriften zweiter Ordnung sind. Und warum das vier voneinander getrennte Überschriften sind. Und warum die anderen Überschriften, die vom optischen her gesehen welche sein sollen, nicht als solche ausgezeichnet sind.

Oder warum da an Deiner Problemzone überhaupt noch etwas rechts gefloatet wird.
 
Naja, Du hast schon festgestellt, dass semantisch gesehen ich noch einiges an Nachhilfe bedarf. Daher macht momentan nicht alles Sinn. ;)

Mittels Float im blog_post_image habe ich versucht, das ganze zu umgehen/lösen. Für den Firefox reichte das aus, nur der IE erschwert sich damit. Ich würd am liebsten auf den IE keine Rücksicht nehmen (scheiß Browser).

Und keine Sorge. Ich werde die ganze Seite noch ummodeln und die Tabellen rauskicken. Kommt Zeit, kommt Rat... ;)
 
Ich hab's jetzt hingekriegt, indem ich date_box, blog_post_title_box und blog_post_title_image nach links gefloatet habe und das Zeit und Ort auf dem blog_post-DIV rausgenommen habe. Das einzige, was im IE jetzt noch auffällt ist ein erhöhter Abstand zwischen dem blog_post und dem Test darunter. Aber das ist schonmal wesentlich besser als vorher.

Zum Float-Bug habe ich Einiges gefunden. Aber nichts, was in dem konkreten Fall geholfen hat.
 
Ja, im FF und IE 7 sieht es jetzt identisch aus. Im IE 6 hat es kleinere Mäkel, die ich jetzt aber vernachlässige.

Ein Zentrieren der Seite würde aufgrund des Menüs auf der linken Seite keinen Sinn machen.
 
gleiche Problem

Hallo,

ich habe das gleiche Problem - habe im stylesheet für die Tabelle als margin 1 cm hinterlegt: firefox macht das einwandfrei, aber IE ignoriert das einfach.

Hat hier auch jemand eine Idee, wie ich das Problem lösen kann?

Danke
sadry
 
Hi,

meine Seite ist Index

- die Seite habe ich übernommen und finde sie ziemlich blöde - also versuche ich an etwas neuem rumzubasteln.

Schau mal auf :

Galerie

(Links gehen zwar zur "alten" Version zurück, aber nicht andersrum...)

und hier ist auch das Problem.
 
Du solltest erstmal Dein Wissen um HTML aufbauen, Du missbrauchst ja noch Tabellen zu Layoutzwecken. Bei Dir wäre ein Neubau wohl das beste, insbesondere wenn Du sagst, dass Dir die Seite eh nicht gefällt.

Hinzu kommt ein Doctype, der den IE in den Quirks Mode setzt, wo er dann das Box Model falsch umsetzt. Das ist der wahrscheinlichste Grund für Dein Problem, bei einem CSS-Layout muss aber jeder Browser im Standards Mode laufen, sonst sind Darstellungsunterschiede garantiert.
 
sadry schrieb:
Hallo,

ich habe das gleiche Problem - habe im stylesheet für die Tabelle als margin 1 cm hinterlegt: firefox macht das einwandfrei, aber IE ignoriert das einfach.

Hat hier auch jemand eine Idee, wie ich das Problem lösen kann?

Danke
sadry
Zum Vergrößern anklicken....
sadry schrieb:
Hi,

meine Seite ist Index

- die Seite habe ich übernommen und finde sie ziemlich blöde - also versuche ich an etwas neuem rumzubasteln.

Schau mal auf :

Galerie

(Links gehen zwar zur "alten" Version zurück, aber nicht andersrum...)

und hier ist auch das Problem.
Zum Vergrößern anklicken....

Hallo Sadry,

erstmal: Du solltest zum Layouten keine Tabellen verwenden.
Sowas hat man vor 10-15 Jahren gemacht...

Dann: cm ist eine für den Bildschirm eher schlecht geeignete Maßeinheit.
Ich bin mir nicht sicher, ob Dein Problem damit zusammenhängt, aber ich
würde einfach erstmal versuchen, die Abstände in px oder em anzugeben.

Grüße
Bernhard
 
HTML 3.2 (14. Januar 1997): Neu in dieser Version sind zahlreiche Features wie Tabellen, Textfluss um Bilder, Einbindung von Applets.
Zum Vergrößern anklicken....
Auch von Wikipedia:
HTML 4.0 (18. Dezember 1997): Mit dieser Version werden Stylesheets, Skripte und Frames eingeführt.
Zum Vergrößern anklicken....
CSS Level 2 (CSS2) wurde im Mai 1998 veröffentlicht.
Zum Vergrößern anklicken....
Ich war zwar nicht "live dabei", aber theoretisch war der Missbrauch von Tabellen zu Layoutzwecken dann ja nur etwas mehr als ein Jahr lang wirklich notwendig. :shock:
 
neuroleptika schrieb:
Den ersten css2 Browser (IE5) gibt es aber erst seit 1999.
Zum Vergrößern anklicken....
Ok, das hatte ich nicht bedacht. ;ugl
Na gut, dann halt zwei bis drei Jahre. Ich finde es trotzdem phänomenal, dass sich dieses Vorgehen dermaßen etablieren konnte und man es bis heute immer wieder antrifft, obwohl CSS dann ja anscheinend schon seit 10 Jahren nutzbar ist. Ich schiebe die Schuld hiermit auf Photoshop und seine Fans. :mrgreen:
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben