CSS Schatten überlagert zweites

pin

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:

Code

<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.

Alles anzeigen

Das CSS File:

Code

.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;


}

Alles anzeigen

Wie kann ich vermeiden, dass der Schatten hochzieht?

explanator

Und wozu das Crossposting?
--> http://xhtmlforum.de/70773-css-scha…weites-div.html

Beachte die Forenregeln bevor du schreibst, Crosspostings sind in jedem Forum verboten.

pin

Wozu? Weil es hier keine Antwort gab. Sei doch froh, dass ich auch hier poste, bevor die Seite komplett abstirbt...

Bandit

Zitat von pin

Weil es hier keine Antwort gab.

Aha, weil du nach 52 Minuten keine Antwort bekommen hast, postest du also auch noch in einem anderen Forum. Da du dort erst nach 54 Minuten eine Antwort bekommen hast, muss man ja fragen, wo du sonst noch gepostet hast. Und noch eine Frage: glaubst du wirklich in Foren wartet man nur darauf, dass du um die Ecke kommst und sich jeder sofort auf deine Frage stürzt?

pin

Das war sogar noch schneller. Und während ich im anderen Forum nach 33 Minuten eine Lösung meines Problems hatte, wird hier am Tag später noch rumgeheult, von Regeln gesprochen und ein neuer User nach seinem ersten Posting angemacht. Frag Dich mal, warum hier so wenig los ist...

Mich kannst Du auch löschen. Lächerlicher Kindergarten hier.

Bandit

Ich finde es immer lustig, wie sich Leute aufregen, die sich nicht an die Forenregeln halten und darauf hingewiesen werden. Das ist der wahre Kindergarten!

Tags