[CSS] Schaduw achter container

[-W0kk3L-]

Op mijn website http://www.testconsultant.nl probeer ik een schaduw achter de "container" div te plaatsen. Dit gaat goed voor IE8, Chrome en FireFix 3.5, echter bij IE6 en IE7 gedraagt de schaduw zich anders. Het lijkt alsof ze een fixed height aanhouden, wat neer komt op de schermresolutie hoogte. Op de index pagina stopt de schaduw halverwege de pagina, terwijl op de tools pagina de schaduw er ver onderuit komt (aangezien de pagina korter is dan de schermresolutie hoogte).

Ik ben al aan het stoeien geweest met min-height, de "important" aanvulling etc. Echter ik krijg het niet voor elkaar.

Kan iemand mij hiermee helpen?

Edit: topic item moet natuurlijk [CSS] zijn i.p.v. [PHP]

[ Voor 4% gewijzigd door -W0kk3L- op 24-01-2010 11:50 ]

[Verwijderd]

Ik ben wel benieuwd. Waarom doe je die shadow niet gewoon als achtergrond plaatje van je div#container?

[bindsa]

Heb je ook iets van screenshots ofzo? Het is namelijk een beetje moeilijk te zien wat er fout is zo, aangezien ik zelf geen IE6/7 meer heb.

[bindsa]

Ik zie net dat je CSS ook niet helemaal vlekkeloos door de validator komt:

http://jigsaw.w3.org/css-...F%2Fwww.testconsultant.nl

[-W0kk3L-]

Verwijderd schreef op zondag 24 januari 2010 @ 11:56:
Ik ben wel benieuwd. Waarom doe je die shadow niet gewoon als achtergrond plaatje van je div#container?

Ga ik even naar kijken.

L0calh0st schreef op zondag 24 januari 2010 @ 11:57:
Heb je ook iets van screenshots ofzo? Het is namelijk een beetje moeilijk te zien wat er fout is zo, aangezien ik zelf geen IE6/7 meer heb.

Voer deze url hier maar eens in : "http://www.testconsultant.nl/index.php?id=tools". Vooral in IE6 is het voor deze pagina goed zichtbaar.

L0calh0st schreef op zondag 24 januari 2010 @ 12:00:
Ik zie net dat je CSS ook niet helemaal vlekkeloos door de validator komt:

http://jigsaw.w3.org/css-...F%2Fwww.testconsultant.nl

Dat is een gedownloade CSS. Deze is enkel voor het openen van de "Forum" optie in een separaat frame. De eigenlijke CSS van de site valideert keurig.

[bindsa]

Lijkt inderdaad een min-height probleem, deze fix zou gewoon moeten werken (gebruik hem zelf ook):
http://www.dustindiaz.com/min-height-fast-hack/

[-W0kk3L-]

Plaats je die op de "container" div of de "schaduw" div? Ik ben er namelijk al mee bezig geweest, maar kreeg dit niet goed werkend.

Het lastige aan deze hack is dat hij alleen goed werkt met een vaste hoogte in pixels. Ik werk met percentages. En dan werkt het zo te zien niet goed.

[ Voor 37% gewijzigd door -W0kk3L- op 24-01-2010 12:31 ]

[Verwijderd]

Heb even wat gespeeld met firebug en zo krijg je volgens mij ook gewoon netjes die schaduw die je wil:

Cascading Stylesheet:

div#container {
    background:transparent url(http://www.testconsultant.nl/_images/shadow.png) repeat-y scroll 0 0;
    height:100%;
    margin-left:auto;
    margin-right:auto;
    min-height:100%;
    padding-left:17px; /* dit is de breedte van de schaduw links */
    padding-right:17px; /* idem rechts */
    position:relative;
    width:800px;
}

Je shadow.png is alleen niet breed genoeg (die zou je even netjes 834px breed moeten maken).

Je hebt met je huidige implementatie geen schaduw rond je footer. Als je dat met deze code ook wil dan zou je je footer buiten de div#container moeten zetten (eronder) met margin-left/right: auto.

[-W0kk3L-]

Thnx voor de moeite die je neemt! In Firefox ziet het er inderdaad redelijk uit (heb nog niet alle correcties doorgevoerd). Helaas verandert het resultaat in IE7 en lager helaas niet. Kijk maar eens via IE7 (zie link naar browser compatibility site in mijn eerste reply) met deze pagina: http://test.testconsultant.nl/index.php?id=tools . Het past zich aan naar de browser grootte, echter bij scrollen verandert er niets mee.

[ Voor 30% gewijzigd door -W0kk3L- op 24-01-2010 12:47 ]

[Verwijderd]

Dat komt omdat je het nog niet helemaal goed hebt geimplementeerd vermoed ik.

Je moet het plaatje wat origineel voor je achtergrond zorgde nog even uit je html gooien (img#shadow). Daarbij heeft de div nog geen achtergrondplaatje omdat je niet de goede link in je css file hebt staan.

Als je vanuit een css file een plaatje wil laden, dan moet je altijd het relatieve pad vanaf je CSS file opgeven. In dit geval zou dat iets zijn van "../_images/shadow.png" geloof ik.

[-W0kk3L-]

Sommige dingen moet ik niet doen voordat ik de deur uit moet

Ik heb er even wat beter naar gekeken en je oplossing werkt prima, Rooz! Thanks!
En natuurlijk bedankt aan iedereen die input leverde

[ Voor 19% gewijzigd door -W0kk3L- op 24-01-2010 15:49 ]

[Verwijderd]

Zo'n idee had ik al.

Fijn dat het werkt!

[MueR]

After the fact even titelfix. Wokk3l, wil je daar volgende keer een topicreport ( icoon bovenaan) voor aanmaken, dan zien we het sneller

[-W0kk3L-]

Is goed, Muer. Voor het eerst sinds 2002 dat ik dat icoontje zie.
Zo leer je iedere dag weer iets! ;-)