Firefox weergeeft afbeeldingen door divs heen - layout kapot

[Nickbn]

Lieve medetweakers,

Ik heb (met mijn beperkte websitebouw kennis) in het programma Artisteer een website ontworpen die er op Google chrome en IE10 prima uitziet. Echter krijg ik de mededeling dat Firefox de tekst en vakjes / afbeeldingen verkeerd weergeeft (afbeeldingen door de vakjes heen, tekst die er eerder en buiten de omringende vakjes begint als hoofdproblemen). Echter kan ik tot zover beoordelen dat er in de CSS specifiek rekening is gehouden met Chrome en IE maar nergens specifiek met Firefox.

Ik heb een tijdje zitten zoeken op de w3schools website om mezelf te proberen dieper in de materie in te gaan maar ik kan het gewoonweg niet vinden. Aanpassingen die ik maak verzieken de layout of lossen niets op. Ik kwam erachter de div width percentages aan te passen dat het probleem in firefox wordt opgelost, maar in chrome en IE niet. Ik kom er niet uit. Daarom probeer ik het hier te vragen hopend dat iemand me een duwtje de goede richting op kan geven.

de url is als volgt http://www.leerpraktijkgoedereede.nl/

Problemen zijn duidelijk zichtbaar op de hoofdpagina en een aantal andere pagina's
Alvast duizendmaal dank!

[MoietyMe]

Dit heeft te maken met de manier waarop Firefox omgaat met het box-model in combinatie met display: table-cell.

Zo uit mijn hoofd hanteert Firefox standaard de correcte implementatie; namelijk: 'content-box'.

Door dat je een breedte in percentages opgeeft (33%) en daar dan vervolgens padding aan toe voegt wordt de div breeder dan die 33%. Dat is de reden dat de layout uit zijn voegen loopt.

[Nickbn]

Aha. Dus als ik je goed begrijp moet ik een firefox-specifieke line toevoegen aan de css die de padding niet meeneemt in het breedte percentage van de betreffende box?

[NMe]

Nee. Box-sizing gebruiken.

[Room42]

Sowieso moet je je even afvragen of al die inline styling nodig is of dat je dat gewoon in je template kan regelen (dus standaardiseren).

[Nickbn]

ik heb het aangepast in de .css file maar daar stond dus al blijkbaar dit gedefinieerd

code:

{
   display: block;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

Dat lost het dus niet op

[ Voor 72% gewijzigd door Nickbn op 17-03-2014 19:53 . Reden: aanpassing ]

[NMe]

Grappig, want ik heb net handmatig vanuit mijn inspector -moz-box-sizing: border-box toegegevoegd aan het relevante element (dat ding met 33% erop ) en op magische wijze werkt het ineens.

Zeker weten dat je naar het goeie element kijkt? Je hebt nogal een wirwar van grotendeels overbodige elementen.

[Nickbn]

Dat werkt inderdaad. Ik dacht dat het al in de CSS stond en dus ook op die manier werd "overgedragen"naar het uiteindelijke document, maar inline toevoegen werkt nu bij mij ook. Dank!


Over die wirwar ven overbodige elementen, dit word veroorzaakt door Artisteer. Blijkbaar is het tijd om nu echt css te gaan leren

[ Voor 105% gewijzigd door Nickbn op 17-03-2014 20:12 . Reden: gelukt! ]