[CSS] "Page-break-inside: avoid" werkt niet op div

[dhs]

Ik heb een pagina in PHP gemaakt die categorieën met vragen in afzonderlijke div's plaatst. Omdat de antwoorden op deze vragen geprint moeten worden wil ik graag dat deze div's niet over meerdere pagina's gesplitst worden. Dit dacht ik op te lossen door de div een css page-break-inside: avoid mee te geven, dit haalt echter niks uit: de div wordt nog steeds uit elkaar getrokken.

Dit zijn de CSS settings van de div

code:

#cat {
    background-color:F1F1F1;
    margin: 0;
    margin: 50px 0 0 0;
    page-break-inside: avoid;
}

En zo komt de geprinte pagina er uit te zien:


Ik heb verschillende dingen geprobeerd, zoals een page-break-after: auto op de #cat div, div float op none gezet maar niks werkt. "page-break-after: always" op de #cat div werkt wel, maar dan komt iedere categorie op een aparte pagina te staan en dat is niet de bedoeling.

Zie ik iets over het hoofd?

[MueR]

Volgens W3 Schools wordt dit enkel door Opera ondersteund. Zou dat je probleem kunnen zijn?

[RobIII]

dhs schreef op maandag 18 januari 2010 @ 12:58:
Zie ik iets over het hoofd?

Welke browser (en versie)? Want support voor page-break-inside: avoid is AFAIK nog verre van goed

MueR schreef op maandag 18 januari 2010 @ 13:22:
Volgens W3 Schools wordt dit enkel door Opera ondersteund. Zou dat je probleem kunnen zijn?

EJ Tussenpostert

[ Voor 37% gewijzigd door RobIII op 18-01-2010 13:27 ]

[dhs]

MueR schreef op maandag 18 januari 2010 @ 13:22:
Volgens W3 Schools wordt dit enkel door Opera ondersteund. Zou dat je probleem kunnen zijn?

Dan zou "page-break-after: auto" het probleem toch moeten oplossen, maar dat werkt ook niet. Volgens W3schools wordt die wel ondersteund.

Is overigens getest onder zowel IE7 als FF 3.5.7

[ Voor 6% gewijzigd door dhs op 18-01-2010 13:48 ]

[MueR]

page-break-after: auto;
Default. Insert a page break after the element if necessary.

Dus. After heb je weinig aan.

RobIII schreef op maandag 18 januari 2010 @ 13:27:
EJ Tussenpostert

Traag

[ Voor 36% gewijzigd door MueR op 18-01-2010 13:52 ]

[dhs]

Ja..wat is de definitie van "necessary" in deze? Ik vind die page break wel necessary als de volgende div niet volledig op dezelfde pagina past.

[Janoz]

Het probleem treed op in de 'volgende' div. De styling van de huidige div heeft daar natuurlijk niet zo heel veel over te zeggen.

Waarom is het trouwens een div? Een table lijkt me veel voor de hand liggender eigenlijk. Ik kan me voorstellen dat browsers toch wat beter omgaan met het afdrukken van tables (door evt handig met thead om te gaan waardoor iig je header row ook op de volgende pagina staat oid)

[dhs]

Het is een tabel die in een DIV staat. Onder de tabel staat namelijk nog meer info over de categorie zoals je op het plaatje kan zien (zoals gemiddelde score etc.). Op de print preview kun je het niet zien maar de achtergrondkleur van die div verschilt met die van de pagina achtergrond, dat is ook de reden dat ik het in een div heb gezet, om wat meer controle te hebben over de layout van de verschillende categorieën.

[MueR]

Als je nou eens een block om de complete categorie heenzet, en die een page-break-after geeft, werkt dat?

[dhs]

Je bedoelt de categorie div de optie "display: block" meegeven? dat heeft helaas geen effect.

[MueR]

Nee, ik bedoel een nieuwe div om alles heen zetten, inclusief de header en 2 footer paragraphs.

[dhs]

Dat werkt niet, en dat is opzich wel logisch: hij begint dan pas een nieuwe pagina na die div en aangezien de content van die div meer dan 1 pagina lang is gebeurt dat niet.

[Verwijderd]

Hi,

ik zit met ongeveer hetzelfde probleem. Ik zoek een voorwaardelijke paginaovergang bij printopdracht van html-pagina afhankelijk van het feit of het gedeelte nog op de pagina past. Ik ben een leek op het gebied van html en css, maar na conversie van een document vanuit MS-Word komt er in de html-code het volgende te staan:

<P class=MsoNormal style="mso-pagination: widow-orphan lines-together">

Helaas werkt het niet, maar misschien brengt het jullie op een idee.

[RobIII]

style="mso-pagination blahblah"

MicroSoft Office.
ALS het al werkt, dan is het geheid IE-only. En zelfs die kans acht ik klein.

Gewoon standaard office-bagger-"HTML".

[ Voor 11% gewijzigd door RobIII op 21-01-2010 16:17 ]

[Verwijderd]

Hier een link naar uitleg over widow orphan constructies.
http://www.w3.org/TR/CSS2...propdef-page-break-inside

[Verwijderd]

Deze mogelijkheid word bijna zeer slecht ondersteund door bijna alle browsers (op opera na). Check http://css-discuss.incutio.com/?page=PrintStylesheets