печать в chrome - проблемы печати таблицы

[Zippovich]

Есть страница: http://www.metrofram...ilmoplast-tape/

там есть кнопка "Print", которая делает window.print(), т.е. запускает диалог печати браузера.

Проблемы есть во всех браузерах, но для начала хочу решить в Chrome.

Основной контент это таблица с 2-мя колонками, в левой колонке картинка, в правой текст.

таблица вмещается на 3 страницы, ячейки обрезаются нормально, но есть проблема с первой строкой таблицы на каждой странице.

Прилагаю скриншоты вида печати и страницы:

[deadrash]

Ссылочку поправте, а то она не алё.

[Zippovich]

к сожалению не смог разрешить доступ для этого урла для всех ip.

Выкладываю код здесь:

вот media print

@media print {

/* Styles for print */

.c_p {

page-break-after: always;

page-break-inside: avoid;

}

body {

font: 12px arial;

}

#header {

border-bottom: 1px solid #999;

}

#header-inner {

background: none

}

/* Hide some blocks */

.email_block,

.search_block,

.menu-main-menu-container,

#side-bar-stretch,

.addthis_toolbox,

.print-button,

.fa-right,

.social_networks,

br.clearfix {

display: none;

}

.cellpadding10 td {

padding: 10px;

}

}

тут ничего экстраординарного нет

.c_p - это блок в любой ячейке этой таблицы

проставляется javascrip-ом

jQuery(function() {

jQuery('.print-button').click(function(e) {

e.preventDefault();

window.print();

});

var tableClass = 'cellpadding10';

jQuery.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());

if (jQuery.browser.chrome) {

jQuery('.' + tableClass + ' td').each(function() {

var $_td = jQuery(this);

$_td.html('<div class="c_p">' + $_td.html() + '</td>');

});

}

});

html строки таблицы

<tr>

<td><div class="c_p"><a href="http://www.metrofram...board.jpg"><img class="alignright size-medium wp-image-4446" title="FT 8 burnish T hinge to backing board" src="http://www.metrofram...rd-300x175.jpg" alt="" width="300" height="175"></a></div></td>

<td><div class="c_p"><strong>Step 8 </strong>Now tear off another piece of filmoplast tape and make a T-hinge with the hinge that is already on the back of the photo. To ensure the bond you can use a burnishing bone.</div></td>

</tr>

этой проблемы нет в винде - только на маке

Edited April 3, 2013 by Zippovich

[deadrash]

Без странички с примером конечно тяжело понять что не так, я попробовал создать тестовую страничку, но видно у вас стили иначе применены.

http://jsfiddle.net/8w22z/

Edited April 3, 2013 by deadrash

[Zippovich]

спасибо за попытку - я попробую сегодня тоже создать пример и погонять, к сожалению у клиента стоит firewall, который блокирует все что можно кроме указанных хостов, я не могу на это влиять, а ставить огромную систему локально долго, там не только WP еще много самописного и несколько баз и пр.

[Zippovich]

в общем я тестировал, делал чистый html без стилей и пр. только с таблицей

в Chrome не удалось побороть проблему

в Safari есть похожий баг

это все касается только Mac

в винде все нормально

вот у меня такая же проблема: http://stackoverflow.com/questions/14653459/page-break-logically-inserted-into-html-table