CSS @media print вообще не работает
Я часами бьюсь над тем, почему не работает @media print, я ищу в Google даже на этом сайте и ничего не помогло, поэтому я и отправляю этот вопрос. Я тестирую его в Google Chrome Print Preview (Ctrl P), но я также распечатал на странице, и он остается пустым.
Я пытаюсь сделать отдельный файл CSS, а также встроенный стиль CSS на странице.
Вот мой код
Заголовки
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/print.css" media="print" />
HTML
<div id="bruikleenovereenkomst">
<div id="blo_header">
</div>
<div id="blo_side_top"></div>
<div id="blo_side_bottom"></div>
</div>
CSS нормальные стили
div#bruikleenovereenkomst {
width:595px;
height:842px;
background-color:#fff;
position:relative;
}
div#blo_header {
width:100%;
height:125px;
background-color:#FBE983;
z-index:9
}
div#blo_side_top {
width:57px;
height:420px;
background-color:#B6CAE5;
position:absolute;
right:0;
top:0;
z-index:99;
}
div#blo_side_bottom {
width:57px;
height:420px;
background-image:url(../images/leaflet.png);
background-repeat:no-repeat;
position:absolute;
right:0;
bottom:0;
z-index:99;
}
Примечание: стили CSS для печати (print.css): div # bruikleenovereenkomst - просто черный блок для тестирования.
@media print{
body {
margin:0;
}
h1#logo {
display:none;
}
ul#menu {
display:none;
}
div#bruikleenovereenkomst {
width:100%;
height:500px;
background-color:#000;
}
div#blo_header {
display:none;
}
div#blo_side_top {
display:none;
}
div#blo_side_bottom {
display:none;
}
}
Все, что я получаю с печатью, это просто пустая страница.