✔ Interpretationsunterschied Firefox - IE7

Status
Nicht offen für weitere Antworten.
S

sente

Erfahrenes Mitglied
Hallo,

mal vorweg: CSS kann ich eigentlich gut und jetzt wollte ich auch mal an die Layoutgestaltung mit Divs ran gehen.

Habe außen rum einen Div Container wo ich nur die Breite (fix) und das Hintergrundbild festlege (da man ja Probleme mit divs bei heigh:auto; bekommt).
In diesen Container hab ich dann ein Left und ein Main(=Right) als Div rein getan. In den beiden Divs sind dann wieder merhere Divs drinnen, was aber irrelevant ist (denke ich).
Nun habe ich das Problem, dass der äußere Div Container im IE7 richtig dargestellt wird, aber im Firefox einfach ignoriert wird (was natürlich das ganze Layout zusammen wirft). :confused:

Weiters ignoriert bei mir der Firefox das Margin-Top im Content und der Border-Left ist auch bisschen komisch.

Vielleicht könnte sich das mal jemand bitte ansehen?
(Ist nur eine Testseite für schulische Zwecke)
Erreichbar unter: http://cstromi.cs.ohost.de

Und hier noch der Code:
gfx.css


Danke vielmals,
mit freundlichen Grüßen
Christof
 
Zuletzt bearbeitet:
Hi,

ein ähnlich gelagertes Problem hatten wir eben in dem Thema div mit float soll Elterndiv beeinflußen, wo die umschliessende Box ihre tatsächliche Höhe nicht einnimmt, und ihr Inhalt sie am unteren Elementrand überlappt.

Mit den folgenden Regelerweiterungen für das DIV #Container_Content lässt sich anstelle der ignorierten margin-top-Deklaration ein oberer Abstand für den Inhalt einrichten.

Code: 
div#Container_Content{
        width:717px;
        height:auto;
        padding-top:auto;
        clear:both;
        position:relative;
        top:5px;
}

Übrigens, eine ID muss in einem (X)HTML-Dokument eindeutig sein und darf darin nicht mehrmals vergeben werden, wie in deinem Fall die ID #Content. Hierfür ist die Klasse vorgesehen, die eine Element-Gruppe mit gleichen Formateigenschaften enthält.
 
sente hat gesagt.:
der Border-Left ist auch bisschen komisch.
Zum Vergrößern anklicken....
Dann schau dir mal das Hintergrundbild http://cstromi.cs.ohost.de/images/Content.jpg an, das für das DIV #Content verwendet wird.

Zur Gegenprobe kannst du es mit diesem Stylesheet versuchen:

Code: 
div.Content{
        /*background:url(images/Content.jpg);*/ /* auskommentiert = deaktiviert */
        border-color:#464646;
        border-style:dotted;
        border-width:2px;
        margin-top:15px;
        margin-left:5px;
        margin-right:5px;
        margin-bottom:5px;
        padding-left:10px;
        padding-top:10px;
        padding-right:10px;
        padding-bottom:10px;
        color:#464646;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size:12px;
}
Code: 
<div class="Content">...</div>
<div class="Content">...</div>
 
Hallo, vielen Dank für die rasche Antwort. :)

Ich habe mir den obrigen Thread durchgelesen, aber bin irgendwie nicht wirklich schlau daraus geworden und inwiefern das was mit meinem Problem zu tun hat? :confused:

Habe das ganze jetzt mal bissl vereinfacht und rumprobiert, geht aber trotzdem nicht.
Könntest du mir bitte direkt im verkürzten Source zeigen wie das genau funktioniert? Stehe momentan total auf der Leitung. :-/

CSS File:
Code: 
div.Container_Outside{
	width:912px;
	height:auto;
	margin-left:auto;
	margin-right:auto;
	background-image:url(images/BackGround.jpg);
	background-repeat:repeat-y;
}

div.Container_left{
	width:195px;
	height:auto;
	position:relative;
	float:left;
}

div.Container_right{
	width:717px;
	height:auto;
	position:relative;
	float:right;
}

Und die HTML:
HTML: 
<body>
	<div class="Container_Outside">
		<div class="Container_left">
		</div>
		<div class="Container_right">
		</div>
	</div>
</body>

Und wegen dem Margin-Top. Das Problem, wieso ich das top nicht nutzen kann ist, dass ich außen rum noch einen dotted Border habe. Das ist auch wiederum die Antwort auf das mit dem Hintergrundbild. :)
Ich wollte rechts vom Hintergrundbild (als eben eigener Abschnitt, z.B. für News) noch einen dotted Border und das hat ja funktioniert bis auf die linke Seite. :confused:

Danke,
mfG
Chris
 
Das Problem ähnelt sich im nicht-vergrößern der umschliessenden Box, die die floatenden Elemente aufnimmt, und hat dieselbe Ursache, nämlich das nicht-clearen der Floatumgebung.

In dem Thema hatte ich dazu auch den Link zu http://positioniseverything.net/easyclearing.html genannt, wo die Problematik aufgezeigt und eine Lösung vorgestellt wird.

Also, im Stylesheet nimmst du folgende Regeln auf:

Code: 
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
und rufst die Klasse .clearfix zusätzlich im DIV #Container_All auf:

Code: 
 <div id="Container_All" class="clearfix"> ... </div>
 
Alles brav durchgelesen, auch verstanden, aber funktioniern will es noch immer nicht. :confused:

CSS:
Code: 
div#Container_Outside{
	width:912px;
	height:auto;
	margin-left:auto;
	margin-right:auto;
	background-image:url(images/BackGround.jpg);
	background-repeat:repeat-y;
}

div.Container_left{
	width:195px;
	height:auto;
	position:relative;
	float:left;
}

div.Container_right{
	width:717px;
	height:auto;
	position:relative;
	float:right;
}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

HTML: 
<body>
	<div id="Container_Outside" class="clearfix">
		<div class="Container_left">
		</div>
		<div class="Container_right">
		</div>
	</div>
</body>

Das stimmt doch so, oder? :confused:
Und da soll noch einer sagen divs haben nur Vorteile gegenüber Tables.... *grml*
 
Und was funktioniert bei dir daran jetzt nicht?

Ich kann da nämlich keinen Fehler ausmachen und die Browser interpretieren das Stylesheet auch tadellos.
 
Hallo,

im IE7 zeigt er mir den Hintergrund an (eine kleine Zeile zumindest) und im FF ist einfach alles leer. Da ist gar nicht. :suspekt:

Mh... :confused:

MfG
Chris
 
Bei mir wird das Hintergrundbild angezeigt:

ff.jpg

Oder hast du etwa derzeit keinen Inhalt in den beiden Spalten notiert, denn dann zeigt FF bei mir das Hintergrundbild auch nicht an :suspekt:
 
Hallo!

Mh... sehr strange. :confused:
Könntest du mir bitte den Source hier rein kopiern oder die 2 Files schicken?
Das kann ja nicht sein. :suspekt:

MfG

/EDIT:
Hab den Fehler gefunden, war kein Text drinnen. IE interpretiert da ein blank rein, was ich gewohnt war. Pardon. ;)
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück