[CSS] Padding niet toepassen op div

[Dutch_guy]

Ik heb een stuk html dat er als volgt uitziet:

code:

<div class="productBox">
   <div class="middle">
      <div class="bottom">                     
         <div class="inner">

In de class "inner" staat o.a.: padding-left: 10px; padding-right: 10px;

Echter binnen die class "inner" heb ik ook een class: "header", met de volgende inhoud:

background: url('../images/top_heading.png') left no-repeat; height: 34px;

Aangezien de header div ook binnen de inner valt wordt deze nu ook 10px opgeschoven. Hoe kan ik dit voorkomen ? Ik kan helaas de header div niet buiten de inner div plaatsen.

[Verwijderd]

Nu moet ik zeggen dat ik de volgorde van je classes niet echt goed begrijp (middle, bottom.. ?). Misschien dat je daar ook nog wat mee zou kunnen schuiven.

Dat terzijde, volgens mij is je probleempje met de header op te lossen met negatieve margins.

Cascading Stylesheet:

div.header{ margin-left: -10px; margin-right: 10px; }

[Dutch_guy]

Ja, dat had ik reeds geprobeerd, maar werkt niet. Althans de tekst binnen de header class verschuift wel, maar de background in de header class niet.

[MueR]

Speel dan ook wat met de background-position?

[Verwijderd]

Misschien kan je een linkje naar een testpagina posten? Dan kunnen we ook wat beter zien wat er fout gaat. Als je background niet mee verplaatst gaat er misschien wel meer "fout".

Verder inderdaad wat MueR zegt.

[ReseTTim]

kan je is het deel html en deel css plaatsen want nu kan je niet direct zien wat je precies in je css hebt gedaan..

misschien heb jeje background in de verkeerde div gezet

[ Voor 21% gewijzigd door ReseTTim op 25-01-2010 11:29 ]

[pasz]

Als je in je class header de padding gewoon keihard op 0 zet, werkt het ook niet ?

Doe anders even met FireFox en de volgende plugins even kijken wat er fout gaat :

https://addons.mozilla.org/en-US/firefox/addon/60

en/of

https://addons.mozilla.org/en-US/firefox/addon/1843

[geert1]

De oplossing met negatieve margins is hier wel de beste. Als het niet werkt, dan ontbreekt er iets. Werk je toevallig in IE6? Dan moet je namelijk even "position: relative" meegeven aan het "header"-element. Anders wil 'ie niet. En je zou in IE6 / IE7 ook te maken kunnen hebben met een hasLayout bug waardoor het geheel niet goed werkt. Dit kun je uitvinden door even te testen in een echte browser (Firefox ofzo). Succes!

[Bosmonster]

Denk dat het probleem hier eerder ligt in je html-opbouw als ik je voorbeeld zo zie met 4 geneste div's met wazige namen. Kan me niet voorstellen dat dat nodig is.

[ Voor 14% gewijzigd door Bosmonster op 25-01-2010 11:52 ]

[Dutch_guy]

Het werkt nu !

Ik heb inderdaad wat onnodige geneste div's geschrapt. Tevens bleek er nog een div te staan die de boel bleef overrulen.

[BtM909]

Kan je dan ook even je oplossing (beknopt) posten? Ik kan 't me bijna niet voorstellen (nofi ), maar wellicht helpt t andere users die hetzelfde probleem hebben

[murphsy]

Let trouwens wel op: padding is en blijft een riskante attribuut. Verschillende browsers (vooral oudere FF en IE versies) willen padding nog wel eens creatief renderen. Staat me bij de bij sommige browsers padding op een div de div zelfs groter maakte.

Stel je had een div met width="500" en je gaf die een padding van 8 mee, dan werd de div 516 breed (beide kanten +8).

Test je padding goed cross-browser.

[Repsaj_Nav]

murphsy schreef op dinsdag 26 januari 2010 @ 09:59:
Staat me bij de bij sommige browsers padding op een div de div zelfs groter maakte.

Stel je had een div met width="500" en je gaf die een padding van 8 mee, dan werd de div 516 breed (beide kanten +8).

Dat is normaal gedrag hoor

[Bosmonster]

murphsy schreef op dinsdag 26 januari 2010 @ 09:59:
Let trouwens wel op: padding is en blijft een riskante attribuut. Verschillende browsers (vooral oudere FF en IE versies) willen padding nog wel eens creatief renderen. Staat me bij de bij sommige browsers padding op een div de div zelfs groter maakte.

Stel je had een div met width="500" en je gaf die een padding van 8 mee, dan werd de div 516 breed (beide kanten +8).

Test je padding goed cross-browser.

Dat is inderdaad normaal gedrag en met een fatsoenlijke doctype is dat zogenaamde boxmodel in alle browsers gelijk.

[Dutch_guy]

Ik test altijd in ie6, ie7, ie8 en Firefox, moet voldoende zijn.

De exacte oplossing... Ik heb naar aanleiding van jullie opmerkingen over de geneste divs de boel zo omgegooid dat het niet echt meer lijkt op het begin.

In ieder geval stond er verderop in de stylesheet een stukje waardoor het mis bleef gaan. Die class bleek ook dezelfde naam te hebben. Kwam er achter toen ik om te testen maar grote stukken css ging verwijderen om te kijken wanneer mijn header wel goed weergegeven zou worden.

[Vincentio]

Gebruik je tools als FireBug en Developer Tools (voor IE)?

Hierin behoor je namelijk te zien welke CSS allemaal van toepassing is op het geselecteerde stukje code en ook waar deze CSS vandaan komt.

[Bosmonster]

Dutch_guy schreef op dinsdag 26 januari 2010 @ 11:15:
Ik test altijd in ie6, ie7, ie8 en Firefox, moet voldoende zijn.

Ik zou zeker ook een Webkit-based browser toevoegen (Safari bijvoorbeeld).

[InZane]

Bosmonster schreef op woensdag 27 januari 2010 @ 14:25:
[...]


Ik zou zeker ook een Webkit-based browser toevoegen (Safari bijvoorbeeld).

En IE6 droppen als het kan
Zelf gebruik ik trouwens liever Google Chrome als webkit browser. Heeft ook erg fijne developer tools aan boord.

[Bosmonster]

InZane schreef op woensdag 27 januari 2010 @ 15:33:
[...]


En IE6 droppen als het kan
Zelf gebruik ik trouwens liever Google Chrome als webkit browser. Heeft ook erg fijne developer tools aan boord.

Een opmerking over beiden:

IE6 droppen is commercieel gezien (zeker met NL als doelgroep), vaak geen optie. Het IE6 gebruik ligt nog steeds behoorlijk hoog in het bedrijfsleven.

Chrome gebruikt helaas een wat vernaggelde versie van Webkit (bijvoorbeeld zonder font-embedding support), dus als je ook Chrome wilt testen, doe dit dan naast Safari. Daarnaast heeft de V2 JS engine ook zo z'n quirks.

Als je Webkit wilt testen is Chrome dus niet zo'n beste keuze.