CSS schaduw niet aan de onderkant

[Da_Vince]

Momenteel ben ik bezig met een website. Deze heeft een menu met tabs. Zodra je op een tab klikt en de pagina opent komt er een schaduw achter de tab. Alleen het probleem is dat deze ook aan de onderkant verschijnt. Dit kan ik wel wegkrijgen met pixel instellingen met CSS maar dan gaat links de schaduw ook omhoog en loopt het niet door. Zie screenshots hieronder

Screenshot 1: Schaduw klopt links maar niet aan de onderkant



Screenshot 2: Schaduw klopt onder maar niet aan de linkerkant.



CSS:

code:

li.current_page_item {
border: 1px solid #B1B3B6;
border-radius: 25px 25px 0 0;
border-bottom: none;
padding: 20px 0 20px 0;
background: white;
-moz-box-shadow: -7px 1px 20px 5px #888;
-webkit-box-shadow: -7px 1px 20px 5px #888;
box-shadow: -5px -8px 10px 1px #888;
}

Heeft iemand hier een oplossing voor? Heb ook zitten kijken naar overflow:hidden maar dan kapt hij de bovenkant en links ook af.

[ Voor 16% gewijzigd door Da_Vince op 03-01-2013 11:59 ]

[dominic]

Heb je al gespeeld met de Z-ordering van het lipje van de tab en het tabblad zelf?

[ Voor 4% gewijzigd door dominic op 03-01-2013 12:05 ]

[m4ikel]

Beste Da_Vince,

Dit is inderdaad een leuke uitdaging. Toevallig vorige week met een vergelijkbaar probleem bezig geweest. De uitkomst was daar om overflow:hidden; op de LI of UL te plaatsen en dan het schaduw verschil met box-shadow positioning weg te stylen. Z-index heeft in bijna alle gevallen net iets overlap waardoor er net een tint verschil optreed.

Succes!

[Da_Vince]

Hoi m4ikel,

Met overflow:hidden krijg ik het volgende. Hij kapt het links ook af. Ook als ik overflow-y:hidden gebruik.

[418O2]

je moet die tabcontainer eronder naar boven trekken (z-index).

Maak anders even een voorbeeld op http://jsfiddle.net/

[Da_Vince]

JSfiddle link: http://jsfiddle.net/cA7jB/1/

[418O2]

zonder de overflows gaat het al beter. Je moet alleen wel die maincontent een witte achtergrond geven, anders schijnt die boxshadow er alsnog onder.

[Da_Vince]

Dat had ik al geprobeerd maar dat werkt niet. Zie resultaat:

http://jsfiddle.net/cA7jB/10/

[Krysa]

Hi Da_Vince,

Als je het echt met CSS wilt doen, kun je proberen om meerdere shadows in de "li.current_page_item" te zetten:

Cascading Stylesheet:

-moz-box-shadow:   {shadow 1}, {shadow 2};
-webkit-box-shadow:   {shadow 1}, {shadow 2};
box-shadow:   {shadow 1}, {shadow 2};

[418O2]

Da_Vince schreef op donderdag 03 januari 2013 @ 14:36:
Dat had ik al geprobeerd maar dat werkt niet. Zie resultaat:

http://jsfiddle.net/cA7jB/10/

en met z-indexes

http://jsfiddle.net/cA7jB/16/

moet je alleen even de schaduw goed zetten

Ik zou in zo'n geval trouwens de li's blockelementen maken, dan ben je gelijk af van die margin op de maincontent div.

[ Voor 16% gewijzigd door 418O2 op 03-01-2013 16:22 ]

[Da_Vince]

@Catch22

Dat gaat dus niet. Als de Z-index op maincontent op 1 staat laat hij de schaduw van de maincontent over de tabs zien.