CSSを最近始めました。実は、2P目の印刷表記がおかしいのです。

締切済

質問者：kote1969
質問日時：2010/05/30 06:19
回答数：2件

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">

</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>
---------------------

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： rurino
回答日時：2010/05/31 09:29

印刷した際何ページにもわたるような長いページでは、

左右にFloatをかけてあるものですと
改ページのタイミングで強制的に「clear: both;」がかかった状態になります。
そのために思いもよらぬ表示になったりします。

要所要所（見出し部分など）で page-break-before を入れるとよいと思うのですが…

- 0
- 件

通報する

この回答へのお礼

そうだったのですか。長いページになるときは、強制的にclear:both;がかかっちゃうのですか。
ありがとうございます。
書籍ではこういった場合の解決法がのってなく、検索しても欲しい答えにたどりつけず、
本当に困っていました。
最初おかしかったfg1ページは、今はちょうど表見出しのとこで、自動的に改行されていましたので、
あえてpage-break-before はいれなくてもいいのかもっと、躊躇してしまいました。
今、作成中の他ページに、さっそくpage-break-before を入れて様子をみたいと思います。

自分、まだ試行錯誤中のビギナーなので、作成が遅く、返事が遅れてしまうかもしれませんが、
お答えいただいて、今後の作成においても光りがさしたようです。

本当に嬉しいです。ありがとうございました。　頑張ります(^^)

通報する

お礼日時：2010/05/31 21:39

No.1

回答者： salonpath
回答日時：2010/05/31 02:40

まだ解決してなかったんですね

base.cssかfg1_top.cssでoverflowつかってませんか?

この回答への補足

たびたびすみません。
以前のPrint.cssの件では、隠したいもの、文字など上手くいったのですが（ありがとうございます）、
また、ココで詰まってしまいました。

base.cssには。body枠、サイドナビ、ヘッダー部分、フッター部分をいれています。
fg1_top.cssの方に、メイン部分のみです。表の冒頭の見出しにあたる所にoverflowをいれてます。

実は、最初このfg1ページが、こうなってしまい、
わからなかったので、色々、とったり外したりして、何回かやっていたら、
ページが上手く表示されたのですが、
このページを基に複製してfg2、fg3と2ページ目、3ページ目を作ったところで、
また同じ現象におちいりました。
原因は何なのか、わからないままページ表記が直ったりしたので、
なぜ、こういうことが起きるのだろう？と、ずっと、謎だったのです（今もですが）

上手くいったfg1にも、実はまだ見出し部分にoverflowがはいっています。
ちょっとこれをとってみてどうなるのかとか、
今、fg2、fg3も作成していますので、
overflowに焦点をあわせて、色々試してみたいと思います。

本当にありがとうございました。すごく助かりました。