Der Martin: Hintergrundfarbe im div wird nicht angezeigt je nach DOCTYPE

Beitrag lesen

SELF-Forum

Hintergrundfarbe im div wird nicht angezeigt je nach DOCTYPE

Der Martin
+2 Informationen zu den Bewertungsregeln

Hallo,

Wenn ich einen HTML5 DOCTYPE oder einen 4.01 mit URI nehme, dann zeigt er mir die Hintergrundfarbe der DIVs nicht mehr an.

wer?

Ich habe ein paar DIVs miteinander verschachtelt, vermutlich liegt es daran, allerdings funktioniert es ohne DOCTYPE oder mit einem einem ohne URI.

Also im Quirksmode, in dem der Browser bei fehlerhaftem oder mehrdeutigem HTML raten darf, was der Autor wohl gemeint haben könnte. Manchmal rät er ganz gut.

<!DOCTYPE html>

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="author">
<meta name="viewport" content="width=device-width; initial-scale=0.4; maximum-scale=0.4; user-scalable=0;">
<link href="standard.css" rel="stylesheet" type="text/css">
<title>Title</title>
</head>
<body>
<div class="boxheader">

<div class="headercontentdetails">
<p>Text2</p>
</div>
</div>

  
Fehlt hier nicht noch ein schließendes </body> und </html>?  
  

> ~~~css

.boxheader {  

> 	font: bold 2em/0.9em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;  
> 	color: #ffffff;  
> 	margin-top: 0px;  
> 	padding-top: 0px;  
> 	height: 50%;  
> 	background-color: #000000;  
> 	display: block;  
> }

Ah, der Klassiker! Eine prozentuale Höhenangabe, ohne dass eindeutig klar ist, worauf sich die 50% beziehen. height:50% bedeutet nur: 50% der Höhe des Elternelements. Allerdings hat das Elternelement body selbst keine Höhenangabe, es ist also nur so hoch, wie es für seinen Inhalt erforderlich ist.
Du musst also alle Vorfahrenelemente bis hinauf zu html auch mit einer festen Höhenangabe versehen - und sei es 100%.

.headercontentdetails {

font: 0.5em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
position: fixed;
top: 50%;
left: 40%;
margin-top: -150px;
color: rgb(31,69,123);
}

  
Dazu kommt noch, dass position:fixed (ähnlich wie position:absolute oder float) dieses Element aus dem Textfluss herausnimmt. Aus CSS-Sicht hat div.boxheader also von einer Leerzeile abgesehen überhaupt keinen Inhalt mehr.  
  
Ciao,  
 Martin  

-- 
[Dieser Satz](http://community.de.selfhtml.org/zitatesammlung/zitat262) wurde in mühsamer Kleinstarbeit aus einzelnen Wörtern zusammengesetzt.  
  (Hopsel)  
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
Beitrag melden
+2
Informationen zu den Bewertungsregeln