CODEWITHSUNDEEP
htmlcssstyles
Filip CZ
Filip CZ

Reputation: 179

HTML,CSS - Print page doesn't display correctly in Firefox

I really need to optimize this page (http://filipcz.ideatech.cz/mproj/components/tisk.php) for printing on a paper (standard A4 paper size). My page works quite good in Chrome, IE or Edge, but Firefox displays it badly.The image describing my issue

//Edit: Trying to describe clearer, what I really need to achive: I replaced <i>Střední průmyslová škola Edvarda Beneše<br>a Obchodní akademie Břeclav</i> with Some text on the left and <i>Seznam projektů</i> with Text on the right side.

Code:

...
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Databáze maturitních projektů</title>
    <style>
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }
    td { padding-left: 15px; padding-right: 15px; }
    @media print{
        .netisk{
            visibility: hidden;
        }
    }
    </style>
...

...
    <div align="center" class="netisk">
        <input type="button" value="Vytisknout" onclick="window.print();">
        <input type="button" value="Zavřít okno" onclick="window.close();">
        <hr style="width:30%;">
    </div>
    <div style="float: left;">
        <i>Some text on the left</i>
    </div>
    <div style="float: right;">
        <i>Text on the right side</i>
    </div>
    <hr style="width:100%;">
    <div align="center">

<table cellspacing='0'><thead><tr><th> ID </th><th> Název projektu </th><th> Kategorie </th><th> Autor </th><th> Třída </th><th> Rok </th><th> Vedoucí práce </th></tr></thead><tbody><tr><td>1</td><td>Databáze projektů (PHP + MySQL)</td><td>Webové stránky</td><td>Filip Krolop</td><td>EL 4.A</td><td>2015/2016</td><td>zavodny</td></tr><tr><td>2</td><td>Vytvoření jednoduchého herníhu prostředí v Unreal Enginu 4</td><td>Unity</td><td>Viktor Krčma</td><td>EL 4.A</td><td>2015/2016</td><td>kotlarik</td></tr><tr><td>3</td><td>Návrh podnikové sítě a její simulace v Packet tracer</td><td>Sítě</td><td>Michal Kubík</td><td>EL 4.A</td><td>2015/2016</td><td>kotlarik</td></tr></tbody></table>
    </div>
...

Is there any way to fix this using CSS or HTML?

Thank You very much for any help.

Upvotes: 0

Views: 188

Answers (3)

Rayan Sp
Rayan Sp

Reputation: 1020

try this, I only removed the floats & added HTML, head & body tags

<html>  
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
       <title>Databáze maturitních projektů</title>
    <style>
    table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
      }
    td { padding-left: 15px; padding-right: 15px; }
   </style>
   </head>
   <body>
   <div align="center" class="netisk">
    <input type="button" value="Vytisknout" onclick="window.print();">
    <input type="button" value="Zavřít okno" onclick="window.close();">
    <hr style="width:30%;">
</div>
<div>
    <i>Střední průmyslová škola Edvarda Beneše<br>
    a Obchodní akademie Břeclav</i>
</div>
<div>
    <i>Seznam projektů</i>
</div>
<hr style="width:100%;">
<div align="center">

 <table cellspacing='0'><thead><tr><th> ID </th><th> Název projektu </th>     <th> Kategorie </th><th> Autor </th><th> Třída </th><th> Rok </th><th> Vedoucí    práce </th></tr></thead><tbody><tr><td>1</td><td>Databáze projektů (PHP + MySQL)</td><td>Webové stránky</td><td>Filip Krolop</td><td>EL 4.A</td><td>2015/2016</td><td>zavodny</td></tr><tr><td>2</td><td>Vytvoření jednoduchého herníhu prostředí v Unreal Enginu 4</td><td>Unity</td><td>Viktor Krčma</td><td>EL 4.A</td><td>2015/2016</td><td>kotlarik</td></tr><tr><td>3</td><td>Návrh podnikové sítě a její simulace v Packet tracer</td><td>Sítě</td><td>Michal Kubík</td><td>EL 4.A</td><td>2015/2016</td><td>kotlarik</td></tr></tbody></table>
</div>
</body> 
</html>

if you want this to show to the right, just change this in the code. I put "Seznam projektů" in the same div and floated it to the right

    <div>
    <i>Střední průmyslová škola Edvarda Beneše<br>
    a Obchodní akademie Břeclav</i>
     <i style="float:right">Seznam projektů</i>
     </div>

Upvotes: 1

AnatPort
AnatPort

Reputation: 748

remove the float:left from the left div, and add inline-block to the following divs. this works for chrome and firefox.

<div style="display:inline-block">
    <i>Střední průmyslová škola Edvarda Beneše<br>
    a Obchodní akademie Břeclav</i>
</div>
<div style="display:inline-block; float:right">
    <i>Seznam projektů</i>
</div>

Upvotes: 0

Vin O&#39;Brien
Vin O&#39;Brien

Reputation: 46

Maybe try float left on the broken div.

Upvotes: 0

Related Questions