✔ Abstand nach unten - wieso?

schutzgeist · 20. Mai 2009

Hallo mitteinander,

ich hab mal wieder ein Problem wo ich die Quelle nicht ausmachen kann..
es muss irgendwie im CSS ab #blue liegen..

Die Seite wird bei mir im IE6 und FF 3.0.5 richtig angezeigt..
Im IE 7 habe ich nach unten einen Abstand und daher einen Scrollbalken..
Wenn ich mit der Maus die Seite markiere, dann erhalte ich blau unterlegt zwei versch. Rechtecke.. die beiden Screens habe ich angehängt.

Was auch komisch ist... beim Kunden klebt die Seite sowohl im IE6 und 7 direkt oben am Rand (kein Abstand zw. Container und Browserfenster). FF konnte ich dort nicht testen.

HTML:

HTML:

<div id="container">
<div id="header">
<ul>
<li>...</li>
<li class="hightlght">...</li>
</ul>
</div>
<div id="image"></div>
<div id="blue"><ul>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
<div id="content"><p align="justify" style="line-height: 15px;"><span class="hightlght"><strong>Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt</strong></span><br />
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
Daher investieren wir jetzt und haben kürzlich unser Firmenareal im neuen </p>
 
</div>
<div id="red"></div>

</div>
</body>

CSS:

Code:

/* CSS Document */
html, body { 
margin: 0;
padding: 0;
height: 100%; 
background: #0a4290;

color: #0a4290; 
font-family: Arial, Helvetica, sans-serif; 
font-size: 12px;
margin: 0;} /* WinIE behavior call */

p { margin-top: 0.5em; margin-bottom: 1em; }

#container {
position: absolute;
left: 50%;
width: 864px;
margin-left: -432px; /* negative Hälfte von width:400px */
top: 50%;
height: 571px;
margin-top: -347px; /* negative Hälfte von height:150px */
border: 2px solid #000;

}

#header {
position: relative;
top: 0px;
height: 101px;
background: url(../img/logo.jpg) top right no-repeat #FFFFFF;
}
#header ul {
margin: 0;
font-size: 14px;
padding-top: 55px;
padding-left: 50px !important; /* Moderne Browser */
padding-left: 61px; /* IE */
}
#header li {
padding-bottom: 3px;
}
#image {
position: relative;
top: 0px;
height: 315px;
background: url(../img/temp.jpg) no-repeat;
}
#blue {
position: relative;
top: -315px !important; /* Moderne Browser */
top: 129px; /* IE */
left: 592px;
z-index: 1;
width: 245px;
height: 444px;
background: #0a4290;
margin-top: auto !important; /* Moderne Browser */
margin-top: -444px; /* IE */
}
#blue ul {
margin: 0;
color: #FFF;
font-weight: bold;
font-size: 14px;
padding-top: 15px;
padding-left: 20px;
width: 220px;
}
#blue li {
padding-bottom: 15px;
}
#content {
position: relative;
top: -444px !important; /* Moderne Browser */
top: 444px;
height: 126px;
background: #FFF;
width: 535px;
padding-left: 35px;
padding-top: 3px;
padding-right: 294px;
margin-top: auto !important; /* Moderne Browser */
margin-top: -444px; /* IE */
}
#content a {
color: #0a4290;
text-decoration: none;
}
#content a:hover {
color: #c00;
}

#red {
position: relative;
height: 26px;
background: #c00;
top: -444px !important; /* Moderne Browser */
top: 888px;
margin-top: auto !important; /* Moderne Browser */
margin-top: -444px; /* IE */
}
.hightlght {
color: #c00;
}

Maik · 20. Mai 2009

Hi,

ich tippe auf die relativen Positionierungen mit negativen top-Werten.

Der ursprünglich eingenommene Raum bleibt hinsichtlich nachfolgender Elemente erhalten.

Quelle: http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position

mfg Maik

Maik · 20. Mai 2009

Maik hat gesagt.:
ich tippe auf die relativen Positionierungen mit negativen top-Werten.

Bingo

Hier eine Alternative zu deinem Stylesheet ohne Abstand nach unten

CSS:

html, body {
margin: 0;
padding: 0;
height: 100%;
background: #0a4290;

color: #0a4290;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0;} /* WinIE behavior call */

p { margin-top: 0.5em; margin-bottom: 1em; }

#container {
position: absolute;
left: 50%;
width: 864px;
margin-left: -432px; /* negative Hälfte von width:400px */
top: 50%;
height: 571px;
margin-top: -347px; /* negative Hälfte von height:150px */
border: 2px solid #000;
}
#header {
height: 101px;
background: url(../img/logo.jpg) top right no-repeat #FFFFFF;
}
#header ul {
margin: 0;
font-size: 14px;
padding-top: 55px;
padding-left: 50px !important; /* Moderne Browser */
padding-left: 61px; /* IE */
}
#header li {
padding-bottom: 3px;
}
#image {
height: 315px;
background: url(../img/temp.jpg) no-repeat;
width:592px;
float:left;
}
#blue {
margin-left: 592px;
height: 318px;
background: #0a4290;
}
#blue ul {
margin: 0;
color: #FFF;
font-weight: bold;
font-size: 14px;
padding-top: 15px;
padding-left: 20px;
width: 220px;
}
#blue li {
padding-bottom: 15px;
}
#content {
clear:left;
height: 126px;
background: #FFF;
width: 535px;
padding-left: 35px;
padding-top: 3px;
padding-right: 294px;
}
#content a {
color: #0a4290;
text-decoration: none;
}
#content a:hover {
color: #c00;
}
#red {
height: 26px;
background: #c00;
}
.hightlght {
color: #c00;
}

mfg Maik

Maik · 20. Mai 2009

Nachtrag zur korrekten Zentrierung von #container:

CSS:

margin-left: -434px; /* negative Hälfte von 868px */
margin-top: -287.5px; /* negative Hälfte von 575px */

mfg Maik

schutzgeist · 20. Mai 2009

Maik hat gesagt.:
Nachtrag zur korrekten Zentrierung von #container:

CSS:

margin-left: -434px; /* negative Hälfte von 868px */ margin-top: -287.5px; /* negative Hälfte von 575px */

mfg Maik

Das war eigentlich Absicht, weil der Abstand zum oberen Rand etwas schmaler sein sollte - oder können daruch Probleme entstehen?

Vielen Danke schoneinmal für deinen entmüllten Code

Ich hab da jetzt noch zwei Fragen dazu:
wenn ich bei #Content noch das negative margin einfüge, kann es da zu Problemen kommen? Da guckt nämlich noch ein Spalt von 3px raus.

Code:

#content {
	clear:left;
	height: 126px;
	background: #FFF;
	width: 535px;
	padding-left: 35px;
	padding-top: 3px;
	padding-right: 294px;
	margin-top: -3px;
}

und die Grafik wird nun nicht mehr komplett angezeigt.
Die geht ansich über die ganze Seite und wird dann vom Div blue überlappt.
Wenn ich da nun rechts für das ende vom Bild ein extra Div einfügen will zerschiest es mir wieder alles

Auch machen die Abstände im IE6 wieder dumm rum.. s. Screen
Das grässliche Türkis dient nur für mich zu Orientierung ^^

schutzgeist · 20. Mai 2009

Hier noch das Bild vom Spalt im IE6

Maik · 20. Mai 2009

Wenn die Position von #container so gewünscht ist, hab ich nix gesagt

Der vertikale Abstand zu #content resultiert aus der height:318px-Deklaration für #blue, die 3px größer ausfällt als die von #image - sorry, mein Fehler :-(

Was den Abstand zwischen den Boxen im IE6 angeht, macht sich hier der "3px-Gap-Bug" bemerkbar.

Da sich aber #blue über #image legen soll, wäre dies die entsprechende CSS-Formatierung für die beiden Boxen:

CSS:

#image {
height: 315px;
background: url(../img/temp.jpg) no-repeat;
}
#blue {
position: absolute;
top: 101px;
left: 592px;
width: 245px;
height: 315px;
background: #0a4290;
}

... und der IE6-Bug hat sich somit in Luft aufgelöst

mfg Maik

schutzgeist · 20. Mai 2009

Wuah, endlich siehts so aus wie es sein soll.

Vielen, vielen Dank. Du hast mir eben den Tag gerettet

✔ Abstand nach unten - wieso?

schutzgeist

Erfahrenes Mitglied

Anhänge

Maik

Maik

Maik

schutzgeist

Erfahrenes Mitglied

Anhänge

schutzgeist

Erfahrenes Mitglied

Anhänge

Maik

schutzgeist

Erfahrenes Mitglied

Neue Beiträge