nicht angemeldet
DIV, Inhalt erscheint erst nach Hintergrundbild
Hallo zusammen.
Ich habe ein Layout aus verschiedenen, vertikal aneinander grenzenden DIVs gebastelt. Zunächst raubte mir der im IE6 beständig hartnäckige Abstand zwischen Kopfzeile und Mittelteil den letzten Nerv. Nach längerem Suchen stieß ich auf den 3-Pixel-Bug (http://forum.de.selfhtml.org/archiv/2007/1/t143159/#m929873). Aber: warum ist mein 3-Pixel-Bug gleich fünf Pixel breit?
Zur eigentlichen Frage: Alle DIVs besitzen Layoutbezogene Hintergrundbilder. Das DIV für den Inhalt enthält zudem zwei Bilder. Im IE6 werden diese beiden kleinen Scheißer aber erst unterhalb des Hintergrundbildes angezeigt. Wieso das? FF und Opera hingegen zeigen die Seite wie gewünscht.
Besten Dank.
Link: www.stephan-deckert.de/test/index_02.html
******** HTML ********
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/html4/transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="false">
<title>*** STEPHAN DECKERT. Herzlich willkommen. ***</title>
<link rel="stylesheet" type="text/css" href="css/start.css" media="all" />
</head>
<body>
<div id="container">
<div id="topFrame"></div>
<div id="contentFrame">
<div class="left"></div>
<div class="right"></div>
<div class="middle">
<img class="logo" src="images/title_logo.jpg" border="0" /><br />
<img class="lettering" src="images/title_lettering.jpg" border="0" />
</div>
</div>
<div id="bottomFrame"></div>
</div>
</body>
</html>
******** CSS ********
* html #topFrame
{
margin-bottom : -5px
/* "3-Pixel"-Bug des IE 6, allerdings ist dieser bei mir 5px groß. Hä? */
/* Umgehen per "Star-HTML-Hack" ... */
}
body
{
margin-left : 0px;
margin-top : 0px;
font-family : Verdana, Tahoma, Geneva, Arial;
background : url(../images/bkg_gradient.jpg) repeat-x top left;
/* Verlauf */
background-color : #eec756;
}
img
/* falls Link schon besucht, ist häßlicher Rahmen ums Bild */
{
border : 0;
}
img.logo
{
margin : 19px auto 0px auto;
}
img.lettering
{
margin : 38px auto 20px auto;
}
#container
{
margin : 200px auto;
/* oben + unten, rechts + links */
/* oben, rechts + links, unten */
/* oben, rechts, unten, links */
width : 560px;
}
#topFrame
{
width : 560px;
height : 14px;
margin-bottom : 0px;
vertical-align : bottom;
background : url(../images/start_top.jpg) no-repeat top left;
border : 1px solid red;
}
#contentFrame
{
width : 560px;
hight : 286px;
/* 315px - 14 oberer Rand - 16 unterer Rand = 285px */
background : url(../images/start_gradient.jpg) repeat-x top left;
}
#contentFrame .left
{
float : left;
width : 9px;
height : 286px;
background : url(../images/start_left.jpg) no-repeat top right;
}
#contentFrame .middle
{
margin : 0 auto;
width : 542px;
/* 560px - 8px linker Rand - 10px rechter Rand = 542px */
hight : 286px;
background : url(../images/start_gradient.jpg_) repeat-x top left;
text-align : center;
}
#contentFrame .right
{
float : right;
width : 9px;
height : 286px;
background : url(../images/start_right.jpg) no-repeat top right;
}
#bottomFrame
{
width : 560px;
height : 16px;
clear : both;
background : url(../images/start_bottom.jpg) no-repeat top left;
border : 1px solid green;
}
-
hi,
Zur eigentlichen Frage: Alle DIVs besitzen Layoutbezogene Hintergrundbilder. Das DIV für den Inhalt enthält zudem zwei Bilder. Im IE6 werden diese beiden kleinen Scheißer aber erst unterhalb des Hintergrundbildes angezeigt. Wieso das?
Weil left, right und middle gefloatet nicht nebeneinander passen (nach Interpretation des IE).
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hi
Weil left, right und middle gefloatet nicht nebeneinander passen (nach Interpretation des IE).
Dann hab ich mit Sicherheit was verpaßt: wie ist denn dann selfHTML das Problem beim dreispaltigen Layout umgangen? Liegt das nur an den "em"-Größenangaben?
Gibts Alternativen?
Danke.
-
hi,
Gibts Alternativen?
Wie sieht's denn aus, wenn du dem Mittelteil mal keine Breite gibst?
Btw: Wenn das was in den Grafiken steht irgendeiner Weise lesbar sein soll, dann solltest du ihnen mal ein wenig mehr Kontrast gönnen.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Wie sieht's denn aus, wenn du dem Mittelteil mal keine Breite gibst?
Alles klar, dann mach ich das so.
Rein Interesse halber ... wieso ist denn der 3-Pixel-Bug nun 5 Pixel breit?
-
Hi,
Rein Interesse halber ... wieso ist denn der 3-Pixel-Bug nun 5 Pixel breit?
Weil du keinen 3 Pixel Bug hast? Der tritt, soweit ich weiss, auf wenn 2 Elemente nebeneinader floaten. Deine sind nicht horizontal sondern vertikal nebeneinander und floaten auch nicht.
Dafuer koenntest Du aber nochmal ueber dein CSS gehen und aus den hights auch heights machen. :) Copy&Paste, was? ;)
-
-
-
-