IE6での表示がおかしい問題の解決方法
- IE6での表示がおかしい問題について添付写真を使用して詳しく説明します。
- IE6での表示がおかしい問題は、特定のタグの記述方法が原因で発生します。
- IE6で正しく表示させるためには、必要なタグの設定を正しく行う必要があります。
- ベストアンサー
IE6だと表示がおかしく表示される。
添付写真の上がIE9での表示で、下はIE6(IETesterで表示)ですが。 殆んど同じ記述で「写真」の無いページは、正しく表示しています。 必要と思われるタグは、下記の内容です。なお親ホントは100%です。 <div style="width:32%;float:left;"><img src="省略></a></div> <div style="width:59%;float:left;"><img src="省略"></a></div> <div style="font:1em/2.8em 'ＭＳ 明朝',serif;width:27.9em;float:clear:both;"> <div style="margin-left:9.52em;font-weight:bold;clear:both;">九月十八日</div> <div style="clear:both;width:27.9em;"> <div style="width:11.63em;font:1em/2.8em 'ＭＳ 明朝',serif;float:left;">省略</div> <div style="width:5.81em;font:1em/1.4em 'ＭＳ 明朝',serif;float:left;">省略</div> <div style="width:10.34em;font:1em/2.8em 'ＭＳ 明朝',serif;float:left;">省略</div> 省略 </div> <div style="font:1em/2.8em 'ＭＳ 明朝',serif;width:27.9em;float:"> <div style="clear:both;width:27.9em;"> <div style="width:11.63em;font:1em/2.8em 'ＭＳ 明朝',serif;float:left;margin-top:1.5em;">省略</div> <div style="width:5.81em;font:1em/1.4em 'ＭＳ 明朝',serif;float:left;margin-top:1.5em;">省略</div> <div style="width:10.34em;font:1em/2.8em 'ＭＳ 明朝',serif;float:left;margin-top:1.5em;">省略</div> 省略 </div> 誤り内容を教えて下さい。 http://ryuso.info/test/ryu180_250.htm
- k0021
- お礼率89% (33/37)
- CSS
- 回答数6
- ありがとう数6
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
なお、IE6のブロックに対するバグは、 CSSレイアウトの定石 WinIE6バグ回避法 ( http://mb.blog7.fc2.com/blog-entry-83.html ) にまとめられています。
その他の回答 (5)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
個人的な意見ですが、そこまで、文書構造を無視して見栄えにこだわるならPDFをお勧めします。 ただ、tableであっても、表の方向は指定できます。 縦書き表記(writing-mode:tb-rl;)は、どうもCSS3でも導入されない可能性があります。IE依存 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- table.kenti{ ＿font-family:'ＭＳ 明朝',serif; ＿font-size:16px; ＿border-collapse: collapse; ＿border:none; ＿padding:2px; } table.kenti td{ ＿width:1em; ＿vertical-align:top; } table.kenti caption{caption-side:right;font-weight:bold;} table.kenti td{padding:0.5ex 0.1em;border:none;} table.kenti td[colspan="2"]{padding:0.5ex 1em;} table.kenti td.ta small{font-size:12px;font-weight:bold;} --> ＿</style> </head> <body> ＿<h1>サンプル</h1> ＿<table summary="データ" border="1" class="kenti column6" dir="RTL"> ＿＿<caption>九月十八日</caption> ＿＿<tbody> ＿＿＿<tr> ＿＿＿＿<td class="ta" width="1" valign="top"><small>北の番</small></td> ＿＿＿＿<td>上田三反三畝二十七歩</td> ＿＿＿＿<td class="ta" width="1"><small>関所</small></td> ＿＿＿＿<td>上田一畝八歩</td> ＿＿＿＿<td class="ta" width="1"><small>関所</small></td> ＿＿＿＿<td>上田一畝八歩</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td width="1">五拾六間</td> ＿＿＿＿<td width="1">十八間壱尺</td> ＿＿＿＿<td width="1">弐拾六間</td> ＿＿＿＿<td width="1">十三間</td> ＿＿＿＿<td width="1">弐拾六間</td> ＿＿＿＿<td width="1">>十三間</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td colspan="2" width="2">六郎左衛門</td> ＿＿＿＿<td colspan="2" width="2">同人</td> ＿＿＿＿<td colspan="2" width="2">同人</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td colspan="2" width="2">下畑壱歩</td> ＿＿＿＿<td colspan="2" width="2">下畑壱歩</td> ＿＿＿＿<td colspan="2" width="2">下畑壱歩</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td width="1">弐間</td> ＿＿＿＿<td width="1">三尺</td> ＿＿＿＿<td width="1">三間</td> ＿＿＿＿<td width="1">三尺</td> ＿＿＿＿<td width="1">三間</td> ＿＿＿＿<td width="1">三尺</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td colspan="2" width="2">小左衛門</td> ＿＿＿＿<td colspan="2" width="2">仁左衛門</td> ＿＿＿＿<td colspan="2" width="2">仁左衛門</td> ＿＿＿</tr> ＿＿</tbody> ＿</table> </body> </html>
お礼
再度回答ありがとうございます 私も難し過ぎてテーブルで作成しましたが。 Microsoft Internet Explorer 6 では、横書きの解読 をクリックして 表示されたら 戻る をクリックしたら 表示画面がおかしく表示され、コントロールフレームの「縦書きの解読」をクリックすると正常に表示しますが。「Microsoft Internet Explorer 7 では、その現象は、出ませんが。(２ページ以降は、印刷プレビューでは、表示されませんが) 」 上記内容でテーブルは使用を中止しましたが。
- tracer
- ベストアンサー率41% (255/621)
IE6対応の技術は十分に枯れているので、少なくとも例のURLの内容を先進ブラウザとレガシーブラウザで同等に表示させることは可能です。ただ、私だけかもしれませんが、何がどのようにずれているのか分かりません。正直に申し上げると、どのブラウザで見てもなんかいろいろズレているように見えます。なんというか目標が見えない感じです。明確に何がどのようにズレていると示されれば分かりやすいのですが。。 ただ、一見したところ、明らかな表なので、素直にtableで組んだほうがいろいろスマートで簡単ですよ。 前の回答へのコメントで段組を理由にtableが使えないとありましたが、そういう理由ならば、段組の方法自体に問題があるはずです。 表じゃないのにtableを使うのは確かに文法に反しますが、表なのにtableを使わないのは、同じ観点でおかしいですよ。
お礼
回答ありがとうございます 対象ページは、７ページ有りまして 古文書に似せた横書きです ７ページ内で一番簡単な内容です。 他ページは、段組無し・２個の段組・３個の段組・４個の段組で作成も有ります。 ＞表なのにtableを使わないのは、同じ観点でおかしいですよ。 縦書きに変更する元ですのでtableでは、作成できません。 まわしこみ解除の誤りでした。 <div style="clear:both;width:100%;">を追加したらうまくいきました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
Another HTML-lint gatewayの使い方が？？？ ここのHTMLバージョンで指定するのは、そのブラウザ専用のページを作成するときに使用します。そこをチェックして強制的にそのDOCUMENT TYPEでチェックすると、エラーが出るのは当然です。 ３列で表示する場合は、マークアップさえ、それがわかるように出来ていれば指定できるはずです。それが別の表になるのか、 <table class="column3"> </table> <table class="column6"> </table> 行になるか <table> <tr class="column3"> </tr> <tr class="column6"> </tr> でclass名のつけ方を工夫します。 IE7,8,9,10、firefox、opera、safari、chromeなど、他のブラウザ(IE6以外)を一切無視してよいなら、IE6専用でデザインしてください。 私の示した方法は、あくまでHTML4.01strict・・ウェブ標準でありながら、IE7以前の陳腐なレガシーなブラウザに対応させる方法ですので、ご希望のものと違うかもしれません。
お礼
再度回答ありがとうございます 対象ページは、７ページ有りまして 古文書に似せた横書きです 段組無し・２個の段組・３個の段組・４個の段組で作成ですので下記の指定かな 最後のページは、<col span="1" style="width:2.05em;"><col style="width:9em;"><col style="width:2em;"> <col style="width:6em;"><col style="width:11em;"> の指定になると思います。 私の指定でしたら下記方法で指定しますが。 <style type="text/css"> <!-- body {font:100%/150% "ＭＳ 明朝",serif;} td {font:1em/150% "ＭＳ 明朝",serif;} --></style> 省略 <div style="clear:both;width:100%;"><div style="margin-left:2em;"> <div style="width:27.9em;float:left;"> <table summary="データ"> <col style="width:11.63em;"><col style="width:6em;"><col style="width:11em;"><tbody> <tr><td colspan="2"><div style="margin-left:9.52em;font-weight:bold;">九月十八日</div></td> 省略 </tbody> </table></div> <div style="width:27.9em;float:left;"> <table summary="データ"> <col style="width:11.63em;"><col style="width:6em;"><col style="width:11em;"><tbody> <tr><td>省略 </tbody> </table></div></div> あまりテーブルを使用していません間違えているかも Another HTML-lint gatewayやカスケーディングスタイルシート(CSS)でチェックしていますがエラーは、有りますが、表示上問題の無い項目は無視しています。 エラーの中には、指定しないと表示上問題が発生する項目も有りますが。 <link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >は、減点ゼロエラーですが ホームページ内に個人情報を記述すること抵抗を感じますので記述しません。 ＞HTML4.01strictであるべきで、4.01仕様書でも「HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 HTML4.01strictの場合 IE7では正常にされますが IE8・IE9 おかしく表示しますので使用できない項目も有りますので移行タイプも使用しています。 ホームページ内は、ORUKA1951さんの見たことの無いページも有ると思いますが。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
検地データですかね。 ・・少し長いですが、リンク先も合わせてよくお読みください。 ＞そもそもtableの作成は罫線で作成表で使用だけで無いですか いいえ、「HTML表モデルにより、著者は、テキスト、整形済みテキスト、画像、リンク、フォーム、フォームのフィールド、別の表などのデータを、コマの行と列とに配置することができる。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )」 示されたデータは、明らかにテキストや画像を含むデーターを行・列を使って並べたものですから「表」にすべきです。「罫線で・・」というプレゼンテーションに関わる部分はHTMLでは考えてなりません。 (一度仕様書をざっとでよいので目を通して置かれることを勧めます) 「表であるものを表にしない」は、「表でないものを表を使ってデザインしてはならない」と言われているのとまったく同じです。 ＞table summaryは、Another HTML-lint gatewayでのIE5.5のチェックでは減点エラーですが tableにおけるsummary属性は、Another HTML Lintでは「<TABLE> には SUMMARY 属性を指定するようにしましょう。( http://openlab.ring.gr.jp/k16/htmllint/explain.html#table-summary )」となるはずです。 ★現在、各ベンダーがウェブ標準とみなしている仕様はHTML4.01とCSS2.1です。特にHTML4.01strictであるべきで、4.01仕様書でも「HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )」 ＞small指定ですがブラウザにより文字の大きさ異なります ＞そもそもtableの作成は罫線で作成表で使用だけで無いですか ★まさにそれこそ、スタイルシートで指定すべきです。★ ウェブ標準とは程遠いIE6の2011年の日本におけるシェアは2.51%に過ぎません。マイクロソフト自身も「「IE6は9年前の腐った牛乳」 ( http://www.itmedia.co.jp/news/articles/1005/17/news033.html )」と言っているくらいのものを考慮する必要はないとは思います。 とは言っても可能な限り著者はすべてのユーザーエージェントへの対応を考慮すべきです。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［2.2.1 HTMLの略歴( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より どうしても製作したとおりに見せたいなら、そのためのPDFと言う仕様があります。 下記サンプルは、HTML4.01strict+CSS2.1のウェブ標準ですが、IE5～IE10できちんと表示されるはずです。IEだけじゃなくスタイルシートを読まないブラウザや点字端末でも・・ ★Another HTML-lint gateway( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★The W3C Markup Validation Service( http://validator.w3.org/#validate_by_input ) で検証済みです。【確認してください。】 ★なお、タブは＿に置換してありますからタブに戻してください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- table.kenti{ ＿font-family:'ＭＳ 明朝',serif; ＿font-size:16px; ＿border-collapse: collapse; ＿border:none; ＿padding:2px; } table.kenti caption{text-align:left;font-weight:bold;} table.kenti tr,table.kenti td{border:none;} table.kenti td{padding:0.5ex 0.5em;} table.kenti td.ta small{font-size:12px;font-weight:bold;} table.column6 td{width:6em;} table.column6 td.ta{width:12em;} table.column6 td.ha{width:11em;} --> ＿</style> </head> <body> ＿<h1>サンプル</h1> ＿<table summary="データ" border="1" class="kenti column6"> ＿＿<caption>九月十八日</caption> ＿＿<tbody> ＿＿＿<tr> ＿＿＿＿<td class="ta"><small>北の番</small><br>上田三反三畝二十七歩</td> ＿＿＿＿<td class="ha">五拾六間<br>十八間壱尺</td> ＿＿＿＿<td>六郎左衛門</td> ＿＿＿＿<td class="ta">下畑壱歩</td> ＿＿＿＿<td class="ha">弐間<br>三尺</td> ＿＿＿＿<td>小左衛門</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td class="ta"><small>関所</small><br>上田一畝八歩</td> ＿＿＿＿<td class="ha">弐拾六間<br>十三間</td> ＿＿＿＿<td>同人</td> ＿＿＿＿<td class="ta">下畑壱歩</td> ＿＿＿＿<td class="ha">三間<br>三尺</td> ＿＿＿＿<td>仁左衛門</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td class="ta"><small>関所</small><br>上田一畝八歩</td> ＿＿＿＿<td class="ha">弐拾六間<br>十三間</td> ＿＿＿＿<td>同人</td> ＿＿＿＿<td class="ta">下畑壱歩</td> ＿＿＿＿<td class="ha">三間<br>三尺</td> ＿＿＿＿<td>仁左衛門</td> ＿＿＿</tr> ＿＿</tbody> ＿</table> </body> </html>
お礼
table summaryは、Another HTML-lint gatewayでのIE5.5のチェックでは減点エラーですが 実際にIE5.5のチェックして見てから回答下さい。 なお<html lang="ja">は、<html>で指定しないと減点エラーです。 ６個の段組で作成されていますが用途により３個の段組の表示使用していますのでtableの使用は考えていません。 横書きのmargin-topをmargin-leftに変更、margin-bottomをmargin-rightに変更、margin-leftをmargin-topに変更 、width:をheight:に変更して縦書きに変更の元しますので別の回答下さい。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
典型的なtableなのでtableでマークアップしましょう。--tableは、縦横に多くの項目が整列している情報をマークアップするのに最適な方法です。tableが否定されるのは、本来「表でないものを表で配置する」事が否定されるのです。 「問題を起こすことがあるため、単に文書内容を整形する目的だけで表を用いるべきでない。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )」 「ページレイアウトの目的で表を用いる。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )」 どうどうと表でマークアップしましょう。 <table summary="**の一覧"> <tbody> <tr> <td><small>北の番</small>上田三反三畝二十七歩</td> <td>・・・ なお、tableでマークアップすべきでないデータにしても、たとえば <ul> <li><small>北の番</small>上田三反三畝二十七歩 <ul> <li class="size1">五十六間<br>十八間一尺</li> <li class="owner">六郎左衛門</li> <li class="size2">弐間<br>三尺</li> <li class="name">小左衛門</li> </ul> ・・・とかのマークアップ以上になることはないでしょう。<div>は(汎用)ブロックをマークアップするものですが、この場合「北の番」から「小左衛門」までは関連したひとつのデータですからblockで囲むのはおかしいです。Lynx などのテキスト ブラウザを使用して、サイトを確認 ( http://www.google.com/support/webmasters/bin/answer.py?answer=35769&hl=jp#2 )すると、間違いなのがわかるでしょう。 </li>
お礼
回答ありがとうございます。 small指定ですがブラウザにより文字の大きさ異なりますが table summaryは、Another HTML-lint gatewayでのIE5.5のチェックでは減点エラーですが 内容は、６個の段組で作成されていますが、使用用途により３個の段組でも使用していますのでtableでの作成できません。 そもそもtableの作成は罫線で作成表で使用だけで無いですか 一番回答可能の内容ですがこのよな回答ですか
関連するQ&A
- IEの場合フレームは、表示サイズにより表示が異なる
IE9の場合、対象古文書を対象ページを参照した場合と フレーム分割で参照した場合 画像解像度８００で見た場合表示が異なります。 なをIE8では、正常に表示されます。 添付写真は、上が対象古文書を対象ページを参照した場合 下がフレーム分割で参照した場合 参考に古文書を対象ページを参照 http://ryuso.info/r/r020_033.htm フレーム分割で参照 http://ryuso.info/r/r020u.htm ＭＡＣブラザーでもルビ（ふりがな）を表示できるか 段組で 作成して見ました ソースの内容 <div style="margin-left:14em;width:12em;float:left;"> <div style="font:0.71em/100% 'ＭＳ 明朝',serif;">あさばた</div></div> <div style="width:4em;float:left;"><div style="font:0.71em/100% 'ＭＳ 明朝',serif;">ほう</div></div> <div style="width:2em;float:left;"> <div style="font:0.71em/100% 'ＭＳ 明朝',serif;">たた</div></div> <div style="clear:both;"> 龍爪山の南の麓に御池あり。浅 畑 の池と名付けたり。方一里に余り、水たんたん湛え、底深く、あたかも湖水に異ならず。</div> わりにくい質問ですが上記のように表示されて困っていますが 老化予防にホームページ勉強していますがお分かりの方教えて下さい。
- 締切済み
- CSS
- 同じ内容をフレーム分割と対象ページで異なる
ルビーもFirefoxでも表示しようと作成しましたがＩＥ９で下記の写真のように表示されました。 下の写真は、左側がフレーム分割の表示 右側が対象ページの内容です。 なおＭＡＣブラザーでも縦書きは、ＩＥ6のみ 1文書を除いて問題なく表示していますが。 ソース <div style="margin-left:9em;"><div style="margin-bottom:-0.6em;font-size:0.71em;">うえ</div></div> <div style="width:9.2em;float:left;margin-top:0.4em;">１駿州庵原之郡樽野</div><div style="width:1.2em;float:left;margin-top:0.4em;">上</div><div style="width:25em;float:left;vertical-align:top;">村武田甚右<sup>衛</sup>門子ニ、兄に左次右衛門</div></div> <div style="width:57em;clear:both;margin-top:0.4em;"><div style="margin-left:7em;width:9em;float:left;vertical-align:top;">額</div><div style="width:6em;float:left;vertical-align:top;"><div style="font-size:0.71em;">おなじく</div></div><div style="width:7em;float:left;vertical-align:top;">房</div></div> <div style="width:57em;clear:both;"> て、しゝのひたゐしろく、せすじ 同 <a href="javascript:gk_c1('t-03');">しゝふさ</a>のことく成</div> お分かりの方いましたら教えて下さい。 フレーム分割ページ http://ryuso.info/h/h002e5m.htm 対象ページ http://ryuso.info/h/heng2da.htm
- 締切済み
- CSS
- 超段組で作成の文字ずれの対応
文字サイズを大にすると下記写真の表示されますが何か対策がありますか。 写真の上が文字サイズを大です。下が文字サイズを中です。 .up {font-size:0.82em;vertical-align:super;} .wmx {width:57em;clear:both;} .s05 {margin-left:5em;} .l03 {width:3em;float:left;} .l08 {width:8em;float:left;} .l18 {width:18em;float:left;} .l20 {width:20em;float:left;} .s009 {margin-left:0.9em;} .rz {font:0.9em/110% "ＭＳ 明朝",serif;letter-spacing:0.1em;} .m_f {margin-top:0.3em;} .rt {font:0.71em/100% "ＭＳ 明朝",serif;} .c_b {clear:both;} .mtf {margin-top:0.2em;} <div class="wmx"> 駿州庵原郡樽の上村、武田甚右エ門の子に、兄に左次右エ門、弟に権兵衛といふ者あり、かの権兵衛２５の年、<span class="up">(今より)</span>３ <div class="s05 l18"><div class="s009 rz">辛 未</div></div><div class="s009 l08"><div class="rz">狩り</div></div></div><div class="l20"><div class="m_f rt">けんぞくかえ</div></div><div class="l03"><div class="m_f rt">しし</div></div> <div class="c_b">０年以前、かのとひつじの年正月１７日に、竜爪山に殺生に出て、我が眷 属 鹿のしし１６匹連れて遊びゐる中に、鹿の額白く</div> <div class="c_b"><div class="mtf">背筋同じく白房の如くなるを、<span class="up">(彼の者が)</span>鉄砲にて撃ちとむる。それによって我、彼の者に乗り移る。<span class="up">(その結果彼の者は)</span>言葉乱</div> 超段組で作成の文字ずれの対応方法を教えて下さい http://ryuso.info/rk/rk275_277.htm
- 締切済み
- CSS
- ieとfirefoxでdiv枠に２pxのズレ
宜しくお願い致します。 現在下記のHTMLを作成致しましたが、CSSにてfirefoxとchomeに合わせると ieではdiv枠が2px程左右にズレが生じてしまいます。ieに合わせると逆の現象が生じます。 何が原因なのか判りません。宜しくご教示下さい。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <style type="text/css"> .clear {clear:both; } .clear hr {display:none;height:0px;font-size:0pt; } #wrap {width:810px; text-align:center; margin:0px auto;} #header{font-size:70%;color:green;margin-top:5px;text-align:center;} #menu {width:200px;height:auto; float:left;margin:0;position: relative;} #goods {width:600px;height:auto; float:right;margin:0;position: relative;} #top-title { width:200px;height:70px; float:left; margin-bottom: 10px;background-color:#ffffee; border:solid 1px #336600;position: relative;} #top-menu { width:600px;height:70px; float:right; margin-bottom: 10px;background-color:#ffffee; border:solid 1px #336600;position: relative;} /* position: relative削除したり widthの値を%にしたり色々試してみましたが??? */ .col_01_l{width:295px;height:310px;position: relative; float:left; margin-bottom: 5px;background-color:#ffffee;border:solid 1px #336600;} .col_01_r{width:295px;height:310px;position: relative; float:right;margin-bottom: 5px;background-color:#ffffee;border:solid 1px #336600;} .col_05 {width:200px;height:auto; float:left; margin-bottom: 8px;background-color:#ffffee; border:solid 1px #336600;} .col_06a {width:600px;height:auto; float:right; margin-bottom: 10px;background-color:#ffffee; border:solid 1px #000000;position: relative;} </style> </head> <body> <div id="wrap"> <div id="header"> </div><!-- /header --> <div id="goods"> <div id="top-menu"> </div><!-- /top-menu --> <br style="clear:both;"> <div class="col_06a"> <br><br> </div> <br style="clear:both;"> <div class="col_01_l"> <p>ブラウザieではずれませんが、 chrome、firefoxで、この枠が 右に２pxにずれる。 どのように直せば良いか具体的にご教示下さい。</p> </div> <div class="col_01_r"> <br> </div> <br style="clear:both;"> </div><!-- /goods --> <!-- ################################################################################## --> <div id="menu"> <div id="top-title"> <br> </div> <br style="clear:both;"> <div class="col_05"> <br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br> </div><!-- /col_05 --> <br style="clear:both;"> </div><!-- /menu --> <br style="clear:both;"> <!-- ################################################################################## --> </div><!-- /wrap --> </body> </html>
- ベストアンサー
- CSS
- css 各divの内容を上に揃えたいです。
こんにちは、初心者です。宜しくお願いします。 <main>の右は<side2>ですが、mainの画像BBBの真横に、side2の内容が表示されず、真横ではなくて、BBBのやや斜め右下に表示されるんです。 全体を中央揃えにしてから、このような問題にぶつかりました。 mainとside2の内容を上先頭で揃え、ブラウザの大きさを変えても中央を基準に内容も動くようにしたいです。 ご教授のほど、よろしくお願い致します。 ---------------------------------------------- <html> <head> <title>○○</title> <link href="design/shop_index02.css" rel="stylesheet" type="text/css"> </head> <body> <div class="contents"> <div class="top"> <h1>○○</h1> <h2> ○○</h2> </div> <div class="middle"> <a href="○○"> <img src="../img/logo.gif"></a> </div> <div class="main"> <a href="●●"> <img src="BBB"></a> </div> <div class="side2"> <a href="●●"> <img src="●●.gif"></a> <h3>●●</h3> <p>●●</p> </div> </div> </body> </html> ---------------------------------------------- /*ページのレイアウト用css*/ body{ margin:0px; padding:0px; background-color:#BDB76B; text-align:center; } body a img{ border: none; } .contents{ width:900px; height : 2700px; background-image:url(○○); margin:auto; text-align:left; clear:both; } h1{ color:#c0c0c0; font-size:12px; text-align:center; font-family:"ＭＳ 明朝"; } h2{ font-size:10px; font-family:"MS P明朝","細明朝",serif; color:#c0c0c0; margin-left:8px; } h2 a{ font-family:"MS ゴシック","osaka,sans-serif"; font-size:10px; color:#CC6600; } h3{ font-size:13px; font-family:"MS P明朝","細明朝",serif; color:#669900; } h3 img{ margin-left:720px; } .top{ width:900px; height:170px; margin-left:80px; } .middle{ width:900px; height:170px; margin-left:100px; color:#999999; margin-top:40px; } .main { width:700px; margin-top:60px; margin-left:80px; float:left; } .side2{ width:200px; margin-top:60px; margin-left:700px; } .side2 p{ color: #999999; font-family:"MS P明朝","細明朝",serif; font-size:10px; width:160px; text-align:left; } .side2 a{ color:#CC6600; text-decoration:none; }
- ベストアンサー
- HTML
- google画像検索のように画像を表示させたい
http://oshiete1.goo.ne.jp/qa4869855.html で質問した者です。 「googleのように 画像」で検索したところ http://okwave.jp/qa4567914.html このページがHITしました。 そこでNo3の方のソースを元に画像を表示させてみました。 ---ここから--- <style type="text/css"> <!-- p{ text-indent: 1em;} body>h1,body>h2{ text-align:center;} p.abstract{ margin-left: 20%; margin-right: 20%;} div.ImageList{ position: relative; margin-left:20%;margin-right:10%;width: auto; border: solid 2px blue;} div.ImageList ol{ display:block; margin:0px; padding:0px;} div.ImageList>ol>li{display: block; margin: 2px;padding:0px;border:solid 1px gray; width:160px;height: 100px;float:left;text-align:center;} div.ImageList>ol>li>ol>li{display:block;font-size:0.8em;text-align:left;padding:0.2em;text-indent:1em;} div.ImageList hr{ clear:both;visibility:hidden;} div.ImageList div{ position: absolute; width: 21%; left: -23%;top: 0px;font-size:0.9em} --> </style> ---ここまで--- このスタイルシートについてなのですが、 画像のまわりについている黒の薄い線と、大きな青い線を消すことは出来ないでしょうか？ この二つの枠線を消してもっと画像どうしをギュッと詰め込みたいのです。 どの部分を削れば削除することが出来ますか？
- ベストアンサー
- HTML
- 古いIEでレイアウト崩れます。
webデザイン初心者です。 就職活動用にサイトを制作しました。講習などで、IEではレイアウト崩れがおきやすい などのざっくりと知識はありますが、実際それを実践に生かせません。 サイトを構築した結果、やはりIE5.5,ＩＥ6、IE7でレイアウト崩れが起きます。 Ｃｌｅａｒｆｉｘというものや、Floatでバグが起きるなど「そういうことがあるんだ」くらいの知識だけがあって、それを自分の作成したサイトにどう反映させてゆけばいいのか分かりません。 とりあえず、今回制作したサイトをすべてのOSで表示できるようにしたいので、 具体的に、どのソースをどう直せばよいか教えてください。 USOマーケティング会社 http://usomarketingcompany.web.fc2.com/ ｃｓｓは @charset "utf-8"; body{ width:760px; margin:auto; } #page{ margin-top:0; font-size:14px; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; width: 100%; background:#ffffff; height: 100%; min-height: 100%; } hr{ width:100%; height:10px; background-color:#9f1d22; margin:0; } /* ヘッダーの設定 */ h1{ margin-top:10px; margin-bottom:10px; margin-left:32px; margin-right:86px; float:left; } .tel{ margin-top:10px; margin-right:32px; } #navi{ clear:left; margin:0; text-align:center; } #header{ margin-bottom:10px; } /* メイン画像の設定 */ h2{ margin-bottom:20px; } /* プレスリリースの設定 */ #contents{ width:457px; float:left; margin-right:20px; padding-bottom: 50px; } h3{ margin-left:32px; } dl { width:425px; } dt { float:left; width:100px; padding:5px 0 5px 10px; clear:both; font-weight:bold; margin-left:32px; } dd { width:315px; margin-left:130px; padding:5px 5px 5px 10px; } .sample{ margin-top:10px; margin-left:32px; } /* 右下バナーの設定 */ .section{ margin-right:32px; } div .section p{ margin-bottom:5px; } /* フッダーの設定 */ #footer{ clear:both; width:760px; color:#ffffff; background-color:#9f1d22; height:25px; bottom:0; text-align:center; } #footer p{ font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; line-height:20px; font-size:12pt; } また制作時に、このようなことにならないよう極力気をつけなければならないことなど、 アドバイスいただけたら幸いです。よろしくお願いします。 webデザイナーとして頑張ってゆきたいと思っています。 どうぞよろしくお願いします。
- 締切済み
- デザイナー・クリエイティブ職
- IE6のレイアウト崩れ
お世話になります。 下記の内容でレイアウトをしております。 firefox3.08ではほぼ思い通りですが、 IE6では、menuがmainの左下に入り込んでしまい、 mainが真ん中より少し左にずれてしまうのです。 解決策を教えてください。 情報が足らないようでしたら、ご連絡下さい、宜しくお願い致します。 body { font-size : medium; } div#container { width : 730px; } div#header { font-size : 12px; width : 725px; } div#navi { width : 725px; clear : both; font-size : 12px; } .topicpath{ clear : both; width : 725px; margin : 3px 0 3px 0; } div#main{ float : right; width : 540px; } div#menu{ float : left; width : 170px; font-size : 12px; } div#footer { width : 725px; clear : both; font-size : 75%; } <div id="container"> <div id="header"> </div> <div id="navi"> </div> <div class="topicpath"> </div> <div id="main"> </div> <div id="menu"> </div> <div id="footer"> </div> </div>
- ベストアンサー
- HTML
- 背景色が表示されない＞＜
下記のように設定していますが、背景色が表示されません。 解決方はありますでしょうか？ 【html】 <div id="header"> <div id="h_contents"> <div id="h_left_pr"> ｄｄｄx </div><!-- h_left_pr --> <div id="h_wrapper"> <div id="right_top_area"> テキストリンクエリア </div><!-- right_top_area --> <div id="h_main_box"> <div id="h_main_left"> ロゴエリア </div><!-- h_main_left --> <div id="h_main_right"> <div id="h_search_area"> サーチエリア </div><!-- h_search_area --> <div id="h_map_area"> マップエリア </div><!-- h_map_area --> </div><!-- h_main_right --> </div><!-- h_main_box --> </div><!-- h_wrapper --> </div><!-- h_contents --> <div style="clear:both "></div> </div><!-- header --> 【css】 #header{ width:100%; background-color:black; } #h_contents{ width:1240px; margin:0 auto; } #h_left_pr{ float:left; width:120px; background-color:red; } #h_wrapper{ float:right; width:1000px; margin:0 120px 0 0; padding:0; background-color:blue; } #h_wrapper{ >margin:0 60px 0 0; } #right_top_area{ clear:both; float:right; background-color:green; width:350px; } #h_main_box{ clear:both; background-color:yellow; } #h_main_left{ float:left; width:200px; background-color:purple; } #h_main_right{ float:right; width:800px; background-color:orange; } #h_search_area{ clear:both; float:left; width:500px; background-color:gray; } #h_map_area{ float:right; width:300px; background-color:darkblue; }
- ベストアンサー
- HTML
- CSSとHTMLのページ。IEとFirefoxでデザインが崩れてしまいます；；
Firefoxだと、右上のフォーム部分がバナーの隣に来るのですが IEだとなぜかフォーム部分が下に来てしまいます。原因と対処法を教えてください。 FirefoxはCSSに厳格だと聞いたのですが、IEが曖昧なためになってしまったのでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"><head> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <link rel=stylesheet type="text/css" href="1.css"> <link rel="shortcut icon" href="favicon.ico"> <title>aaaaa</title> </head> <body> <div class="box"> <div class="top1"> <img src="aaa.jpg" width="468" height="60" alt="バナー"> </div> <div class="top2"> ああ <form method="get" action="あああ" style="margin-top:0em; margin-bottom:1em"> <input type="text" name="word" size=40 value=""><input type="submit" value="検索"><input type="hidden" name="line" value="10"> <input type="hidden" name="indi" value="0"><input type="hidden" name="act" value="search"></form> </div><div class="end"></div> <div class="bar"> <div class ="menu"><a href="./">HOME</a></div> <div class ="menu"><a href="about.htm">ABOUT</a></div> <div class="end"></div></div><div class="end"></div> <div class="side"> サイド </div> <div class="main"> メイン </div><div class="end"></div> </div></body> </html> 以下CSS @charset "utf-8"; /* ------------------------------ 基礎設定 ------------------------------ */ body {font-size:0.875em; margin:0; padding:0; line-height:1.4; color:#c0c0c0; background:#000000; background-image: url("back.jpg"); background-repeat: no -repeat; background-position: 99% 95%; background-attachment:fixed; text-align:center; margin:0 auto 0 auto;} img {border:0;} address {font-style:normal;} /* ------------------------------ ページ枠組み設定 ------------------------------ */ .box {width:800; margin:0 auto 0 auto; text-align:left;} .main {width:80%; float:left; text-align:left; font-size:0.875em;} .side {width:20%; float:left; text-align:left; font-size:0.875em;} .top1 {width:50%; float:left; text-align:left; font-size:0.875em;} .top2 {width:50%; float:left; text-align:right; font-size:0.875em;} .bar {width:100%; height:41; text-align:center;} /* ------------------------------ クリアの設定 ------------------------------ */ .end {clear:both;} .end hr {display:none;} /* ------------------------------ メニューの設定 ------------------------------ */ .menu a{display:block; width:96px; color:#c0c0c0; background:url(menu-img/menu1.jpg) no-repeat; height:41px; line-height:43px; text-decoration:none; text- align:center; font-size:0.9em; font-weight: bold; float:left; font-family:verdana,arial,sans-serif;} .menu a:hover{color:#e9e9e9; background:url(menu-img/menu2.jpg) no-repeat;}
- ベストアンサー
- HTML
お礼
回答ありがとうございます そういえは、IE6後期バージョンでチェック後 IE6中期バージョンでチェックしたら相当のページを修正したことを思い出しました。 IE5.5でチェックしましたが。