• 締切済み

ulの画像をcssのfloatで横並び、IEでの印刷が変（ソース記述のため長文です）

ulを使い、スタイルで画像を横並びにしたのですが、個々の画像サイズで印刷が正しくされる場合とされない場合があります。 具体的ソースは下部に記述します。 印刷すると、最初のulの方は画像が１つ折り返されてしまいます。 FFやNNは大丈夫でしたが、IEだけが印刷プレビューの段階から折り返されました。 参考に、自分の環境も記載します。 なぜなのか気になっておりまして…。どこか書き方がおかしいのでしょうか？おわかりになりましたら、よろしくお願いします。 ※長文すみません。 ★システム XP　 professional Version 2002 service Pack 2 ブラウザ　IE6.0.29 以下がソースです------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>タイトル</title> <style type="text/css" media="all"> <!-- ul.pageLink{ margin: 0; padding: 0px; list-style: none; } ul.pageLink li{ padding:0; margin: 0; float: left; } --> </style> </head> <body> <div style="width:765px"> ■折り返される <ul class="pageLink"> <li><a href="#a"><img src="img/a.gif" alt="" width="217" height="36" border="0"></a></li> <li><a href="#b"><img src="img/b.gif" alt="" width="139" height="36" border="0"></a></li> <li><a href="#c"><img src="img/c.gif" alt="" width="216" height="36" border="0"></a></li> <li><a href="#d"><img src="img/d.gif" alt="" width="193" height="36" border="0"></a></li> </ul> <br style="clear:both;"> <br> ■折り返されない <ul class="pageLink"> <li><a href="#a"><img src="img/a.gif" alt="" width="207" height="36" border="0"></a></li> <li><a href="#b"><img src="img/b.gif" alt="" width="159" height="36" border="0"></a></li> <li><a href="#c"><img src="img/c.gif" alt="" width="206" height="36" border="0"></a></li> <li><a href="#d"><img src="img/d.gif" alt="" width="193" height="36" border="0"></a></li> </ul> <br style="clear:both;"> </div> </body> </html>

  • HTML
  • 回答数2
  • ありがとう数3

みんなの回答

  • CHI-512
  • ベストアンサー率69% (63/91)
回答No.2

こんにちは。 No.1さんと同じくIE6のCSS解釈が誤っているのが原因です。 Floatするとなぜか右マージンが3px程発生してしまうバグがあったはず？ 恐らく、最後のメニュー画像に右マージンが発生しているために折り返されてしまうのでしょう。 <li><a href="#d"><img src="img/d.gif" alt="" width="193" height="36" border="0"></a></li> を <li class="menu-d"><a href="#d"><img src="img/d.gif" alt="" width="193" height="36" border="0"></a></li> にして、 スタイルシートで .menu-d { float: right; } にするか、 * html li.menu-d { /* IE6 Hack */ margin-right: -3px; /* 無理やりっぽいですね */ } で直ると思います。 他の対処法としては、 liをインライン属性にすればいいと思います。 ul.pageLink li { display: inline; } このとき、画像の右に半角スペースが生じてしまう場合は、リストのソースを以下のようにし、</li><li>間の改行を無くすと綺麗に並びます。 <ul class="pageLink"><li><a href="#a"><img src="img/a.gif" alt="" width="207" height="36" border="0"></a></li><li><a href="#b"><img src="img/b.gif" alt="" width="159" height="36" border="0"></a></li><li><a href="#c"><img src="img/c.gif" alt="" width="206" height="36" border="0"></a></li><li><a href="#d"><img src="img/d.gif" alt="" width="193" height="36" border="0"></a></li></ul> 参考になれば幸いです。

uuu77uuu
質問者

お礼

やはり、バグなのですか。。 色々な方法を詳しく書いていただいて、どうもありがとうございます！ 今後の参考にさせていただきます！

  • nyaranyu
  • ベストアンサー率100% (1/1)
回答No.1

IE6の仕様と言ってしまえばそこまでですが… 私の場合は指摘されて、どうしてもと言われれば下記のような記述にして逃げています。 ul.pageLink{ margin: 0 -1px 0 0; padding: 0px; list-style: none; width: 766px; } ・ulのwidthを全体の幅（この場合は765px）+1pxにする。 ・右のマージンを-1pxにする。 media="all"に書くこともありますし、media="print"を用意してそこに書くこともありますが、たいていこれで誤魔化しています。 ベストな方法とも思わないので、参照程度にどうぞ…

uuu77uuu
質問者

お礼

やはり、バグのようなものなのですね。。 今回は、画像サイズ自体を少し調整して対応しました。 また、このようなケースがあったら、参考にさせていただきます。 どうもありがとうございました！

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • CSSで画像を横並びに

    CSSで画像を3枚横並びにしたいのですが、 IEで見ると右肩下がりになってしまいます。 詳しくないので、教えていただけると幸いです。 ◆html <ul> <li><img src="images/xx.gif" alt="" width="118" height="189" border="0" class="fleft mgr42 mgl30 mgt10"></a></li> <li><img src="images/xx.gif" alt="" width="118" height="189" border="0" class="fleft mgr42 mgt10"></a></li> <li><img src="images/xx.gif" alt="" width="118" height="189" border="0" class="fleft mgt10"></a></li> </ul> ◆css .fleft { float:left } .mgr42{ margin-right:42px } .mgl30{ margin-left:30px } .mgt10{ margin-top:10px }

    • ベストアンサー
    • CSS
  • IE６だと動かない　マウスオーバーで画像の入れ替え

    以下のように書いてみました。 IE6以外では期待した動作が得られます。 ※imgファイルは適当です。実際に動かす場合は、適当に直して下さい。 <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/> <meta http-equiv='Content-Style-Type' content='text/css'> <style> img{ border: 0px; } #itmImg{ width: 240px; float: left; position: relative; } #itmImg img{ display:block; } #itmImg a span{ display: none; } #itmImg a:hover span{ display:block; position:absolute; top:0; left:0; } #itmImg ul { margin: 0; padding: 0; } #itmImg li{ float:left; list-style:none; } </style> </head> <body> <div id="itmImg"> <img src="hoge1.jpg" width="240" height="240" alt=""> <ul> <li> <a href="javascript:void(0);"> <img src="hoge2.jpg" width="80" height="80" alt=""> <span><img src="hoge2.jpg" width="240" height="240" alt=""></span> </a> </li> <li> <a href="javascript:void(0);"> <img src="hoge3.jpg" width="80" height="80" alt=""> <span><img src="hoge3.jpg" width="240" height="240" alt=""></span> </a> </li> <li> <a href="javascript:void(0);"> <img src="hoge4.jpg" width="80" height="80" alt=""> <span><img src="hoge4.jpg" width="240" height="240" alt=""></span> </a> </li> </ul> </div> </body> </html> IE6でも動くようにするにはどうしたら良いでしょうか？ ご指導の程、宜しくお願いいたします。

    • 締切済み
    • CSS
  • float横並びにしたブロックの中のul/liを縦並びにさせたい

    float leftで横並びさせている中でul/liを縦並びにさせたい。現在はすべて横並びしてしまう。 （html） <div class="base"> <div class="box1"> <a href="#"><img src="#" alt=""></a> </div> <div class="box2"><img src="images/spacer.gif" width="1" height="1" alt=""></div> <div class="box3"> <ul class="list-y"> <li>ああああ</li> <li>いいいい</li> <li>うううう</li> <li>ええええ</li> <li>おおおお<a href="#">かかか</a></li> </ul> </div> </div> （css） ul{ margin: 0; padding: 0; list-style-type: none; text-decoration: none; display: block; } li { margin: 0; padding: 0; display: inline; } .base { width: 618px; height: 100px; margin: 0; padding: 8px 10px 0 10px; text-align: left; line-height: 1.5em; background-image: url(../images/content_bg.gif); background-repeat: repeat-y; } .base .box1 { width: 130px; height: 97px; margin: 0; padding: 0; float: left; outline: solid 2px black; } .base .box2 { width: 2px; height: 100px; margin: 0 5px 0 10px; padding: 0; float: left; border-right: dotted 2px #ccc; } .base .box3 { margin-left: 157px; padding: 0; font-weight: bold; text-align: left; } .list-y{ clear: both; } CSSに疎いのでよろしくお願いいたします。

    • ベストアンサー
    • CSS
  • <a>の中のimgの一部分だけを見せたい

    imgの拡大切り取りを以下の様にしました。 <div style="position: relative; width: 240; height: 240; overflow: hidden;"> <img src="imgA.jpg" style="width: 3600; height: 4800; margin-left: -2936; margin-top: -3272;"> </div> この要領で、<a>の中に入れるjpgを切り取り拡大した物にしたいです。 しかし、<a>の中に<div>を入れるとIEは動作が変になります。 どうしたらよいでしょうか？ 具体的には以下のようなソースでして、 <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/> <meta http-equiv='Content-Style-Type' content='text/css'> <style> img{ border: 0px; } #itmImg{ width: 240px; float: left; position: relative; } #itmImg img{ display:block; } #itmImg a span{ display: none; } #itmImg ul li a:hover{ position: static; } #itmImg a:hover span{ display:block; position:absolute; top:0; left:0; cursor: default; } #itmImg ul { margin: 0; padding: 0; } #itmImg li{ float:left; list-style:none; } </style> </head> <body> <div id="itmImg"> <div style="position: relative; width: 240; height: 240; overflow: hidden;"><img src="imgA.jpg" style="width: 3600; height: 4800; margin-left: -2936; margin-top: -3272;"></div> <ul> <li><a href="javascript:void(0);"><img src="imgB.jpg" width="80" height="80" alt=""><span><img src="imgB.jpg" width="240" height="240" alt=""></span></a></li> <li><a href="javascript:void(0);"><img src="imgC.jpg" width="80" height="80" alt=""><span><img src="imgC.jpg" width="240" height="240" alt=""></span></a></li> <li><a href="javascript:void(0);"><img src="imgD.jpg" width="80" height="80" alt=""><span><img src="imgD.jpg" width="240" height="240" alt=""></span></a></li> </ul> </div> </body> </html> ３つの<li>の中の<a>の中のimgを拡大縮小したいのです。 以上、宜しくお願いいたします。

    • ベストアンサー
    • CSS
  • リストを一行にせずに横並びにする方法

    リストタグを一行にすると横並びにはなりますが、ソースが見ずらいです…。 コメントを使わないで横並びにする方法はありますか？ ■html <ul><!-- --><li><a href="#"><img src="images01.gif" alt="" width="130" height="47" /></a></li><!-- --><li><a href="#"><img src="images02.gif" alt="" width="130" height="47" /></a></li><!-- --></ul> ■css li { display: inline; } ↓のように<!---->をとっても表示を一行にする方法があれば教えてください。 <li><a href="#"><img src="images01.gif" alt="" width="130" height="47" /></a></li> <li><a href="#"><img src="images02.gif" alt="" width="130" height="47" /></a></li>

  • CSSで縦長・横長の写真を一定に並べたい

    写真のギャラリーのようなものを作成しています。 写真のサムネイルが200×150pxのものと150×200pxのものがあり、並びはランダムです。 この写真を正方形の方眼紙に並べるように配置したいと思っています。 テーブルで作成すれば楽なのですが、文書構造的にCSSで行いたいと思っています。 リストでマークアップして、それぞれのli要素を200pxの正方形にしてから、その中央に画像を表示させたいのですが… 縦長の写真はtext-align:center;で処理ができるので、できましたが、横長写真の上下位置が中央になりません。 横長写真が入っているli要素だけに対してクラスを指定すればできそうなのですが、数が多いので、一括で処理できないか、と奮闘しております。 試しにli要素に対してline-heightを200pxで指定し、img要素に対してvertical-alignをmiddleで指定してみたのですが、Firefoxではうまくいくものの、IE（8）でNGでした。 現在のソースは以下の通りです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ギャラリー</title> <style type="text/css"> <!-- #content { width: 612px; } #content ul { margin: 0px; padding: 0px; } #content li { list-style: none; line-height: 200px; float: left; height: 200px; width: 200px; text-align: center; border: 2px solid #009933; } #content li img { vertical-align: middle; } --> </style> </head> <body> <div id="content"> <ul> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> </ul> </div> </body> </html> どなたかお分かりになる方、いらっしゃいましたら、お知恵を拝借できれば幸いです。 よろしくお願い致します。

    • ベストアンサー
    • HTML
  • jqueryのドロップダウンメニュをアメブロに。

    ドロップダウンメニューを 現在、活動しているアメブロに設置したくて jqueryを利用したものがあるのを知り さっそく本を買ってサンプルを見ながら自分なりの手を ほんの少しだけ加えて作ってみたのですが PC上では上手く動作してはいるものの アメブロに設置するとなると禁止タグや htmlなど、制限があるらしく 試行錯誤しても上手くいかず…。 どうしても、ここまでやったからには 設置してみたいとは思いつつも どこに、どのようにすればいいものか 全くわからないので お力を借りたいと思いokwaveに登録してみました。 設置の仕方や、余計な箇所や改善箇所など お分かりになる方 ぜひ、教えてください。 よろしくお願いいたします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>sample2</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("ul.menu li").hover(function(){ $(">ul:not(:animated)",this).slideDown("fast"); }, function(){ $(">ul",this).slideUp("fast"); }); }); </script> <style type="text/css"> *{ margin:0; padding:0; list-style-type:none; } #container{ margin:100px auto; width:800px; } ul.menu li{ float:left; width:200px; height:40px; background:url("画像URL1"); position:relative; } * html ul.menu li{ display:inline; zoom:1; } *+html ul.menu li{ display:inline; zoom:1; } ul.menu li a{ display:block; width:100%; height:100%; line-height:40px; text-indent:30px; font-weight:bold; text-decoration:none; position:relative; } ul.menu li a:hover{ background:url("画像URL2"); } ul.sub{ display:none; } * html ul.sub{ zoom:1; position:relative; } *+html ul.sub{ zoom:1; position:relative; } ul.sub li{ float:none; } ul.sub li ul.sub{ position:absolute; left:200px; top:0; } ul.menu{ zoom:1; } ul.menu:after { height:0; visibility:hidden; content:"."; display:block; clear:both; } </style> </head> <body> <div id="container"> <ul class="menu"> <li><a href="#"><img src="画像URL3" align="left" width="200" height="40 "border="0"></a> </li> <li><a href="#"><img src="画像URL4" align="left" width="200" height="40 "border="0"></a> <ul class="sub"> <li><a href="#"><img src="画像URL5" align="left" width="200" height="40 "border="0"></a></li> <li><a href="#"><img src="画像URL6" align="left" width="200" height="40 "border="0"></a></li> <li><a href="#"><img src="画像URL7" align="left" width="200" height="40 "border="0"></a></li> </ul> </li> <li><a href="#"><img src="画像URL8" align="left" width="200" height="40 "border="0"></a> <ul class="sub"> <li><a href="#"><img src="画像URL9" align="left" width="200" height="40 "border="0"></a></li> <li><a href="#"><img src="画像URL10" align="left" width="200" height="40 "border="0"></a> <ul class="sub"> <li><a href="#"><img src="画像URL11" align="left" width="200" height="40 "border="0"></a></li> <li><a href="#"><img src="画像URL12" align="left" width="200" height="40 "border="0"></a></li> ・ ・ ・ ・　字数制限があるので省略します…。 ・ ・ ・ ・ </ul> </div> </body> </html> 　 ※　 もっと簡潔なやり方があるとは思うのですが 　　　無い知恵を振り絞った結果で 　　　画像３～は 　　　オリジナルのフォントを使いたいが為に 　　　透過の画像でオリジナルフォントを 　　 メニュ背景画像の上に使っています。

  • css 背景画像（1つ）とリンク付き画像（複数）を中心に表示したい。（

    css 背景画像（1つ）とリンク付き画像（複数）を中心に表示したい。（超初心者です。） 現在、Kompozerをつかってホームページを作成しています。 添付画像のような配置にしたいので、いろいろなサイトを参照したのですがどうしてもうまくいきません。 現在のソースは以下のようになっており、ブラウザで表示すると背景画像が表示されません。 あまりにも知識がなく、不快な思いをさせてしまったら申し訳ございません。 ご指導いただければうれしいです。 よろしくお願いします。 ＊ソース <html><head> <meta content="text/html; charset=Shift_JIS" http-equiv="content-type"> <title>ページタイトル</title> <style type="text/css"> </style> </head><body> <div style="text-align: center;" background-image:="" url ＊＊.jpg ;width:450px;height:450px;=""><br> <br> <img style="width: 137px; height: 137px;" alt="" src="＊＊.gif" border="0"><br> <br><p style="text-align: center;"> <a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><img style="width: 92px; height: 230px;" alt="" src="＊＊.jpg"><a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><br></p> </div> </body></html>

    • ベストアンサー
    • HTML
  • CSSでfloat指定した画像に隙間

    floatの指定をすると並べた画像に隙間ができます。 div aで外を囲み、幅を400px固定し、 その中にli(幅200px）を放り込んでいます。 （幅400pxの入れ物に200pxの小箱を2列に並べていく） 画像をfloatさせなければ隙間は出ないのですが、下記cssのようにfloatさせると幅400pxにIEだけ収まりません。 WinXP・irefox1.0やOpera7.5では意図通り表示されます。。 どなたか解決策お持ちの方よろしくおねがいします。 <html> <head> <title></title> <style type="text/css"> <!-- #a{ width:400px; margin: 0 auto; padding:0; } li{ width:200px; padding:0; list-style:none; float:right; display: inline; } img{ border:none; margin:0; padding:0; vertical-align:top; float:left;　←これの有無で不具合 } --> </style> </head> <body> <div id="a"> <dl> <li> <img src="xxx.jpg" width="150" height="200" /><img src="xxx.jpg" width="50" height="100" /><img src="xxx.jpg" width="50" height="100" /></li> <li> <img src="xxx.jpg" width="150" height="200" /><img src="xxx.jpg" width="50" height="200" /></li> </dl> </body> </html>

    • ベストアンサー
    • HTML
  • CSSのリストタグについて

    下記のソースのようにリストタグに画像を並べます。 ここまではいいのですが、firefoxなどブラウ上で文字サイズを大きくすると画像の上下に余白が出来てしまうのは何ででしょうか。。 <ul> <li><a href="/"><img src="/" width="125" height="50" alt="" title="" /></a></li> <li><a href="/"><img src="/" width="125" height="50" alt="" title="" /></a></li> <li><a href="/"><img src="/" width="125" height="50" alt="" title="" /></a></li> <li><a href="/"><img src="/" width="125" height="50" alt="" title="" /></a></li> <li><a href="/"><img src="/" width="125" height="50" alt="" title="" /></a></li> </ul> あるサイトのソースを見るとliタグににfont-size:1px;を指定されていました。コレでも解決するのですがこのやり方は良いのでしょうかね。。 質問の内容がわかりにくい時は「わかりにくい！」と言ってください。。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する