[IE+CSS] printversie justified text+beeld duwt text eronder - Softwareontwikkeling

dinsdag 24 april 2007 16:27

Acties:

Topicstarter

hoi, als ik de volgende HTML in IE uitvoer, en ik print de pagina, dan wordt de tekst onder het beeld gezet. dit gebeurt alleen als ik text-align op justify zet, niet als deze op left, center of right staat.

ik kan eigenlijk niks op internet vinden dat dit probleem benoemt laat staan een oplossing ervoor heeft. enige wat ik kan bedenken is een workaround met een print-stylesheet waar ik de text-align op left zet, maar een echte oplossing is het niet.
screen output:
Afbeeldingslocatie: http://www.europe-re.com/clients/GOT/justify_screen.jpg

Afbeeldingslocatie: http://www.europe-re.com/clients/GOT/justify_screen.jpg

print output:
Afbeeldingslocatie: http://www.europe-re.com/clients/GOT/justify_print.jpg

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Justify-bug</title>
    <style type="text/css"><!--

        DIV.wrapper     { float:none; width:350px; font-family:Arial, Helvetica, sans-serif; font-size:12px; padding:5px; background-color:#FFFFCC; border:1px outset white; margin-bottom:10px; }
        DIV.imgcont     { display:inline; float:right; clear:right; padding:0px; margin:0px 0px 5px 5px; }
        IMG.imgbasic    { width:150px; }
        DIV.textleft    { text-align:left; }
        DIV.textjust    { text-align:justify; }

    --></style>
</head>
<body>
    <div class="wrapper">
        <div class='imgcont'>
            <img src="http://www.europe-re.com/files/content/00037700/37735_view_-on_malta.jpg" id='imgbasic1' class="imgbasic" />
            <div><i>Hier komt een caption</i></div>
        </div>
        <div class='textjust'>
            Deze tekst wordt in printversie onder het beeld geplaatst!
            Deze tekst wordt in printversie onder het beeld geplaatst!
            Deze tekst wordt in printversie onder het beeld geplaatst!
            Deze tekst wordt in printversie onder het beeld geplaatst!
            Deze tekst wordt in printversie onder het beeld geplaatst!
            Deze tekst wordt in printversie onder het beeld geplaatst!
        </div>
    </div>

    <div class="wrapper">
        <div class='imgcont'>
            <img src="http://www.europe-re.com/files/content/00037700/37735_view_-on_malta.jpg" id='imgbasic1' class="imgbasic" />
            <div><i>Hier komt een caption</i></div>
        </div>
        <div class='textleft'>
            Deze tekst wordt in printversie netjes geprint.
            Deze tekst wordt in printversie netjes geprint.
            Deze tekst wordt in printversie netjes geprint.
            Deze tekst wordt in printversie netjes geprint.
            Deze tekst wordt in printversie netjes geprint.
            Deze tekst wordt in printversie netjes geprint.
            Deze tekst wordt in printversie netjes geprint.
        </div>
    </div>
</body>
</html>