Voor een website ben ik bezig een css te schrijven waarmee een aantal layers weergegeven worden. Deze layers gebruiken hetzelfde deel van het css met uitzondering van de container van iedere layer.
Het probleem is lastig uit te leggen, ik zal het proberen duidelijk te maken aan de hand van wat voorbeelden.
Wat de uiteindelijke bedoeling is (versimpeld):
Bovenstaand voorbeeld laat zien wat ik bedoel (dit werkt overigens goed in FF en safari browsers). In dit voorbeeld heeft de div "textfield" dus width: 100px - 10px - 15px = 75px, en height: 150px - 30px - 35px = 85px. FF en Safari browsers renderen de layer "textfield" juist en geven width en height de juiste waarden.
Internet Explorer niet. De afmetingen van de layers kloppen wel maar de inhoud zoals gedefinieert in het CSS (background-color / background-image) wordt niet weergegeven., De layers zijn transparant. Overigens wordt de HTML content in deze layer wel juist weergegeven.
De reden waarom ik dit wil is dat ik hierbij alleen de width en height waarden van de containerlayer hoef in te stellen per keer dat ik deze code gebruik. Een alternatief is dat ik de "onderliggende" layers allemaal handmatig een width en height geef (dit zijn er nogal wat), echter, naast dat het erg veel (reken)werk geeft, ontneemt dit alternatief de mogelijkheid om alles in 1 css code te stoppen wat weer een hoger aantal kb's oplevert om te downloaden voor de client.
Als je FF en IE hebt kan je wel even kijken naar wat ik bedoel, klik hier. Ik heb dit voorbeeld toegepast op de 2 onderdelen linksbovenin (de rest gebruikt nog de oude code, is niet van toepassing). Open ze in FF of Safari en ze zien er perfect uit, open ze in IE en alle layers waarvan de dimensies ingesteld zijn zoals in het voorbeeld bij layer "textfield" zijn transparant. Heeft iemand tips hoe ik dit in orde kan maken?
Edit: Ik ben er nu overigens achter dat achtergrond PNG's in CSS gedefinieerd niet goed werken,ook niet met de .js workarounds. Overigens heeft dit weinig met mijn probleem te maken, de png's in de hoeken worden goed weergegeven, de .gif in het midden van iedere layer en de .png's rechts en onder worden niet weergegeven.
Het probleem is lastig uit te leggen, ik zal het proberen duidelijk te maken aan de hand van wat voorbeelden.
Wat de uiteindelijke bedoeling is (versimpeld):
HTML:
1
2
3
4
5
6
7
8
| <div id="container" style="position: absolute; width: 100px; height: 150px; left: 10px; right: 20px;"> /* deze layers staan in het CSS */ <div id="textfield" style="position: absolute; left: 10px; right: 15px; top: 30px; bottom: 35px;"> tekst enzo </div> </div> |
Bovenstaand voorbeeld laat zien wat ik bedoel (dit werkt overigens goed in FF en safari browsers). In dit voorbeeld heeft de div "textfield" dus width: 100px - 10px - 15px = 75px, en height: 150px - 30px - 35px = 85px. FF en Safari browsers renderen de layer "textfield" juist en geven width en height de juiste waarden.
Internet Explorer niet. De afmetingen van de layers kloppen wel maar de inhoud zoals gedefinieert in het CSS (background-color / background-image) wordt niet weergegeven., De layers zijn transparant. Overigens wordt de HTML content in deze layer wel juist weergegeven.
De reden waarom ik dit wil is dat ik hierbij alleen de width en height waarden van de containerlayer hoef in te stellen per keer dat ik deze code gebruik. Een alternatief is dat ik de "onderliggende" layers allemaal handmatig een width en height geef (dit zijn er nogal wat), echter, naast dat het erg veel (reken)werk geeft, ontneemt dit alternatief de mogelijkheid om alles in 1 css code te stoppen wat weer een hoger aantal kb's oplevert om te downloaden voor de client.
Als je FF en IE hebt kan je wel even kijken naar wat ik bedoel, klik hier. Ik heb dit voorbeeld toegepast op de 2 onderdelen linksbovenin (de rest gebruikt nog de oude code, is niet van toepassing). Open ze in FF of Safari en ze zien er perfect uit, open ze in IE en alle layers waarvan de dimensies ingesteld zijn zoals in het voorbeeld bij layer "textfield" zijn transparant. Heeft iemand tips hoe ik dit in orde kan maken?
Edit: Ik ben er nu overigens achter dat achtergrond PNG's in CSS gedefinieerd niet goed werken,ook niet met de .js workarounds. Overigens heeft dit weinig met mijn probleem te maken, de png's in de hoeken worden goed weergegeven, de .gif in het midden van iedere layer en de .png's rechts en onder worden niet weergegeven.
[ Voor 14% gewijzigd door Verwijderd op 14-05-2007 17:08 ]