✔ Breite der Box falsch dargestellt

[das_element]

hoi,
ich hab folgendes Problem mit dem IE:

und zwar stellt er diese Box nicht richtig dar.

Quellcode der Datei:

<div id="header"><div class="headerDiv">
<div style="margin-top:50px; margin-bottom: 50px; margin-left: 400px; color: navy">
<h2>My Image-Page</h2></div>

</div></div>

Quellcode des dazugehörigen Stylesheets:

#header 	{
	position: absolute;
	top: 5%;
	right: 5%;
	left: 5%;
	bottom: 75%;
	height: 20%
	width: 90%;
	padding: 0;
	overflow: hidden;
	background-image: url(header.jpg);
	border: 2px dotted green;
	}

kann mir schon jemand helfen?
oder braucht ihr den Link zur Seite?

mfg
^quit

 

[Maik]

Probier mal folgendes:

#header {
        height: 20%
        width: 100%;
        margin: 5% 5% 75% 5%;
        padding: 0;
        overflow: hidden;
        background-image: url(header.jpg);
        border: 2px dotted green;
}

 

[das_element]

das isses irgendwie ned...
jetzt ist es beim IE zwar über die ganze Breite (wie gewollt) aber leider ist es jetzt verschoben, d.h. es passt nicht mehr zum Rest der Seite ?

 

[Maik]

Der Link zur Seite wäre aufschlussreicher, als die Vorschaugrafik, die nur den Header zeigt ;-]

 

[das_element]

so: klicken
das ist noch die alte seite!

 

[Maik]

Modifizierter CSS-Code, basierend auf der style.css:

body 	{
	overflow: hidden;
	background: #ffffff;
	font-family: Arial;
	font-size: 14px;
	color: #444444;
	padding: 5%;
	}

#content 	{
	float: right;
	margin-right: 5%;
	width: 65%;
	height: 65%;
	padding: 0;
	overflow: auto;
	background: #f0f0f0;
	text-margin: 10px;	
	border: 2px dotted green;
	}

* html #content /* Korrektur für  IE */
{
margin-right: 2.5%;
}

#header 	{
	margin: 5%;
	height: 20%;
	width: 100%;
	padding: 0;
	overflow: hidden;
	background: #f0f0f0;
	border: 2px dotted green;
	}

#links	{
	float: left;	
	margin-left: 5%;	
	width: 15%;
	height: 65%;
	overflow: hidden;
	background: #f0f0f0;
	border: 2px dotted green;
	}

* html #links /* Korrektur für IE */
{
margin-left: 2.5%;
}

.content 	{margin: 12px;}

.links	{margin: 12px;}

.table	{
	color:#444444;
	font-family:Arial;
	font-size:14px;
	border-collapse: collapse;
	padding:0.5ex;
	}

.table,tr	{border: thin dotted black;}

.table,td	{padding:0.5ex;}

a:link	{color: #669900; text-decoration: none;}
a:visited 	{color: #669900; text-decoration: none;}
a:hover 	{color: #669933; text-decoration: underline;}
a:active 	{color: #669900; text-decoration: none;}

li	{
	color: #006600;
	list-style-type: square;
	}

 

[das_element]

hoi,
das funktioniert irgendwie nioch nicht ganz richtig...
Und zwar ist beim FF die #header-Box länger als die beiden
anderen Boxen...
Und alles ist so weit nach unten verschoben.
Die Darstellung beim IE passt, allerdings sind sie da auch zu
weit unten und die Boxen sind zu kurz (nach unten hin).

Hoffe du kannst mir nochmal helfen.

Hier ist die neue Seite (mit deinem stylesheet):
anschauen

mfg
Stefan

 

[Maik]

Entferne die (überflüssige) Breitenangabe für das DIV#header, dann wird der Header im FireFox nicht breiter, als die darunter liegenden DIVs dargestellt.

Wenn das Layout zu weit nach unten verschoben ist, dann musst du die padding-Angaben für das body-Element verändern, wie z.B.:

body
{
padding: 0% 5% 5% 5%; /* oben, rechts, unten, links */
}

Wenn die Boxen im IE nicht so hoch, wie im FireFox sind, dann muss die Höhenangabe für den IE angepasst / korrigiert werden, wie z.B.:

#content 	{
	float: right;
	margin-right: 5%;
	width: 65%;
	height: 65%;
	padding: 0;
	overflow: auto;
	background: #f0f0f0;
	text-margin: 10px;	
	border: 2px dotted green;
	}

* html #content /* Korrektur für  IE */
{
margin-right: 2.5%;
height: 70%;
}

#links	{
	float: left;	
	margin-left: 5%;	
	width: 15%;
	height: 65%;
	overflow: hidden;
	background: #f0f0f0;
	border: 2px dotted green;
	}

* html #links /* Korrektur für IE */
{
margin-left: 2.5%;
height: 70%;
}

 

[das_element]

also.
ich hab jetzt nochmal ALLES neu gemacht und jetzt funktioniert das auch komischerweise...
trotzdem danke ich dir, michaelsinterface, dass du dir die zeit genommen hast, um mir zu helfen. hab wieder einiges dadurch gelernt!!
Habe die alten Dateien gelöscht, und die neuen raufgeladen: hier

wenn möglich, noch kurz verbesserungsvorschläge oder ähnliches
aber jetzt nix negatives mehr, bin eh schon depressiv weil des so lang ned geklappt hat
für konstruktive Kritik bin ich natürlich immer offen

mfg
Stefan

 

[Maik]

ich hab jetzt nochmal ALLES neu gemacht und jetzt funktioniert das auch komischerweise...

Wenn das Problem gelöst ist und alles funktioniert, dann markiere das Thema bitte als erledigt, vielen Dank