✔ Div Layout - Hintergrundproblem

[sente]

Hallo,

ich habe sie sequentiell hinzugefügt. Also mit Bottom u. Center angefangen und dann rum probiert, bei welchem div mit dieser Eigenschaft der Spalt verschwindet.

Habs jetzt raus getan und im IE7 schauts sowieso gut aus (FF auch), jedoch im IE6 ist unten der kleine Spalt zw. bottom u. center.

MfG

//edit: Aja und noch was, was ist die einfachste Variante einen Text in einem Div unten am bottom zu positionieren, ohne line-height zu verwenden? vertical-align geht bei mir nicht und text-align hat bottom nicht als Attribut?

 

[Maik]

Habs jetzt raus getan und im IE7 schauts sowieso gut aus (FF auch), jedoch im IE6 ist unten der kleine Spalt zw. bottom u. center.

Dafür hast du die Eigenschaft nun auf das DIV #content_container angewendet.

Ansonsten versuch es mal über die Positionierung der Hintergrundbilder:

div#content_bottom{
	width: auto;
	height: 10px;
	margin-top: 0px;
	background-image: url(images/Content_Bottom.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	margin-left: auto;
	margin-right: auto;
	overflow: visible !important;
	overflow: hidden;
}

div#content_center{
	width: 994px;
	height: auto;
	background-image: url(images/Content_Center.jpg);
	background-repeat: repeat-y;
	background-position: center top;
	margin: 0px;
}

 

[sente]

Hi, danke danke danke!

Das im container_content wars... jetzt passts überall.

Nur eines würde ich noch brauchen, wie ich in einem Div die Textausrichtung auf Bottom bekomme?

Danke u. mfG

 

[Maik]

In den modernen Browsern, die die Tabellenwerte der display-Eigenschaft unterstützen, würde der CSS-Code folgendermaßen lauten:

#box {
height:50px;
border:1px solid #000;
display:table-cell;
vertical-align:bottom;
}

#box p {
margin:0;
}

<div id="box">
     <p>foobar</p>
</div>

Für den IE (auch in der aktuellen 7er Version) müsste der Text innerhalb der Box absolut am unteren Elementrand positioniert werden.

 

[sente]

Hallo, im FF funktionierts wie beschrieben, jedoch im IE7 leider nicht.

Ich glaube ich stell da einfach noch ein div mit margin-top auto und bottom 0 rein?

MfG

 

[Maik]

Ich hab doch eben darauf hingewiesen, dass auch der IE7 wie seine Vorgängerversionen die Tabelleneigenschaften zur display-Eigenschaft nicht unterstützt.

Für die IEs würde das Stylesheet somit folgendermaßen lauten:

#box { 
position:relative; 
}

#box p {
position:absolute;
bottom:0;
}

 

[sente]

Hi, das war mir schon klar - deswegen habs auch angegeben, nur nicht im stylesheet sondern implizit im p tag

<p style="margin: 0; padding: 0; position: absolute; bottom: 0;">

Gefehlt hat das pos: relative im div außen rum.
Jetzt passt es im IE7, aber dafür im FF nicht mehr (durch das pos: relative).

 

[Maik]

Ich hab dir doch heute Nacht schon mal in einem anderen Zusammenhang vorgeschlagen, dem IE sein spezifisches Stylesheet mittels eines "Conditional Comments" zuzuführen, denn so gibt es auch keine Konflikte mit den übrigen Browsern.

 

[hela]

Hallo,
ich kann mich jetzt leider nicht ins Gespräch einmischen, weil ich nicht zuhause bin und keinen Zugriff auf die Quellen habe.

Aber:
Der weiße Streifen in der Logo-Grafik im IE6 lässt sich am besten ohne wesentliche Auswirkungen auf andere Browser dadurch beheben, indem man statt des oberen Teils der Logo-Grafik einfach das ganze Logo einsetzt (weiss jetzt nicht in welchem Block).
Das ist im Quelltext m.E. auch kommentiert.

 

[sente]

Hallo Hela,
ich denke jetzt passt alles, oder sieht noch jemand einen Fehler?

Falls nicht, dank ich euch allen für die tolle Hilfe!

MfG