[CSS] Darstellungsfehler FF / IE

ottscho

Well-known member
24 April 2006
188
3
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>
 
Zuletzt bearbeitet:
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
 
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.
}
 
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/
 
Ja, und wie erledigt ? :roll:

#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 ;)
 
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.
 
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
 
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 ;)
 
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 Erfolg8)