✔ Warum sind die Farben nicht im Scrollbereich zu sehen?

[Enumerator]

Moin!

Ich habe ein recht simples Problem, zu dem es bestimmt eine einfache Lösung gibt...

Wenn ich ein Blockelement mit einer Hintergrundfarbe belege und z.B. "white-space" auf "nowrap" setze, veranlasst das den Browser u.U. zum Anzeigen von Scrollleisten. Schön und Gut - nur warum ist die Hintergrundfarbe im horizontal "erscrollten" Bereich nicht zu sehen? Gibt es dafür eine Lösung?

Gruß
Enum

PS: Bitte erspart mir Geschimpfe, von wegen ich hätte vorher nicht geGoogelt oder Ähnliches - mir sind einfach keine Suchbegriffe eingefallen, die mir auch nur annähernd die richtigen Ergebnisse bringen ...

Hier noch 'n bissl Code - als Beispiel...

HTML:

  <div id="body">

    <div class="main" id="head">
    <div class="size" >

      <a name="top" id="top">
      </a>

      <p class="navi" id="logo"> <img src="img/black.gif" height="40" width="100" alt="Logo" />
      </p>

    <hr />

      <div class="page" id="area">

	<h1 id="area_name"> Title der Website
	</h1>

      <hr />

	<p id="area_info"> Subeo effundo sive cavus, ara ora per res Cum Suffoco.
	</p>

      </div>

    <hr />

      <ul id="link">

	<li><a href="...">Inhalt</a></li>
	<li><a href="...">Navigation</a></li>
	<li><a href="...">Suchen</a></li>

      </ul>

      <div class="clear">
      </div>

    </div>
    </div>

  <hr />

  </div>

CSS:

.main
{
	border-style: solid;
	border-width: 1px;

	border-right: 0px none;
	border-left:  0px none;

	padding: 1em;

	width: auto;
}


 .main .size
 {
	width: 64em;
 }


 .main .navi
 {
	width: 11em;
	float: left;
 }


 .main .page
 {
	width: 40em;
	float: left;
 }



#head
{
	border-top-style: none;
	border-top-width: 0px;
}


 #logo img
 {
	width: 10em;
	height: 4em;
 }



.clear
{
	clear: both;
}

Und noch eimal CSS-Code - meine Standart-Config :

*
{
	font-family: Arial, Helvetica, Sans-Serif, Sans Serif, Sans;
	font-weight: normal;

	font-size: 1em;

	padding: 0px;
	margin:  0px;

	border-style: none;
	border-width: 0px;
}


body
{
	font-size: 0.9em;
}


a { text-decoration: none; }


hr { display: none; }
ul { list-style-type: none; }


h1, h2, h3, h4, h5, h6,
b { font-weight: bold; }

h1 { font-size: 2.0em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.6em; }
h4 { font-size: 1.4em; }
h5 { font-size: 1.2em; }
h6 { font-size: 1.0em; }


button,
label { cursor: pointer; }

Die Definition der BG Farben habe ich mal weggelassen....

 

[Enumerator]

Mich doof doll sein!
Einfach <div> mit id="body" auf "position:absolute;" setzen...
:suspekt: