CSS Problemen met juist schalen van Printer Friendly Page

[bvp]

Goedemiddag,

Ik loop tegen een probleem aan met het juist schalen van <div> elementen.

Wat ik wil bereiken is het volgende:

Bovenaan in 2 kolommen:

Naam:	BLABLA	Test:	Testing 1
Leeftijd:	458	Postcode:	4584 JK

Naam en leeftijd rijen wil ik dan links op de pagina neerzetten en test en postcode aan de rechterkant. Beide op ongeveer 40% van de gehele breedte van de pagina.

Hieronder (stukje ruimte onder deze tabel) wil ik dan een tabel hebben over de gehele 100% van de pagina.

Ik kom steeds wel een beetje in de buurt maar het lijkt nog niet echt mee te vallen.
Of rechter boven tabel schuift onder de onderste tabel, of begin pas na de tabel.

Het dichtste in de buurt ben ik met de volgende CSS nog gekomen. Dit leek allemaal goed te gaan totdat ik hem ging printen. Toen verschoof Test en Postcode in 1x onder Naam en Leeftijd maar bleef dus wel gewoon aan de rechterkant uitgelijnt staan.

Cascading Stylesheet:

body {  
                background-color: #ffffff;
            }
            table {
                clear: both;
                border-top: 1px solid #ccc;
                border-collapse: collapse;
                margin: 10px auto;
                vertical-align: top;
                font-family: serif;
                font-size: 10pt;
            }
            /* the row label cells */
            table th {
                text-align: center;
                border-right: 1px solid #ccc;   
                border-bottom: 1px solid #ccc;
                font-weight: bold;
                white-space: nowrap;        
            }
            /* regular data cell */
            table td {
                border-bottom: 1px solid #ccc;
                border-right: 1px solid #ccc;
                border-left: 1px solid #ccc;    
                text-align: left;
                vertical-align: top;
                padding: 3px;
            }
            /* table rows */
            table tr {
                text-align: left;
                vertical-align: bottom;
                color: #999;
                border-right: 0px;
                font-weight: normal;
                margin-left: 0px;
                padding-left: 0px;
                padding-top: 60px;
            }
            
            table.orderheader {
                border-top: 0px;
            }
            table.orderheader td {
                border-bottom: 0px;
                border-right: 0px;
                border-left: 0px;
            }
                
            .container {
                position: relative;
            }
            .topcontainer {
                width: 100%;
            }
            .left-element {
                float: left;
                left: 0;
                width: 40%;
            }
            .right-element {
                float: right;
                right: 0;
                width: 40%;
            }
            .bottom-element {
                margin-top: 20px;
                left: 0;
                width: 100%;
            }

Ik hoop dat jullie me een beetje op weg kunnen helpen, want ik zie het niet meer

[LuCarD]

Ik heb een beetje moeite met lastig voor te stellen wat je exact bedoeld met het probleem.

Kan je een klein voorbeeldje online zetten?

Welke browser geeft problemen?

[Rekcor]

Printen in browsers is echt ()⁵

Verwacht dus zeker geen pixel-perfect resultaat!

Wil je ff een voorbeeldje online posten?

[LuCarD]

Rekcor schreef op dinsdag 18 september 2007 @ 14:05:
...
Verwacht dus zeker geen pixel-perfect resultaat!
...

Logisch een printer heeft namelijk geen pixels

[bvp]

Ik weet het, printen vanuit browsers is verre van ideaal!
Het gaat namelijk om een GUI tool binnen de SAP wereld die we gebruiken om applicaties te maken (Web Dynpro).
Vanuit deze tool heb je geen beschikking tot een print functionaliteit. Ik had hiervoor al voorgesteld om hiervoor Adobe documenten te gebruiken.
Dit wilde ze niet dus ik heb nu voor elkaar om de data uit te spugen als XML en deze te hangen in een XSLT document zodat er een mooi html document uitkomt.

Ik heb een voorbeeld online (let dus niet op de source omdat dit vanuit xml is gegenereerd).

http://members.home.nl/bvprooijen/test.html

Het probleem is dus als je het venster op een bepaalde grootte sleept, dat hij dan goed uitgelijnt is. Als je hem echter groter maakt, dan verschuift de rechter <div> naar onder.

[LuCarD]

Met FF gaat het wel goed. IE doet raar....

Maak de twee float element eens iets kleiner. Elk 45% width of zo ...

[bvp]

LuCarD schreef op dinsdag 18 september 2007 @ 14:27:
Met FF gaat het wel goed. IE doet raar....

Maak de twee float element eens iets kleiner. Elk 45% width of zo ...

Ok, thnx!!!
Dat lijkt inderdaad de oplossing te zijn. Na allerlei dingen proberen had ik beide floating divs weer op 50% staan.
Dat lijkt dus het probleem te zijn met IE.

[Rekcor]

LuCarD schreef op dinsdag 18 september 2007 @ 14:07:
[...]


Logisch een printer heeft namelijk geen pixels

Hehe, als we bijdehand gaan doen ken ik er nog wel een: deze printer heeft wel degelijk pixels http://homepages.ihug.co.nz/~bcollins/hpfortune.jpg

[iworx]

In je printerstylesheet druk je px uit als pt --> points.
Dat geeft veel betere resultaten.