• 締切済み

IE8で印刷する際、印刷領域の高さが小さくなる

IE8で印刷する際、印刷領域の高さがA4に対して下半分程度隠れてしまう件 ウェブ上で請求書等の書類を印刷するプログラムを書いています。 IE8で印刷する際、印刷領域のheightがA4に対して下半分程度が隠れてしまいます。 heightを調整しても印刷される空白ページが増えるだけで、各ページごとのheight(うまい表現ができませんが・・・)は小さいままです。 IE8以外では問題なく印刷できます。 皆様のお知恵を拝借できればと思います。 下記がCSSになります。 /**************************************************************************/ .printbody{/*印刷フィールド*/ z-index:3000!important; position:absolute!important; left:0px!important; top:0px!important; background-color:#FFF!important; width:100%!important; padding:0!important; margin:0!important; min-height:100%!important; } .ppcontent{/*printbodyの中に配置。実際に印刷するのはこの中だけ*/ position:relative!important; left:0px!important; top:0px!important; zoom:1; z-index:3001; background-color:#FFF; width:100%!important; height:auto!important; padding:0!important; margin:0!important; min-height:100%!important; } .off{/*印刷しない個所にはすべてこのCSSをかけています*/ display:none!important; } .off *{ display:none!important; } /**************************************************************************/ よろしくお願い致します。

みんなの回答

回答No.1

プレビュー画面でも分かる結果なのでしょうか?

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • IE6での表示がうまくいかず困っています

    すみません!先ほど同様の質問をしたのですが、文字数オーバーで途中で切れてしまっていたので本当に恐縮ですが再度お願いいたします。 コーディングを勉強中なのですが、どうしてもIE6での表示がうまくいかず、大変困っています。色々ググって調べてみたのですが、決定的な原因がわからず本当にどうすればよいのかわかりません・・・。どなたかご教示いただけませんでしょうか。 他のFireFOX,Safari,IE8では多少のズレはあるものの普通に表示されました。IE6では背景画像とフッターのみしか表示されない。という状況です。 CSSは以下です。 /* generated by csscreator.com */ html{ height:100%; } body{ margin:0; padding:0; text-align:center; color: #fff; background: #000000 url("../images/back-right.gif") repeat-x; position: relative; text-decoration: none; height:100%; } body > #pagewidth { height: auto; } img { border-style:none; } ul{ margin:0; padding:0; text-align:left; } li{ list-style-type: none; line-height:100%; } p{ margin:0; padding:0; text-align:right; } #bg_wrap { height: 423px; width: 50%; top: 0px; background: url(../images/back-left.gif) repeat-x; position: absolute; } #pagewidth{ width: 918px; height: 100%; min-height: 100%; text-align:left; margin: 0px auto; position: relative; background: url(../images/left-col.gif) left repeat-y; } #left-container{ width: 130px; height: 100%; float:left; position:relative; padding-left: 23px; } #header{ width: 100%; height: 266px; color: #000; background-color: #fff; } #navigation{ width: 100%; color: #fff; padding-bottom: 5em; } #main-container{ width: 764px; float: right; display:inline; position: relative; } #maincontents{ padding-right: 21px; } #footer{ height: 50px; width: 100%; text-align:left; padding-left: 95px; clear: both; } /* *** Float containers fix: http://www.csscreator.com/attributes/containedfloat.php *** */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix{display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix{height: 1%;} .clearfix{display: block;} /* End hide from IE-mac */ /*printer styles*/ @media print{ /*hide the left column when printing*/ #leftcol{display:none;} #twocols, #maincol{width:100%; float:none;} } 以上です、よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • css: IEでsidebarが表示されない

    cssで2カラムのページを左右を両方floatさせて作っています。 firefoxでは表示されるsidebar(背景、画像、テキストを含むすべて)がIE7では表示されません。clearfixの問題かと思いclearfixを入れてみましたがうまくいきませんでした。 どうしたらよいかご存知の方がいたら教えてください。よろしくお願いします。 ちなみにCSSの主要部分は以下のとおりです。 /*--- container ---*/ #container {position: relative;     background:url(images/background.jpg) repeat-y; width: 800px; hight: 600px; padding: 0; margin-left: auto; margin-right: auto; text-align: left; border: 0; } /*--- header ---*/ #header {width: 800px; height: 107px; margin:0;} /*--- side-bar ---*/ #side-bar{position:absolute; background: transparent url(images/menu_bckgrnd.png) center center no-repeat; width: 150px; padding:0; float:left;} #side-bar ul { margin: 0; padding: 50px 50px 50px 50px;    ist-style: none;         width:30px;} #side-bar li { margin: 0; padding: 0;} #side-bar li a{ display:block;} #side-bar a:hover{position: relative; top: 1px; left: 1px;} /*--- main-nav: content area ---*/ #main-nav {background: url(images/design.png) top left no-repeat; width: 610px; margin-top: 0 0 0 150px; padding: 0 10px 0 30px; float:right;} #main-nav a:hover {position: relative; top: 1px; left: 1px; } #content1{ float:left; width:200px; margin: 0 2px 20px -20px; background:#fff;} #content2{ float:left; width:200px; margin: 0 2px 20px 2px; background:#fff;} #content3{ float:left; width:200px; margin: 0 2px 20px 2px; background:#fff;} /*--- footer ---*/ #footer {width: 800px; height: 100px; background: transparent; margin: -100px 0 0 0; clear: both; text-align:center; padding-top:50px;} /* -- clearfix -- */ .clearfix{ zoom:1; } .clearfix:after{content:'.'; display:block; visibility:hidden; height:0; clear:both;}

    • ベストアンサー
    • CSS
  • CSS アクティブタブの仕組み

    CSS アクティブタブの仕組み 閲覧ありがとうございます。説明下手ですがお付き合い宜しくお願い致します CSS勉強も兼ねて擬似フレームのサイトを作っているCSS初心者です 解らないことは本やリファレンスサイトで調べ、忘れた時の為にコメントを書きこみ少しずつですが理解しながらサイトを作っています。 現在テンプレートサイト様が配布されている http://10prs.com/material/samples/cdp/mono-vivid/index.html を参考にメニュータブごとに背景色を変え、アクティブになったタブの背景色もタブと同じ色にしようと考察してます。 タブがアクティブになった時にメニューとメイン部分の境界のボーダーが消えるのですが、この仕組みがいまいちよく解りません。 恥ずかしながらアクティブになった時にボーダーが消える部分の記述があるのがどこにあるのか発見できずにいます。 無知なのに無謀な試みと思われるでしょうが御教示頂けないでしょうか、宜しくお願い致します ■以下テンプレートのCSSを抜粋 /* 各#ID&.class */ div#PAGETOP { height: 100%; overflow: auto; } div#HEADER { position: fixed !important; position: absolute; top: 0; left: 0; width: 100%; height: 70px; color: #fff; background: #000; } ul#PAN { display: none; } div#MENU { position: fixed !important; position: absolute; top: 80px; left: 30px; width: 130px; } div#MENU h2 { display: none; } div#MENU ul { margin-top: 20px; margin-left: 0; list-style: none; position: absolute; z-index: 100; height: 100%; } div#MENU ul li a { margin: 5px 0 5px 10px; padding: 5px 0; border: 1px solid; display: block; width: 119px; color: #333; background: #f1f1f1; font-family: 'Book Antiqua', 'MS P明朝', serif; font-size: 116%; text-align: center; text-decoration: none; } div#MENU ul li a:hover { margin-left: 0 !important; width: 129px !important; } li.menu-on a, li.menu-on a:link, li.menu-on a:visited { margin-left: 0 !important; border-right: 1px solid #fff !important; width: 129px !important; background: #fff !important; } div#KIZI { margin-left: 160px; padding: 80px 50px 30px 50px; border-left: 1px solid #333; background: #fff; } ul.modori { display: none; } div#FOOTER { position: fixed !important; position: absolute; bottom: 0; left: 0; width: 100%; height: 22px; color: #fff; background: #000; } div#FOOTER h2, div#FOOTER ul.modori { display: none; } div#FOOTER ul { text-align: center; } div#FOOTER ul li { display: inline; }

    • ベストアンサー
    • HTML
  • ヘッダーとサイドバーの色の変更の仕方

    現在ヘッダーやサイドバーの色が黒なのですが、CSSのどの部分を変えることで変更可能ですか?黒はリラクゼーションには不向きなので#660033の色に変更したいのです。 どうか助けてください。 /* その他、拡張があれば記述 */ .skinHeaderFrame { text-align:center; } #navi { list-style:none; margin:0 auto; padding:0; width:605px; } #navi li { display:inline-block; padding:0 15px; *display:inline; *zoom:1; } #navi li a { padding:5px; display:block; } #navi1 a:hover, #navi2 a:hover, #navi3 a:hover, #navi4 a:hover, #navi5 a:hover { background:#996666; color:#FAF3F1; text-decoration:none; } #header { margin:20px 0 40px 0; text-align:center; width:100%; height:301px; background:url(http://www.gird.jp/ameblo/p2/images/header_bg_line.jpg); } .skinHeaderArea2 { margin:0 auto; width:980px; height:301px; position:relative; background:url(http://www.gird.jp/ameblo/p2/images/header_bg.jpg); } .skinBlogHeadingGroupArea { width:340px; position:absolute; top:50px; left:50px; } #gallery { width:450px; height:210px; position:absolute; top:46px; right:55px; background:#000; } #gallery img { position:absolute; top:0; left:0; } .skinArticle { background:none; border:none; padding:0; } .skinArticleHeader { text-align:center; border-top:1px #000 solid; border-bottom:1px #000 solid; border-left:none; margin:0; padding:10px 0; } .detailOn img { margin:0; } .skinSubA .skinMenuHeader { color:#faf3f1; padding:23px 0 0 30px !important; width:270px; height:41px !important; background:url(http://www.gird.jp/ameblo/p2/images/side_header.jpg) no-repeat center top; } .skinSubB .skinMenuHeader { color:#faf3f1; padding:23px 0 0 25px !important; width:155px; height:37px !important; background:url(http://www.gird.jp/ameblo/p2/images/side_header2.jpg) no-repeat center top; } .skinSubA .skinMenu2 { width:300px !important; background:url(http://www.gird.jp/ameblo/p2/images/side_footer.jpg) no-repeat center bottom; padding-bottom:32px !important; } .skinSubB .skinMenu2 { width:180px !important; background:url(http://www.gird.jp/ameblo/p2/images/side_footer2.jpg) no-repeat center bottom; padding-bottom:19px !important; } .skinSubA .skinMenuBody{ margin:0; width:260px; padding:20px 20px 0; background:url(http://www.gird.jp/ameblo/p2/images/side_body.jpg); } .skinSubB .skinMenuBody{ margin:0; width:140px; padding:20px 20px 0; background:url(http://www.gird.jp/ameblo/p2/images/side_body2.jpg); } #footer { position:relative; width:100%; height:65px; background:url(http://www.gird.jp/ameblo/p2/images/footer_bg.jpg); } #myad { width:251px; height:31px; display:block; background:url(http://www.gird.jp/ameblo/p2/images/myad_btn.png); position: absolute; left:50%; top:20px; margin:0 0 0 -125px; text-indent:-9999px; } #myad:hover { background-position:left bottom; }

    • 締切済み
    • CSS
  • CSSでライブドアブログのレイアウトがIEでだけ、崩れてしまう。

    CSSでライブドアブログの左サイドバーのレイアウトがIEで見ると、崩れてしまいます。 Fireboxなどでは、きれいに表示されますが、IEでは、左サイドバーの表示がはるか下方に表示されてしまいます。 下記のCSSに問題がないか教えていただけないでしょうか? 参考になりそうなサイトとして(1)(2)なども見たのですが、結局わからなかったです。 (1)CSSによる段組(マルチカラム)レイアウト講座 ​http://www.geocities.jp/multi_column/index.html​ (2)CSSバグリスト ​http://cssbug.at.infoseek.co.jp/ よろしくお願いします。 /********************************** =2.Common **********************************/ table#header{ width:100%; font-size:12px; color: #cffdcc; } table#header a{ color: #cffdcc; } table#header th{ width:1%; } table#header th img{ margin:2px 10px; width:132px; height:24px; } table#header td.catprbox{ width:1%; white-space:nowrap; } table#header td.catprbox span{ margin-right:15px; } table#header td.newstickerbox{ width:97%; text-align:right; padding-right:10px; } table#header td.startblogbox{ width:1%; padding-right:10px; white-space:nowrap; } table#header td.startblogbox img{ width:17px; height:16px; margin-right:3px; border:0px; vertical-align:middle; } #container{ width:800px; margin:0 auto; text-align:center; } #cgmmenu{ display:none; } #banner{ height:200px; border:solid #fff; border-width:6px; background:#240000 url(http://image.blog.livedoor.jp・・・・・) no-repeat; text-align:left; margin:0 auto; clear:both; } #banner a{ color:#fff; text-decoration:none; } #banner a:hover{ text-decoration:underline; } #banner h1.blogtitle{ padding:80px 30px 5px; font-size:20px; } #banner div.description{ width:500px; padding:0 30px; line-height:135%; font-size:12px; color:#fff; } #blogcontainer{ background:url(http://image.blog.livedoor・・・・) 0 0 repeat-y; border:solid #fff; border-width:0 6px 0; padding:0 0 30px; margin:0 auto; height:1%; } #wrapper{ float:left; width:605px; } #content{ float:right; width:420px; text-align:left; background-color:#F9F3EE; } #contentin{} #left{ float:left; width:180px; } #right{ float:right; width:178px; } #lefttop , #leftbody , #leftbottom , #righttop , #rightbody , #rightbottom {} #footer { background:url(http://image.blog.livedoo・・・・) 0 0 no-repeat; border:solid #fff; border-width:0 6px 6px; height:46px; } #outfooter{}

  • IE6で見るとメニューバーが崩れてしまいます

    ホームページを作成したのですが、ページによって上部に設置したメニューバーが見れたり見れなかったりしてしまいます。CSSハックでIE6でもページ自体は何とか見れるようにはなったのですが、何ページかはどういうわけかトップ部分にあるメニューが画像ではなく、文字で現れて正常に見ることができません。どなた様かお詳しい方、教えて頂けませんでしょうか。下記にhtmlとcssを記述します。 〈html〉 <html> <body> <div class="headbg"><img src="head_bg1.jpg" alt="" border="0"></div> <div class="header"><a href="#" border="0"> <div class="rogo"> </div> </a> <div id="globalnavi"> <ul> <li id="menu1"><a href="#">メニュー1</a></li> <li id="menu2"><a href="#" >メニュー2</a></li> <li id="menu3"><a href="#">メニュー3</a></li> <li id="menu4"><a href="#">メニュー4</a></li> <li id="menu5"><a href="#">メニュー5</a></li> <li id="menu6"><a href="#">メニュー6</a></li> </ul> </div> <div class="main"></div> </div> </body> </html> <CSS> .headbg { height:400px; width: 100%; min-width:900px; border:0px solid #F00; position:absolute; top:66px; left:0; overflow:hidden; background: url(head_bg_bg.jpg); background-repeat:repeat-x; } .rogo { background-image: url(rogo.jpg); background-repeat: no-repeat; height: 160px; width: 160px; padding: 0px; margin-top: 8px; margin-right: 0px; margin-bottom: 11px; margin-left: 33px; position: relative; border: 0px solid #000; clear: both; float: left; position:relative; } .header { width: 900px; height:300px; padding:0px; margin-left: auto; margin-right:auto; text-align:left; margin-top:0px; border:0px solid red; } .main { height:920px; width: 900px; min-width:900px; background-color:#ffffff; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; padding: 0px 0px 0px 0px; margin-left: auto; margin-right: auto; text-align: center; margin-top:65px; } #globalnavi { margin-left:auto; margin-right:auto; margin-top:-170px; text-align:left; top:0px; left:0px; padding:0px; width:700px; height:52px; list-style:none; overflow:hidden; border: 0px solid red; float:right; clear:both; } #globalnavi ul { list-style-type: none; margin: 0; padding: 0; height: 52px; overflow: hidden; } #globalnavi li { text-indent: -9999px; float:left; width: 116px; height: 52px; margin: 0; padding-right: 0px; border:0px solid #333; } #globalnavi a { display: block; position: relative; width: 100%; height: 52px; } #menu1 a { background: url(menu1_active.jpg) no-repeat 0 0; left:0px; margin-left:0px; } #menu2 a { background: url(menu2.jpg) no-repeat 0 0; margin-left:0px; } #menu3 a { background: url(menu3.jpg) no-repeat 0 0; margin-left:0px; } #menu4 a { background: url(menu4.jpg) no-repeat 0 0; margin-left:0px; } #menu5 a { background: url(menu5.jpg) no-repeat 0 0; margin-left:15px; } #menu6 a { background: url(menu6.jpg) no-repeat 0 0; margin-left:15px; }

  • カラム高さ揃え+固定フッター

    いつもお世話になります。 ●確認ブラウザIE6、IE7、FF、 Mac Safari FF 左側幅可変のリキッドレイアウトの中で、 div#wrapの中にある「#boxB、#boxC」のカラム高さが揃った上で #footerはページ下部に固定されている、添付図の状態にしたい。 ●できてること: IE7、FFにおけるカラム高さの統一、固定フッタ ●ここができない: 1.IE6にてboxBとCの高さが揃わない(Cが足らない) 2.#wrapと#footerにすきまが空く(boxBとCの背景色がfooterの上まで来てほしいのです)(全部のブラウザにて) ★CSS /*リキッドレイアウト部分*/ * { margin:0; padding:0; } body { text-align:center; } #container { width:96%; margin-left:auto; margin-right:auto; text-align:left; } #boxA { background:#ffc; } #boxB { background:#fcc; width:100%; float:left; margin-right:-200px; } #boxB p { margin-right:200px; } #boxC { background:#ccf; width:200px; float:left; } #boxD { background:#cfc; width:100%; float:left; } /*100%固定フッタのためのCSS*/ *{ margin:0; padding:0; } html,body{ height:100%; background-color: #000000; color: #000000; } html{ overflow-y:scroll; } #container { width: 100%; position: relative; height: auto !important; height: 100%; min-height: 100%; } div#footer{ position:fixed; bottom:0; left:0; text-align:center; width:100%; } /* * * IE6 * * * */ * html, * html body{ overflow-y:hidden; } * html div#maincontents{ height:100%; overflow-y:scroll; } * html div#footer{ position:absolute; } /* カラム高さが違うものを揃える */ #wrap { overflow:hidden; } #boxB,#boxC { padding-bottom: 32768px; margin-bottom: -32768px; }

    • ベストアンサー
    • HTML
  • HP全体を左寄せ配置するCSSの記述について。

    HP全体を左寄せ配置するCSSの記述について。 CSS付きで中央表示の無料テンプレートを頂きました。 これを左寄せ配置で表示させる方法を教えて下さい。 (base.css) @charset "Shift_JIS"; /* 基本設定 */ *{ margin:0px; padding:0px; font-size:12px; font-family:Verdana, Helvetica, sans-serif; } body{ color:#333; text-align:center; } br{ letter-spacing:normal; } a{ color:#333;text-decoration:none; } a:hover{ color:#fff;text-decoration:none; } img{ border:0px; } /* テンプレート */ #temp{ width:500px;  text-align:center;  line-height:18px; letter-spacing:1px; margin:10px auto; } #header{ background:#fff url(img/cat.gif) no-repeat 0px 0px; width:500px;height:120px; text-align:left; border:1px solid #333; } #menu{ background-color:#333; width:500px;height:24px; color:#fff; margin:10px 0px; border:1px solid #333; } #main{ background:#fff; width:480px; text-align:left; padding:10px; border:1px solid #333; } #footer{ background:#fff; width:500px;height:30px; color:#333; line-height:30px; margin:10px 0px; border:1px solid #333; } /* タイトル部分 */ #header h1{ padding:30px 0px 0px 190px; } /* メニュー部分 */ #menu ul{ list-style-type:none; height:24px; margin-left:30px; } #menu li{ display:inline; padding:0px } #menu a{ color:#fff; line-height:24px; float:left; text-decoration:none; padding:0px 5px; } #menu a:hover{ color:#DB9400; text-decoration:none; } /* メインコンテンツの見出し */ #main h2{ background:url("img/mark.gif") no-repeat; padding:1px 0px 3px 25px; color:#DB9400; よろしくお願いします。

    • ベストアンサー
    • HTML
  • ■IE表示 位置ずれ

    ■IE表示 位置ずれ お世話になっております。あるサイトから無料のテンプレートを入手しましたが IEでは「left」が画面の中央に表示されてしまいますが解決方法はありますでしょうか? body{ min-width: 412px; width:985px; margin:0 auto; font-family:Tahoma; font-size:11px; color:#565656; position:relative #container { padding-left: 172px; padding-right: 238px; height:100% #left { width: 172px; right: 172px; margin-left: -100%; #right { width: 238px; margin-right: -238px; 初心者で申し訳ございませんが宜しくお願いいたします。

    • ベストアンサー
    • HTML
  • IE6.0のバグ

    いつもお世話になっております。 IE6.0のブラウザでの表示についてお願いします。 htmlと外部cssでレイアウトしているのですが、 IE6.0の表示だけがずれてしまいます。 #hr  {  position: relative;  width: 700px;  height: 5px;  background-color: #000000;  margin: 3px 0px 0px 0px;  border-style: none;  padding: 0;  } を指定してある<hr>がうまくいきません。 <hr>の上下に空白(幅)ができてしまいます。 いろいろ検索して対処法を考えたのですが、 どれもうまくいきませんでした。 どなたかわかる方、宜しくお願い致します。