"grafikfehler" mit internet explorer

[ohcibi]

ich mache gerade eine homepage fuer eine schule und bin bei der gestaltung der contentboxen nun ueber folgende auffaelligkeit gestolpert.... das konstrukt:

<div class="contentbox">
 <h3 class="contentboxhead">
  <div class="left">|name|</div><div class="right">|title| - |date|</div>
 </h3>
 <div class="contentboxtext">|text|</div>
</div>

mit den styledefinitionen

div.contentbox {
    margin:20px auto 0;
    width:75%;
}
div.contentbox h3.contentboxhead {
    background-color:#red;
}
div.contentbox h3.contentboxhead div.left {
    width:50%;
    float:left
}
div.contentbox h3.contentboxhead div.right {
    margin-left:50%;
    text-align:right;
}
div.contentbox div.contentboxtext {
    background-color:#light-red;
}

welches erwartungsgemaeß mit opera und mozilla bestens funktioniert, produziert unter ie einen nicht direkt einzuordnenden fehler, und zwar im sinne eines grafikfehler, so wie man es noch von konsolenspielen kennt....

also eine voellig unnachvollziehbare "vermatschung" des codes... da is der header nur zur haelfte eingefaerbt, oder eben gar nicht, und wenn man es markiert bekommt man ein bisschen eingefaerbtes zu sehen, oder auch nich, auf jeden fall ganz komisch...

das ganze liegt auf http://www.dimotionarts.de/mlg mich wuerde interessieren ob der fehler reproduzierbar is und ob jemand dieses phaenomaen kennt und weiß wie es zu beheben is....

[Jana]

Ehrlich gesagt ich sehe da nichts.
Meine Styles definiere ich aber einfacher:
.contentbox {
margin:20px auto 0;
width:75%;
}
.contentboxhead {
background-color:#red;
}
Vielleicht verstehen nicht alle Browser deine Styles ??????
Probier es mal mit der Definition eines z-index.

[ohcibi]

Ehrlich gesagt ich sehe da nichts.
Meine Styles definiere ich aber einfacher:
.contentbox {
margin:20px auto 0;
width:75%;
}
.contentboxhead {
background-color:#red;
}
Vielleicht verstehen nicht alle Browser deine Styles ??????
Probier es mal mit der Definition eines z-index.

also erstens, dass ich meine styles so "aufwendig" definiere hat seinen grund, den du verstehst, wenn du den rest vom css siehst (unter der angegebenen adresse einfach ein text.css ranhaengen) stichwort kontextselektoren aber das is erstma zweitens...

desweiteren geh ich nicht davon aus, dass es direkt ein problem der fehlerhaften css-interpretation des IEs ist (hast du dir die seite mal mit dem IE angeguckt und ueberprueft ob der fehler bei dir auch auftritt???) es sieht eben nach einem grafikfehler aus, und es bezieht sich auch lediglich auf die hintergrundfarbe.. alle anderen formatierungen hauen hin...


bitte erst die seite angucken und ueberpruefen ob der fehler reproduzierbar ist.. getestet hab ich mit ie 6 und ie 5.5
adresse: http://www.dimotionarts.de/mlg
css: http://www.dimotionarts.de/mlg/text.css

[Pingu]

Hi,

also ich würde erst einmal den HTML-Code aufräumen (ein bißchen viel Markup, IMHO):

<div class="contentbox">
    <h3><span class="name">|name|</span><span class="title">|title| - |date|</span></h3>
    <p>|text|</p>
</div>

Beim CSS würde ich einfach die Breiten- und Randangabe rauswerfen (Wozu sind die überhaupt gut?). Dann sind auch noch die Farbangaben falsch (Namen immer ohne Hash und "light-red" gibt es schon einmal gleich gar nicht.) Außerdem wenn schon "float" sollte man es auch wieder zurück nehmen (siehe p-Tag). Wobei das float mir nicht wirklich gefällt. Aber auf die Schnelle fällt mir gerade auch nichts besseres ein. Also besser so (Farben sollten natürlich noch angepaßt werden):

.contentbox {
    margin:20px auto 0;
    width:75%;
}
.contentbox h3 {
    margin: 0;
    padding: 0.3em 1em;
    background-color: red;
}
.contentbox h3 .name {
    display: block;
    float: left;
}
.contentbox h3 .title {
    display: block;
    text-align: right;
}
.contentbox p {
    clear: left;
    float: none;
    margin: 0;
    padding: 0.3em 1em;
    background-color: green;
}

Pingu

[ohcibi]

Hi,

also ich würde erst einmal den HTML-Code aufräumen (ein bißchen viel Markup, IMHO):

<div class="contentbox">
    <h3><span class="name">|name|</span><span class="title">|title| - |date|</span></h3>
    <p>|text|</p>
</div>

bis auf dass du div durch span ersetzt hast (was nutzlos is, wie ich dir schon in einem anderen thread sagte, da ich letztendlich blockelemente brauche), und nochmal div durch p isses noch genausoviel markup wie vorher...

Beim CSS würde ich einfach die Breiten- und Randangabe rauswerfen (Wozu sind die überhaupt gut?). Dann sind auch noch die Farbangaben falsch (Namen immer ohne Hash und "light-red" gibt es schon einmal gleich gar nicht.)

ich bat doch darum, erstmal zu ueberpruefen ob der fehler reproduzierbar ist.. haettest du dir das eigentliche css angesehen, haettest du gesehen, dass ich hex-codes fuer farben verwende und die farben da nur schnell hingekliert hab...

die breiten und randangaben brauch ich fuer das layout weil meine boxen nich mit <br> sondern eben durch angabe eines margins voneinander in abstand gehalten werden, so wie man das eben macht...

letztendlich hast du mir mit deiner version lediglich eine andere moeglichkeit aufgezeigt, die sich zu meiner aber kaum unterscheidet und den fehler auch nichma im ansatz behebt....

Außerdem wenn schon "float" sollte man es auch wieder zurück nehmen (siehe p-Tag). Wobei das float mir nicht wirklich gefällt.

der <p>tag steht nicht in dem <div>tag mit der float angabe... mir passt das float auch nich, aber wie dir faellt mir auch nie was bessers ein außer position absolute, was aber noch aufwendiger waere...

ich weiß nich wie oft ich es noch sagen soll: BITTE ERST DIE SEITE ANSCHAUEN, DAS CSS AUF DER SEITE ANSCHAUEN, UND DANN ANTWORTEN...... es handelt sich hier meiner ansicht nach NICHT um einen konventionellen cssinterpretationsfehler.....

[Pingu]

bis auf dass du div durch span ersetzt hast (was nutzlos is, wie ich dir schon in einem anderen thread sagte, da ich letztendlich blockelemente brauche), und nochmal div durch p isses noch genausoviel markup wie vorher...

Man sollte keine DIVs in Überschriftentags einbinden und sowieso keine Überschriften über mehrere Zeilen gehen lassen und da noch FORM-Tags und ähnliches einbauen. So strukturiert man keinen Text. Der Sinn von CSS ist es Layout und Struktur zu trennen.
Außerdem hast Du eine ID doppelt vergeben. Deswegen IDs wirklich nur verwenden, wenn es Sinn macht. Alles andere sind Klassen. Auch diese nur wenn es Sinn macht. Wenn Du genau lesen würdest, hättest Du festgestellt, daß ich oben die überflüssigen Klassendefinitionen herausgeschmissen habe. Das P-Tag anstelle des DIV-Tag hat den gleichen Sinn. Denn hier kommt die Struktur, daß jetzt Text kommt.

ich bat doch darum, erstmal zu ueberpruefen ob der fehler reproduzierbar ist.. haettest du dir das eigentliche css angesehen, haettest du gesehen, dass ich hex-codes fuer farben verwende und die farben da nur schnell hingekliert hab...

Sorry, daß habe ich mir nicht angesehen, weil ich nur das gepostete Stück gelesen habe. Dein zusätzliches Posting hatte ich auch nicht gelesen, weil ich zu diesem Zeitpunkt hier probiert habe und unsere Postings sich damit überschnitten haben.

die breiten und randangaben brauch ich fuer das layout weil meine boxen nich mit <br> sondern eben durch angabe eines margins voneinander in abstand gehalten werden, so wie man das eben macht...

Eine Box innerhalb einer Box braucht eben nicht die Breitenangaben und Ränderangaben.

letztendlich hast du mir mit deiner version lediglich eine andere moeglichkeit aufgezeigt, die sich zu meiner aber kaum unterscheidet und den fehler auch nichma im ansatz behebt....

Ich muß zugeben, daß ich den urssprünglichen Fehler nicht erkannt habe. Dies liegt aber daran, daß ich hier MacOS X habe und somit auch keinen IE. Deshalb habe ich versucht, Dir ordentlichen sauberen Code anzubieten. Denn diesen kann auch der IE einigermaßen gut anzeigen.

der <p>tag steht nicht in dem <div>tag mit der float angabe... mir passt das float auch nich, aber wie dir faellt mir auch nie was bessers ein außer position absolute, was aber noch aufwendiger waere...

Genau das ist nämlich das Problem. Zu viele Floats an der falschen Stelle, nicht richtig zurück gesetzt (clear: (left|right|both) generieren immer unerwartete Resultate in den verschiedensten Browsern.

ich weiß nich wie oft ich es noch sagen soll: BITTE ERST DIE SEITE ANSCHAUEN, DAS CSS AUF DER SEITE ANSCHAUEN, UND DANN ANTWORTEN...... es handelt sich hier meiner ansicht nach NICHT um einen konventionellen cssinterpretationsfehler.....

Richtig, es handelt sich schon um eine schlechte Struktur der eigentlichen HTML-Datei: http://validator.w3.org

Übrigens habe ich mich und auch kein anderer zu rechtfertigen. Du möchtest Hilfe, da Du eine Frage gestellt hast. Wenn Dir also andere Hinweise geben, wie man etwas anders (ob es bessser ist, lasse ich jetzt einmal dahin gestellt) machen könnte, dann komm nicht mit der Antwort: "Das muß aber so sein, weil das brauche ich wegen was anderem genau so" Weil genau das könnte nämlich das Problem. Vielleicht mußt Du Dir dann über das andere gegebenfalls auch noch einmal Gedanken machen. Soetwas nennt man auch Refactoring in der Softwareprogrammierung.

Pingu

[ohcibi]

jut also valid isse jetzej (zumindest unter neuigkeiten, wo der fehler auftritt).. war jar nich so viel wie es zuerst aussah.... das mit float hab ich jetz so jemacht wie du jesacht hast... der fehler besteht nach wie vor.....

btw: zuerst programmier ich das content management und dann setz ich das design auf, da ich aber immer direkt am design programmiere schmier ich mir im opera meistens erstma was zusammen, da die seite aber schon fuer lehrer zum gucken verfuegbar gemacht werden soll muss es eben auch fuer den ie funktionieren... das heißt also dass ich weder die html struktur noch die text.css so belassen werde, wiese momentan is sondern dann wenn das content management fertig is nochmal komplett neu, und dann fuer alle browser funktionierend und mit validem html, schreiben werde...

dann komm nicht mit der Antwort: "Das muß aber so sein, weil das brauche ich wegen was anderem genau so"

da hast du voll und ganz recht, eigentlich haette es von mir auch heißen muessen: "daran kann es nicht liegen, die boxen hab ich bislang immer so geschrieben und jetzt tritt der fehler erstmalig auf"... aber bei diesem einwand handelte es sich sowieso um ein missverstaendnis, da ich dachte du meinst das margin:20px 0 auto im div#contentbox.. die breitenangaben in den beiden (frueher) <div>s bzw. (jetzt) <span>s hab ich tatsaechlich weggelassen inzwischen...

danke trotzdem fuer die hinweise im bezug auf die <h*> tags und die sache mit dem float.......