CSS Schatten überlagert zweites <div>

[pin117]

Ich komme irgendwie aus meinem Problem nicht raus und hoffe hier Hilfe zu bekommen.

Wenn ich zwei div untereinander lege, die eigentlich unterschiedliche CSS Eigenschaften haben sollen, wird der Schatten von dem einen (unteren) div auf das obere geschoben, bei dem keiner sein sollte.

Screen:

Pfeil zeigt den Schatten, der zu hoch ist. Der Schatten sollte bei der oberen Kante der blauen Tabelle aufhören - die class="CSSTable" hat. Der weisse Teil class="CSSTableplain".

Der HTML Code sniped:

	<div class="CSSTableplain">
	<table>
	<tr>
		<img height="38" src="x" style="float: left" width="170" />
		</tr>
		</table>
	</div>

 	<div class="CSSTable">
  		<table>
 		<tr>
			<td style="width: 50%">x</td>
			<td style="width: 30%">x</td>
			<td style="width: 20%">x</td>
		</tr>
usw.

Das CSS File:

.CSSTableplain {
	margin:0px;padding:0px;
	margin-left:auto; 
        margin-right:auto;
	width:980px;

}

.CSSTable {
	margin:0px;padding:0px;
	
	margin-left:auto; 
        margin-right:auto;
	width:980px;
	box-shadow: 10px 10px 5px #888888;
	border:1px solid #ffffff;
	-moz-border-radius-bottomleft:10px;
	-webkit-border-bottom-left-radius:10px;
	border-bottom-left-radius:10px;
	-moz-border-radius-bottomright:10px;
	-webkit-border-bottom-right-radius:10px;
	border-bottom-right-radius:10px;
	-moz-border-radius-topright:10px;
	-webkit-border-top-right-radius:10px;
	border-top-right-radius:10px;
	-moz-border-radius-topleft:10px;
	-webkit-border-top-left-radius:10px;
	border-top-left-radius:10px;

}.CSSTable table{

    border-collapse: collapse;
        border-spacing: 0;
	width:100%;
	height:100%;
	margin:0px;padding:0px;

}.CSSTable tr:last-child td:last-child {

	-moz-border-radius-bottomright:10px;
	-webkit-border-bottom-right-radius:10px;
	border-bottom-right-radius:10px;

}

.CSSTable table tr:first-child td:first-child {

	-moz-border-radius-topleft:10px;
	-webkit-border-top-left-radius:10px;
	border-top-left-radius:10px;

}

.CSSTable table tr:first-child td:last-child {

	-moz-border-radius-topright:10px;
	-webkit-border-top-right-radius:10px;
	border-top-right-radius:10px;

}.CSSTable tr:last-child td:first-child{

	-moz-border-radius-bottomleft:10px;
	-webkit-border-bottom-left-radius:10px;
	border-bottom-left-radius:10px;

}.CSSTable tr:hover td{

	background-color:#cbcbcb;
}

.CSSTable td{

	vertical-align:middle;
	background-color:#eeeeee;
	border:1px solid #ffffff;
	border-width:0px 1px 1px 0px;
	text-align:left;
	padding:12px;
	font-size:10px;
	font-family:Helvetica;
	font-weight:normal;
	color:#000000;

}.CSSTable tr:last-child td{

	border-width:0px 1px 0px 0px;

}.CSSTable tr td:last-child{

	border-width:0px 0px 1px 0px;

}.CSSTable tr:last-child td:last-child{

	border-width:0px 0px 0px 0px;

}

.CSSTable tr:first-child td{

	background:-o-linear-gradient(bottom, #1d446b 5%, #2d669f 100%);
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1d446b), color-stop(1, #2d669f) );

	background:-moz-linear-gradient( center top, #1d446b 5%, #2d669f 100% );

	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#1d446b", endColorstr="#2d669f");	
	background: -o-linear-gradient(top,#1d446b,2d669f);
	background-color:#1d446b;
	border:0px solid #ffffff;
	text-align:center;
	border-width:0px 0px 1px 1px;
	font-size:14px;
	font-family:Verdana;
	font-weight:bold;
	color:#ffffff;

}

.CSSTable tr:first-child:hover td{

	background:-o-linear-gradient(bottom, #1d446b 5%, #2d669f 100%);
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1d446b), color-stop(1, #2d669f) );

	background:-moz-linear-gradient( center top, #1d446b 5%, #2d669f 100% );

	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#1d446b", endColorstr="#2d669f");	background: -o-linear-gradient(top,#1d446b,2d669f);

	background-color:#1d446b;

}

.CSSTable tr:first-child td:first-child{

	border-width:0px 0px 1px 0px;

}

.CSSTable tr:first-child td:last-child{

	border-width:0px 0px 1px 1px;

}

Wie kann ich vermeiden, dass der Schatten hochzieht?

 

[SpiceLab]

Der Klasse .CSSTable fehlt die Eigenschaft clear:left als "Pendant" zu float:left des <img>-Elements, um hier das Umfließen zu beenden.

 

[pin117]

Danke für Deine schnelle Antwort. Hättest Du ein Beispiel für meinen code?
Ich versuche (vergeblich) den richtigen Platz für clear:left zu finden :/

Hab's gefunden - auch ein blindes Huhn findet ein Korn

Dank Dir!

 

[SpiceLab]

.CSSTable {
    clear:left; /* einfach hier platzieren */
    margin:0px;padding:0px;    
    margin-left:auto; 
    margin-right:auto;
    width:980px;
    box-shadow: 10px 10px 5px #888888;
    border:1px solid #ffffff;
    -moz-border-radius-bottomleft:10px;
    -webkit-border-bottom-left-radius:10px;
    border-bottom-left-radius:10px;
    -moz-border-radius-bottomright:10px;
    -webkit-border-bottom-right-radius:10px;
    border-bottom-right-radius:10px;
    -moz-border-radius-topright:10px;
    -webkit-border-top-right-radius:10px;
    border-top-right-radius:10px;
    -moz-border-radius-topleft:10px;
    -webkit-border-top-left-radius:10px;
    border-top-left-radius:10px;
}