[CSS] Darstellungsfehler FF / IE

ottscho · 19 Oktober 2006

Morgen zusammen,

ich habe einen Fehler in meine Quellcode und kann leider nicht finden was. Der IE zeigt es korrekt an, sprich so wie es aussehen sollte. Und der FF interpretertiert den Code korrekt und stellt es auch da, aber nicht so wie ich es gern hätte. Anbei Screens und etwas Codeschnipsel. Ich hoffe ihr könnt mir weiterhelfen. Den Border der DIV's habe ich nur zur Übersicht gemacht. Die kommen später wieder weg

Darstellung IE:

Darstellung FF:

Codeschnipsel der CSS:

Code:

#content {
    background-color: #D5D5D5;
    width: 528px;
    height: 310px;
    border: solid 1px #FFFFFF;
    margin-top: 18px;
    margin-left: 18px;
    -margin-left: 10px;
    float:left;
    padding: 20px;
    vertical-align: top;
}

#beschreibung {
    width: 400px;
    float:left;
    height:65px;
    border: solid 1px #FFFFFF;
}

#image_beschreibung {
    width: 90px;
    height:65px;
    border: solid 1px #FFFFFF;
    margin-left: 425px;
    border: solid 1px #FFFFFF;
}

#info {
    float:left;
    font-weight: bold;
    height:10px;
    padding-bottom: 5px;
    border: solid 1px #FFFFFF;
}

#objekt1 {
    width: 400px;
    float:left;
    height:90px;
    border: solid 1px #FFFFFF;
}

#image_objekt1 {
    width: 90px;
    height:65px;
    border: solid 1px #FFFFFF;
    margin-left: 425px;
}

#mehr {
    width: 90px;
    height:15px;
    margin-left: 425px;
    text-align: center;
    border: solid 1px #FFFFFF;
}

#objekt2 {
    width: 400px;
    float:left;
    height:90px;
    border: solid 1px #FFFFFF;
}

#image_objekt2 {
    width: 90px;
    height:65px;
    border: solid 1px #FFFFFF;
    margin-left: 425px;
}

#kontakt {
    width: 400px;
    float:left;
    height:12px;
    font-weight: bold;
    border: solid 1px #FFFFFF;
}

Codeschnipsel der index.php

Code:

<div id="inlay">
    <div id="content">
    <h1>{$ueberschrift}</h1>
    <div id="beschreibung">
    {$beschreibung}
    </div>
    <div id="image_beschreibung">
    {$image_beschreibung}
    </div>
    <div id="info">
    {$info}
    </div>
    <div id="objekt1">
    {$objekt1}
    </div>
    <div id="image_objekt1">
    {$image_objekt1}
    </div>
    <div id="mehr">
    <a href="#">mehr...</a>
    </div>
    <div id="objekt2">
    {$objekt2}
    </div>
    <div id="image_objekt2">
    {$image_objekt2}
    </div>
    <div id="mehr">
    <a href="#">mehr...</a>
    </div>
    <div id="kontakt">
     {$kontakt}
     </div>
    </div>
 </div>

Vielen Dank

Gruß

ottscho

p.s. ich weiß nicht warum es im codetag so komisch aussieht. ich poste es nochmal hier.

Codeschnipsel CSS:
#content {
background-color: #D5D5D5;
width: 528px;
height: 310px;
border: solid 1px #FFFFFF;
margin-top: 18px;
margin-left: 18px;
-margin-left: 10px;
float:left;
padding: 20px;
vertical-align: top;
}

#beschreibung {
width: 400px;
float:left;
height:65px;
border: solid 1px #FFFFFF;
}

#image_beschreibung {
width: 90px;
height:65px;
border: solid 1px #FFFFFF;
margin-left: 425px;
border: solid 1px #FFFFFF;
}

#info {
float:left;
font-weight: bold;
height:10px;
padding-bottom: 5px;
border: solid 1px #FFFFFF;
}

#objekt1 {
width: 400px;
float:left;
height:90px;
border: solid 1px #FFFFFF;
}

#image_objekt1 {
width: 90px;
height:65px;
border: solid 1px #FFFFFF;
margin-left: 425px;
}

#mehr {
width: 90px;
height:15px;
margin-left: 425px;
text-align: center;
border: solid 1px #FFFFFF;
}

#objekt2 {
width: 400px;
float:left;
height:90px;
border: solid 1px #FFFFFF;
}

#image_objekt2 {
width: 90px;
height:65px;
border: solid 1px #FFFFFF;
margin-left: 425px;
}

#kontakt {
width: 400px;
float:left;
height:12px;
font-weight: bold;
border: solid 1px #FFFFFF;
}

Codeschnipsel Index.php:
<div id="inlay">
<div id="content">
<h1>{$ueberschrift}</h1>
<div id="beschreibung">
{$beschreibung}
</div>
<div id="image_beschreibung">
{$image_beschreibung}
</div>
<div id="info">
{$info}
</div>
<div id="objekt1">
{$objekt1}
</div>
<div id="image_objekt1">
{$image_objekt1}
</div>
<div id="mehr">
<a href="#">mehr...</a>
</div>
<div id="objekt2">
{$objekt2}
</div>
<div id="image_objekt2">
{$image_objekt2}
</div>
<div id="mehr">
<a href="#">mehr...</a>
</div>
<div id="kontakt">
{$kontakt}
</div>
</div>
</div>

hans1987 · 19 Oktober 2006

hm der fehler is normal. der IE hat bei margin tick er hat 5px mehr als der FF.

also wenn du oben links in der in der ecke anfangen willst mit dem ersten pixel macht man im css ja

FF

Code:

* {
margin:0px;
}

un für en IE musste normal

Code:

* {
margin:-5px;
}

also musst du noch im css eine Browserweiche einbauen oder 2 css files und in der seite die weiche.

auf selfhtml.org oder bei google findest bestimmt was

SevenB · 19 Oktober 2006

Validiere mal deine stylesheetseite, ich hatte fast dasselbe Problem, hab auch gedacht ich muss ne browserweiche einbaun, aber habs mit dem validieren hinbekommen.
https://validator.w3.org/

ottscho · 20 Oktober 2006

SevenB schrieb:
Validiere mal deine stylesheetseite, ich hatte fast dasselbe Problem, hab auch gedacht ich muss ne browserweiche einbaun, aber habs mit dem validieren hinbekommen.
https://validator.w3.org/

habe es eben überprüft. kann mit den fehler aber nicht wirklich was anfangen:

This page is not Valid (no Doctype found)!
Below are the results of attempting to parse this document with an SGML parser.

Error Line 1 column 0: character "#" not allowed in prolog.
#content {
?

Error Line 17 column 0: character "h" not allowed in prolog.
height:65px;
?

Error Line 34 column 0: character "b" not allowed in prolog.
border: solid 1px #FFFFFF;
?

Error Line 54 column 0: character "m" not allowed in prolog.
margin-left: 425px;
?

Error Line 71 column 0: character "}" not allowed in prolog.
}
?

Error Line 79 column 1: end of document in prolog.
}

tleilax · 20 Oktober 2006

Wenn Du Dein Stylesheet validieren willst, wäre der CSS-Validator wohl auch angebrachter...

ottscho · 20 Oktober 2006

tleilax schrieb:
Wenn Du Dein Stylesheet validieren willst, wäre der CSS-Validator wohl auch angebrachter...

danke, es ist noch früh und meine augen sind noch nicht ganz so offen

ottscho · 20 Oktober 2006

naja, damit kann ich auch nicht wirklich viel anfangen:
Fehler
URI : file://localhost/TextArea
Zeile: 8 Kontext : #content
Einlese-Fehler - -margin-left: 10px;

Zeile: 9 Kontext : float
Einlese-Fehler - left;

Zeile: 14
Einlese-Fehler - : 20px; vertical-align: top; } #beschreibung

Warnungen:
URI : file://localhost/TextArea
Zeile : 55 (Level : 1) Diese Eigenschaft gilt für Elemente auf Block-Level. : #mehr

ich denke der CSS ist ja im großen und ganzen ja richtig. wie muss ich den code ändern, dass er im FF so angezeigt wird wie im IE?

https://www.benzing-feb.de/alpha/

ottscho · 20 Oktober 2006

erledigt!

Johnson · 20 Oktober 2006

ottscho schrieb:
erledigt!

Ja, und wie erledigt ? :roll:

ottscho · 20 Oktober 2006

Johnson schrieb:
Ja, und wie erledigt ?

#image_objekt1 {
width: 90px;
height:65px;
margin-left: 425px;
margin-top: 25px;
-margin-top: 0px;
border: solid 1px #FFFFFF;
}

#image_objekt2 {
width: 90px;
height:65px;
margin-left: 425px;
margin-top: 10px;
-margin-top: 0px;
border: solid 1px #FFFFFF;

so

LasMiranda · 20 Oktober 2006

das ist aber ... Achtung ... Gülle

ottscho · 20 Oktober 2006

LasMiranda schrieb:
das ist aber ... Achtung ... Gülle

wenn du mir einen anderen Lösungvorschlag hast, und sagst warum meiner Gülle

ist, dann nimm ich den...

LasMiranda · 20 Oktober 2006

es gibt nun mal keinen Tag -margin
entweder das andere mal rausschmeißen und das - wegmachen, sozusagen umdrehen, aber das - erzeugt nur Fehler
Oder wenn beide rausschmeißen

Ich weiß grad nicht, ob durch den Fehler die Darstellung wieder auf Standard zurückgestellt wird.

strolch00 · 20 Oktober 2006

das richtige für dein problem wäre

Code:

margin: wert !important;
   margin: wert für den IE;     /* IE HACK */

sowei ich das bis jetzt bei meinen Umsetzungen feststellen konnte funktioniert das !important bei allen werten der positionierung:
padding, margin, height, width, usw.

Und bei meinen letzteren Umsetzunge habe ich es genau zweimal benutzen müssen und habe am anfang

Code:

* {
padding: 0;
margin: 0;

probier es aus funzt wunderbar. Wie das allerdings mit dem neuen IE 7 dann ist weis ich nicht, ich bild mir ein mal gelesen zu haben das der IE 7 das !important nicht mehr als "CSS HACK" annimmt.

gruß strolch

ottscho · 21 Oktober 2006

strolch00 schrieb:
das richtige für dein problem wäre

Code:

margin: wert !important; margin: wert für den IE; /* IE HACK */

sowei ich das bis jetzt bei meinen Umsetzungen feststellen konnte funktioniert das !important bei allen werten der positionierung:
padding, margin, height, width, usw.

Und bei meinen letzteren Umsetzunge habe ich es genau zweimal benutzen müssen und habe am anfang

Code:

* { padding: 0; margin: 0;

probier es aus funzt wunderbar. Wie das allerdings mit dem neuen IE 7 dann ist weis ich nicht, ich bild mir ein mal gelesen zu haben das der IE 7 das !important nicht mehr als "CSS HACK" annimmt.

gruß strolch

werde es mal probieren. ich meine auch in der letzten ct gelesen zu haben, dass der neue ie7 nicht mehr auch den hack anspricht. aber daür ein paar wichtige befehle nun beherrscht wie margin

strolch00 · 21 Oktober 2006

ottscho schrieb:
werde es mal probieren. ich meine auch in der letzten ct gelesen zu haben, dass der neue ie7 nicht mehr auch den hack anspricht. aber daür ein paar wichtige befehle nun beherrscht wie margin

richtig und wenn er es immer noch net gelernt hat wie man einen Quelltext vom Silbertablet isst dann hauen wir ihn wieder mit Hack´s den Rachen voll man findet immer Mittel und Wege

in diesem Sinne viel Erfolg

[CSS] Darstellungsfehler FF / IE

ottscho

Well-known member

hans1987

heldvomerdbeerfeld

SevenB

Member

ottscho

Well-known member

tleilax

be forever curious

ottscho

Well-known member

ottscho

Well-known member

ottscho

Well-known member

Johnson

Code-Frevler

ottscho

Well-known member

LasMiranda

kanz pöhse

ottscho

Well-known member

LasMiranda

kanz pöhse

strolch00

redraft.de

ottscho

Well-known member

strolch00

redraft.de