CSSを最近始めました。実は、2P目の印刷表記がおかしいのです。
CSSを最近始めました。実は、2P目の印刷表記がおかしいのです。
HPの画面上は、全て、見栄えを揃えましたが、いざプリントすると、2枚目の表記がおかしいです。1枚目は変な所から下が空欄になり、2枚目の上部分が空いて、2枚目にCSSで表をくんでますが、途中からきれたまま下部（2枚目の下部）で終わり、そのまま最後の3枚目にはフッター部分のみが表示されて、終わります。2枚目の表記が途中から切れて終わってしまう感じです。サファリ以外は、すべてこの表示になってしまいます。
プリント用のCSS表記がおかしいのでしょうか？
下記に、プリント用CSSでつくってあるものを記しました。
何か足りないもの、もしくは間違っていることがありましたら、教えていただきたいのですが・・・
また、対処法などはありますでしょうか？
プリントCSS---------------------------------
@charset "UTF-8";
/* CSS Document */
/*print*/
@media print {
body {
background:#fff;
color:#000;
font-size:12pt;
zoom:100%;/*ie*/
background-image:none;
background-color:none;
}
.body {
background:#fff;
color:#000;
zoom:100%;/*ie*/
background-image:none;
background-color:none;
}
no-image {
display:none;
}
color-txt {
color:#000 !important;
}
table,
tr,
td {
border-collapse:collapse;
border-spacing:0;
border:1px solid #666;
}
.wrapper,
.sidenavi,
.main-all,
.main-light3
.footer {
float: none !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
}
.wrapper {
margin: 0;
padding: 0;
border: 0;
background: transparent;
}
.sidenavi {
display: none;
}
}
---------------------------------ここまで
html 冒頭---------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">
body,td,th {
font-family: ＭＳ Ｐゴシック, Osaka, ヒラギノ角ゴ Pro W3;
}
body {
background: #c5d7e5 url(..○●●○k.gif) repeat-x;
margin-top: 0px;
}
-->
</style>
<style type="text/css" media="print">
<!--
body{
background:white;
}
-->
</style>
<link href="top_files/base.css" rel="stylesheet" type="text/css"
media="all">
<link href="top_files/print.css" rel="stylesheet" type="text/css"
media="print">
<link href="top_files/fg1_top.css" rel="stylesheet" type="text/css"
media="all">
<title> ○●●○</title>
---------------------
お礼
ありがとうございます。 数十ページの小さいサイトなら、 下記のようにCSSを並べて記載する方が良いのですね。 header 320 640 960 div 320 640 960 futter 320 640 960