マンガでよめる痔のこと・薬のこと

tableの位置がIEとその他ブラウザでずれます。indexのborderもずれるのですが、どのように対策をすれば良いのでしょうか?
http://allergy.6.ql.bz/tokusyu.html

上記サイトのtableの位置がIEとその他ブラウザでずれてしまいます。
http://css-happylife.com/archives/2007/1025_1325 …

上記のような情報があるのですが、このページの場合どのCSSに入れればよいのでしょうか?
またこれはいったいどんな原理なのでしょうか?


また下記のようにすればIEのバグの問題を解決できると聞いたのですが、これを入れれば解決できるのでしょうか?
*{
margin:0;
padding:0;
font:normal normal normal 100%/1.3 "MS Pゴシック","Osaka",sans-serif;
border:none;}

font:normal normal normal 100%/1.3 "MS Pゴシック","Osaka",sans-serif;
この記述の意味は何なのでしょうね?

このQ&Aに関連する最新のQ&A

A 回答 (2件)

私も数年前までは、これからはXHTMLだと信じてXHTML1.1に移行し始めていました。

HTML4.01はHTMLの最後の仕様で、今後はXHTMLに移行すると・・

 (XHTML1.0は、HTML4.01を、まったくそのままXMLに直したものでHTML4.01と本質的に同じものです。)
 ★ただし、transitionalは、1999年の勧告当時から「非推奨」でした。!!!
  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 当時はまだIEがブラウザの大半を占めていて、ウェブ標準でない互換モードに対応せざるを得ませんでした。その後、IE以外のブラウザがウェブ標準に対応していくに従い、IEもウェブ標準に舵を切りました。

 一方、見捨てられたはずのHTMLですが、そのよさが見直されて、W3CもXHTML2の策定を中止して、HTML5に集中することになりました。
★HTMLに再び風は吹くか、そして「HTML 5.0」は - @IT ( http://www.atmarkit.co.jp/news/200703/13/eweek.h … )
★HTML5が持つ本当の意味 - @IT ( http://www.atmarkit.co.jp/news/200801/25/html.html )

 HTML5では、たとえばあなたの書かれたHTMLについて言うと
 table要素の、border、cellpadding、cellspacing、frame、rules、widthの属性がすべて破棄され、必須だったsummaryがoptionとして残るだけです。
 このように、HTML4.01Transitionalで残されていたすべてのプレゼンテーションに関わる要素・属性が【予告どおり】なくなります。残されるものも、プレゼンテーション的な意味は定義からなくなります。
 方向性は、XHTML1.1も同じでした。
 
・・・・・・・・・・・・・・
IE8で見ているのですが崩れます。標準モードではないのでしょうか?
 これはわかりません。前の回答のDOCTYPEスイッチを確認してください。他のブラウザで確認するのも良いでしょう。
>標準モードとはふつうにIEを起動させることですよね。
 違います。

>またHTML4が良いと拝見したのですが、XHTML1.0ではだめでしょうか?
 まったく同じものです。XMLであるかないかが違う。そうでしなくてHTML4.01strictないし、XHTML1.0strictと言う意味です。

>リファレンスは初心者の私にはなかなか難しいのですが、XHTMLのリファレンスを少しづつ見ていきたいと思います。
 HTML4.01strictのほうが資料は多い。

 私は6・7年前からHTML4.01strictです。一時期XHTMLに移行しましたが、現在はまたHTML5を見据えたHTML4.01strictに戻しています。

>XHTMLでなくHTM4.01strict+CSS2.1で作成するとブラウザによる違いはなくなるのでしょうか?
 誤解されないように、XHTMLかHTMLかの差ではなく、strictかそうでないかの差です。!!!XHTML1.0strictでも構いません。
    • good
    • 0
この回答へのお礼

お返事遅れてすいません。

IEにはWIDTHの計算方法が違うなどのバクがあるときいていますので、このようなもんだいでは無いのでしょうか?
それともstrictで書くと上記のような問題も起こらなくなるのでしょうか?

お礼日時:2012/02/08 12:34

IEでのずれが特別問題になるのはIE6であって、IE7以降は標準モードで動作させる限り、問題にならないはずです。

IE6は、マイクロソフト自身やIT企業がこぞって「腐った牛乳」として撲滅キャンペーン( http://japan.zdnet.com/security/analysis/20427049/ )をしているものなので考慮しなくて良いでしょう。

 まず、HTMLをHTM4.01strict+CSS2.1で作成することで、これらのトラブルはないと思います。それが基本です。

 HTML4.01が勧告(1999年12月)されて、すでに一回り12年経過しています。

【引用】____________ここから
HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[HTML4.01仕様書/4.1 定義( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より

>*{
>margin:0;
>padding:0;
>font:normal normal normal 100%/1.3 "MS Pゴシック","Osaka",sans-serif;
>border:none;}
 意味もわからず、ハイハイじゃダメです。
「*は全称セレクタで詳細度は0です。」
 と言われてもわからないと思います。それはさておき、ここのうち、margin:0;padding:0;だけが、ブラウザ間の差を吸収するポイントではあるのですが、本来は望ましい方法ではありません。

 CSS(カスケーディングスタイルシート)は、カスケーディングの仕組みがあればこそ、使われるのです。カスケーディングの仕組み上、ブラウザがデフォルトで持っているスタイルシートは、著者やユーザーのスタイルシートで、より優先度が高い形で指定されない限り適用されます。ところがデフォルトのスタイルシートには、ブロック要素間にマージンをとるとか、引用<blockquote>要素は左右にマージンをとるなど重要で、デフォルトのままで問題のないスタイルがたくさんあります。
 カスケーディングや詳細度については仕様書の当該ページを読んでください。

 それらをすべて(*全称セレクタ)で消してしまうと、その要素が登場するたびにすべて書き加えなければならなくなり、スタイルシートが肥大化してしまいます。

 互換モードやIE6では、ブロック要素のサイズをパディング辺の外=ボーダーの内側に解釈するバグがあるために、paddingをいったんゼロにするのです。しかし、tableに限らずpaddingを付加すると、当然誤差が出てきますね。そのためには、ブロック要素の内側に直接テキストを書くのではなく、それを何らかのブロック要素で囲んでそのマージンとして指定するしかありません。

<td>なんたらかんたら</td>・・・・td{padding:1em;}じゃダメ・・
<td><p>なんたらかんたら</p></td>・・・td{padding:0;} td p{margin:1em;}とする。
など・・しかし、そんな小手先の業を使うより、「HTMLをHTM4.01strict+CSS2.1で作成すること」が良いでしょう。

 ネット上で情報をつまみ食いしても上達は出来ません。!!!玉石混淆で石の方が断然多い。
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 つねにまず、仕様書を確認すること。とりあえず、HTML4.01の仕様書と、CSS2の仕様書を通読しておくだけでも違うでしょう。
 そのうえで、必要なとき「それについて調べる」あるいは、「仕様書のこの記述がわからない」と問いかけると良いでしょう。
★HTML 4.01仕様書 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
★REC-CSS2 邦訳 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
 ウェブ標準は、CSS2.1ですが、良い邦訳を知りません。CSS2からの変更箇所は・・
 ★変更点(CSS2.1 Appendix C 邦訳) ( http://www.d-toybox.com/spec/CSS2.1/appendixC/ )

まず、HTML4.01strictで作成し、きちんとDOCTYPEを標準モードで動作するよう指定する。
★DOCTYPEスイッチ - W3G Web用語集 ( http://w3g.jp/others/data/doctype_switching )
★doctype スイッチ - Google 検索 ( http://www.google.co.jp/#hl=ja&cp=8&gs_id=2y&xhr … )

Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )やThe W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input )でHTMLをチェックして、スタイルシートはW3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )でチェックする。
 そこから始めるのが良いでしょう。
    • good
    • 0
この回答へのお礼

ありがとうございます。お忙しい中大変ありがとうございました。

>IEでのずれが特別問題になるのはIE6であって、IE7以降は標準モードで動作させる限り、問題にならないはずです

IE8で見ているのですが崩れます。標準モードではないのでしょうか?標準モードとはふつうにIEを起動させることですよね。

またHTML4が良いと拝見したのですが、XHTML1.0ではだめでしょうか?リファレンスは初心者の私にはなかなか難しいのですが、XHTMLのリファレンスを少しづつ見ていきたいと思います。

><td>なんたらかんたら</td>・・・・td{padding:1em;}じゃダメ・・
<td><p>なんたらかんたら</p></td>・・・td{padding:0;} td p{margin:1em;}とする。
など・・しかし、そんな小手先の業を使うより、「HTMLをHTM4.01strict+CSS2.1で作成すること」が良いでしょう。

XHTMLでなくHTM4.01strict+CSS2.1で作成するとブラウザによる違いはなくなるのでしょうか?
小手先の業をするのは不本意ではありますが、もしよろしければこのようなサイトがあればお教えください。

お礼日時:2012/01/31 20:46

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qテーブルの表示がずれます

htmlを書いているのですが、テーブルの行を増やすたびに、ブラウザで表示するとテーブルの表示がだんだん下の方へずれてしまいます。友人に聞いたところ、彼も同じような現象が起こるようです。
このようにならないようにしたいのですが、専門書を読んでも分かりません。
ちなみにhtmlソースはこのようになっております。
(1)行が1つの場合
<html>
<head>
<title>テスト</title>
</head>
<body bgcolor = "white">

<h1>テスト</h1>
<h3>テスト1</h3>
<table>
  <tr>
   <td>テスト</td>
   <td>1</td>
   <td>2</td>
  </tr>
</table>
</body>
</html>

(2)行が2つの場合
<html>
<head>
<title>テスト</title>
</head>
<body bgcolor = "white">

<h1>テスト</h1>
<h3>テスト2</h3>
<table>
  <tr>
   <td>テスト</td>
   <td>1</td>
   <td>2</td>
  </tr>
<tr>
   <td>テスト</td>
   <td>1</td>
   <td>2</td>
  </tr>
</table>
</body>
</html>
宜しくお願い致します。

htmlを書いているのですが、テーブルの行を増やすたびに、ブラウザで表示するとテーブルの表示がだんだん下の方へずれてしまいます。友人に聞いたところ、彼も同じような現象が起こるようです。
このようにならないようにしたいのですが、専門書を読んでも分かりません。
ちなみにhtmlソースはこのようになっております。
(1)行が1つの場合
<html>
<head>
<title>テスト</title>
</head>
<body bgcolor = "white">

<h1>テスト</h1>
<h3>テスト1</h3>
<table>
  <tr>
   <td>テスト</td>...続きを読む

Aベストアンサー

こんにちは。
イマイチどうしたいのかがよく判らないので、具体的な説明を補足してください。
ソース自体は間違いではないと思いますが…。
<tr>や<td>の前にある空白はもちろん半角空白ですよね?全角だと不具合がでます。

行が増えると下に表が大きくなるのは必然ですし。
行が1行のものと、2行のものとでは、ページが違うんですよね?
もし、同じページに表示するのであれば、1ページにつき、<html>タグは一組です。(あくまでも基本的に、ですが)
これが、直接行がずれるっていうことにはならないと思いますけど…。

QIEとクロームの表示ずれ

普段IEを使ってHPを表示しているのですが、クロームで
表示してみたところ、添付資料のように表示されました。
(レイアウトに関する部分はCSSで定義しています)

他のページもほとんど同じようなズレ方なのですが、
なにか簡単に修正ができるのでしょうか?

Aベストアンサー

IEのバージョンがわかりませんが、たぶんウェブ標準のすべてのブラウザでそうなります。
基本的な対策は、ウェブ標準に直し、IEが互換モードではなく標準モードで起動するようHTMLを修正する必要があります。
 DOCTYPEスイッチで、標準モードで起動するように直すこと
・doctypeスイッチ - Google 検索 ( https://www.google.co.jp/search?q=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ja:official&hl=ja&client=firefox-a )

 もちろん、HTMLもDOCTYPEに合わせて修正する必要があるでしょう。
 さすがにないでしょうが、可能ならHTML4.01strict,XHTML1.0strict,XHTML1.1(XHTML1.1にはtransitinalやframesetはない)・・1999年の勧告以来
【引用】____________ここから
HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Conformance: requirements and recommendations (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )]より
 とされてきましたから、strictだとは思いますが・・

 なお、互換モードで一番問題となるのは、IEのスタイルシートのサイズ計算のバグです。
すなわち、コンテナブロックのサイズをpaddin辺の内側ではなくborder辺の内側として計算してしまうことにあります。
 IEを標準にWebページを作成すると良く犯す失敗です。できれば他のウェブ標準ブラウザを使用して作成するほうが無難です。特にFirefoxは開発用ツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )が豊富ですから、この様なときにとても助かります。

IEのバージョンがわかりませんが、たぶんウェブ標準のすべてのブラウザでそうなります。
基本的な対策は、ウェブ標準に直し、IEが互換モードではなく標準モードで起動するようHTMLを修正する必要があります。
 DOCTYPEスイッチで、標準モードで起動するように直すこと
・doctypeスイッチ - Google 検索 ( https://www.google.co.jp/search?q=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ja:official&hl=ja&client=firefox-a )

 もちろん、HTMLもDOCTYPEに合わせて修...続きを読む

Q文字の位置、上下のマージンがずれる

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認してみると・・・

・IE8だと、2段目のテキスト位置が1px上に上がり、pの高さも1px縮む
・IE9だと、1段目と2段目のテキスト位置が1px上に上がり、2段目のpの高さが1px縮む

それぞれのpに高さを決めれば問題はないようですが、
高さを決めずにテキストを配置する場合、
この誤差については対応ができないものなのでしょうか?

pタグに限らず、ul、dlなんかでもずれることが多いです。
テキストをぴったりを合わせる技術ってないのでしょうか?

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認して...続きを読む

Aベストアンサー

まず、line-height:20pxのように、line-heightをpxで指定してみてください。
ブラウザの違いによる縦の誤差はなくなるはずです。

誤差が生じる原因としてはOSやブラウザの違いから、フォントやレンダリングの違いによるものです。
なので、font-size:14px;に指定していても、line-heightをemや%で相対的に指定している場合は、必ず誤差が生じます。

なお、文字列の横をそろえるのほぼ無理と考えてください。

>pタグに限らず、ul、dlなんかでもずれることが多いです。

こちらに関しては、ブラウザ間のデフォルトの差異をなくすため、リセットCSSがよく使われます。
リセットCSS、reset cssなどで検索してみれば色々出てくるでしょう。
最近はHTML5を考慮しているものもたくさんあるので、そちらを使った方が良いでしょう。
しかし、これも完全に誤差をなくせるというわけではありませんが、一度試してみると良いでしょう。

Qテーブルのヘッダとボディの幅がズレルのを防ぐ

ヘッダとボディの幅を可変にし、かつズレないようにするにはどうすればよいのでしょうか?

Aベストアンサー

>ヘッダを固定してボディのみスクロールするため、CSSでthead の tr と、tbody に float:left; を指定しているからです。

 floatの用途を間違えています。
 floatは本来、テキスト中に挿絵などがあるとき、その要素をフローとさせて、その周囲にテキストを回りこませるためのものです。floatでブロックを並べるテクニックは、確かによく見かける手法ですが、そのために文書構造を変えなければならない----floatさせる要素は回り込む要素の前に書かなければならない---という重大な問題があります。これはHTMLやスタイルシートの目的とかけ離れています。使うならabsoluteでしょう。

 しかし、floatやabsolute、fixedは、他の要素から完全に切り離されますから、列のセル幅を引き継げません。tableの描画ルーチンに従わなくなります。

 もう一点、tableの扱いはブラウザごとに大きな差があります。また根本的な問題として、tableには他のブロック要素に使えるプロパティが使えません。height/overflowなど・・

 そのような表を作成される場合は、table,thead,tfoot,tr,tdの各要素をblock要素に置き換えて、幅をセルごとにきちんと指定して配置するのが無難です。

_<table class="scroll" summary="scrollTbody">
__<thead>
___<tr>
____<th>あ行</th><th>か行</th><th>さ行</th><th>た行</th>
___</tr>
__</thead>
__<tbody>
___<tr>
____<td>あ</td><td>か</td><td>さ</td><td>た</td>
___</tr>
___<tr>
____<td>あ</td><td>か</td><td>さ</td><td>た</td>
___</tr>
___<tr>
____<td>い</td><td>き</td><td>し</td><td>ち</td>
___</tr>
___<tr>
____<td>う</td><td>く</td><td>す</td><td>つ</td>
___</tr>
___<tr>
____<td>え</td><td>け</td><td>せ</td><td>て</td>
___</tr>
___<tr>
____<td>お</td><td>こ</td><td>そ</td><td>と</td>
___</tr>
___<tr>
____<td>あ</td><td>か</td><td>さ</td><td>た</td>
___</tr>
___<tr>
____<td>い</td><td>き</td><td>し</td><td>ち</td>
___</tr>
___<tr>
____<td>う</td><td>く</td><td>す</td><td>つ</td>
___</tr>
___<tr>
____<td>え</td><td>け</td><td>せ</td><td>て</td>
___</tr>
___<tr>
____<td>お</td><td>こ</td><td>そ</td><td>と</td>
___</tr>
__</tbody>
_</table>
に対して
table.scroll,table.scroll *{display:block;margin: 0;padding:0;line-height:30px;}
table.scroll{width:428px;margin-top:50px;border-bottom:1px solid gray;}
table.scroll thead,table.scroll tbody{width:100%;border:none;}
table.scroll tbody{height:94px;overflow:auto;width:428px;}
table.scroll thead th,table.scroll tbody td{float:left;width:100px;border:solid gray 1px;}
/* 本来はfloatではなくdisplay:inline-blockとすべきだが後方互換のためやむなくfloat */
table.scroll tbody,table.scroll tbody tr{clear:left;}

>ヘッダを固定してボディのみスクロールするため、CSSでthead の tr と、tbody に float:left; を指定しているからです。

 floatの用途を間違えています。
 floatは本来、テキスト中に挿絵などがあるとき、その要素をフローとさせて、その周囲にテキストを回りこませるためのものです。floatでブロックを並べるテクニックは、確かによく見かける手法ですが、そのために文書構造を変えなければならない----floatさせる要素は回り込む要素の前に書かなければならない---という重大な問題があります。これはHTML...続きを読む

Q同じ幅指定のつもりなのに、ブラウザによって違ってしまう現象

同じ幅指定のつもりなのに、ブラウザによって違ってしまう現象

まったくの初心者ですが、テンプレートを編集してホームページを作りました。
しかし、別の環境で見たところ、テーブルの表示が明らかにおかしいことに気づきました。
(Lunascapeというブラウザで、3種類のエンジンが選べるので他のエンジンにしてみたのです)
問題を極力単純化しようと余計な文章を省いたHTMLを用意しましたが、結果は変わりませんでした。

Tridentに合わせるとWebkitというエンジンで見た場合にはみ出すし、Webkitに合わせるとTridentで見たときにタイトルの幅が広すぎて間抜けなのです。

現状、この重大なエラーを残したまま公開している状態のため、急ぎ直したいのです。

画像は実行したときの症状を、下にはそのソースを載せます。
アドバイス、回答をよろしくお願いします。


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<title>テスト</title>
</head>
<body>
<style type="text/css">
<!--
table{
border-collapse: collapse;border-spacing: 0;
width: 60%;
margin-bottom: 30px;
border: 1px solid #DDD;
table-layout:fixed;
}
th{
border: 1px solid #DDD;
color: #333;
padding: 10px 20px;
}
td{
border: 1px solid #DDD;
color: #333;
padding: 5px;
}

.title{ width:12em;}
.compose,.long{ width:4em;text-align:center;}
.value{ width:6em;text-align:center;}

th.genre { background: #E5F2F8;}
-->
</style>
<table>
<tr><th class="title">タイトル</th><td class="long">こうもく1</td><td class="value"><span class="d">こうもく2</span></td><td>こうもく3は大切なこうもくです。ほんとうです。</td></tr>
<tr><th class="title">タイトル</th><td class="long">こうもく1</td><td class="value"><span class="d">こうもく2</span></td><td>こうもく3は大切なこうもくです。ほんとうです。</td></tr>
</table>

</body>
</html>

同じ幅指定のつもりなのに、ブラウザによって違ってしまう現象

まったくの初心者ですが、テンプレートを編集してホームページを作りました。
しかし、別の環境で見たところ、テーブルの表示が明らかにおかしいことに気づきました。
(Lunascapeというブラウザで、3種類のエンジンが選べるので他のエンジンにしてみたのです)
問題を極力単純化しようと余計な文章を省いたHTMLを用意しましたが、結果は変わりませんでした。

Tridentに合わせるとWebkitというエンジンで見た場合にはみ出すし、Webkitに合わせると...続きを読む

Aベストアンサー

この場合の幅というのは <table> の幅も含めていますか?
IE8, Google Chrome 5 で試したところでは <table> の幅は一致しますが、万全を期すならば

html, body { margin: 0; padding: 0; }

を指定した方が良さそうです。(デフォルトスタイルシートのリセット)
width: 60%; は親要素に対しての割合ですから、margin, padding がブラウザ毎に違うと <table> の幅が不統一になります。

> Tridentに合わせるとWebkitというエンジンで見た場合にはみ出すし、Webkitに合わせるとTridentで見たときにタイトルの幅が広すぎて間抜けなのです。
この辺りでしょうか。

・全てのtable関連要素に margin, padding, border を指定する (デフォルトスタイルシートのリセット)
・em を使いつつ、幅を完全に揃えたいのなら、font-size を指定する (代償にアクセシビリティが下がります。「幅を完全に統一にしたい」という要望なら避けられない問題ですが…。)

デフォルトスタイルシートはあてになりませんので、他にもあやしそうなプロパティを探してリセットしてみてください。

この場合の幅というのは <table> の幅も含めていますか?
IE8, Google Chrome 5 で試したところでは <table> の幅は一致しますが、万全を期すならば

html, body { margin: 0; padding: 0; }

を指定した方が良さそうです。(デフォルトスタイルシートのリセット)
width: 60%; は親要素に対しての割合ですから、margin, padding がブラウザ毎に違うと <table> の幅が不統一になります。

> Tridentに合わせるとWebkitというエンジンで見た場合にはみ出すし、Webkitに合わせるとTridentで見たときにタイトルの幅が広...続きを読む

QIEのみ表示場所がずれる。

FC2ブログでテンプレートを編集しています。
3カラム(3段組)のレイアウトで、一番左側の少し下のほうにボックスを配置、
スクロールにあわせて追尾するようにしたいと思っています。

chromeやFirefoxでは指定の場所に問題なく配置されるのですが、
,IEのみ表示がずれて困っています。(具体的には画面右側あたりに表示されてしまう)

他のブラウザで問題ないので、IEだけずれる要因がさっぱり思いつきません。
どなたかわかる方いらっしゃいませんでしょうか。


*ブログのテンプレート自体は1200pxで固定




HTML部分

**********************************************
<div id="wrap">
<ul id="social_box"><br>
<a href="■"><img src="●" border="0"></a>
<br><br>
<a href="■"><img src="●" border="0"></a></ul>
<div id="main"></div>
<div id="side"></div>
</div>
**********************************************





CSS部分

**********************************************

#wrap{
width:960px;
margin:0px auto;
}

#social_box{
background:#fff;
width:60px;
padding:0px;
margin-left:-110px;
text-align:center;
position:fixed;
bottom:95px;
list-style-type:none;
}

#main{
width:660px;
float:left;
}

#side{
width:300px;
float:left;
}

***********************************************

FC2ブログでテンプレートを編集しています。
3カラム(3段組)のレイアウトで、一番左側の少し下のほうにボックスを配置、
スクロールにあわせて追尾するようにしたいと思っています。

chromeやFirefoxでは指定の場所に問題なく配置されるのですが、
,IEのみ表示がずれて困っています。(具体的には画面右側あたりに表示されてしまう)

他のブラウザで問題ないので、IEだけずれる要因がさっぱり思いつきません。
どなたかわかる方いらっしゃいませんでしょうか。


*ブログのテンプレート自体は1200pxで固...続きを読む

Aベストアンサー

 FC2はわかりませんが、IEと他の標準ブラウザで差が出る場合、もっとも疑わなければならないのは、IEが互換モードで動作している可能性です。
 IEは、かってユーザーの取り込みと他のブラウザを排斥するために独自の仕様を取り入れていました。その後IEもウェブ標準に倣うことになりますが、かってのIEのために作られたページを表示するために「互換モード」をもっています。
 そのIEを標準モードで動作させるためには、DOCTYPEを適切に記述する必要があります。
[HTML4.01strict]でしたら、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
と書くことで、Mac用IEも含めて標準モードで動作します。
 ⇒doctypeスイッチ - Google 検索 ( https://www.google.co.jp/search?q=doctype%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&ie=utf-8&oe=utf-8&aq=t&hl=ja )
(現状ではHTML4.01strictがもっとも良いでしょう。transitinalではありません。)

 また、当然ですが、
『メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。( http://jigsaw.w3.org/css-validator/#validate_by_input )』
 もとても重要です。正しく書かれていないHTMLの場合、ブラウザは何とか表示しようと適当に補完して表示を試みます。その方法はブラウザごとに異なるため、差が出てしまいます。
 スタイルシートを書き始める前に
 ⇒Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html )
でチェックしておく癖をつけましょう。
・<ul>内に<br>や<a>は入ることは出来ません。
 <ul>内に存在しうるのは<li>のみです。
⇒<!ELEMENT UL - - (LI)+
 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/lists.html#edef-UL )
と書かれているのは、--(前後のタグを省略できない、(LI)がひとつ以上
 と書かれています。
 また<br>は通常のHTML文書には登場しません。「ひとつの段落でありながら改行する」という強制改行です。間隔を広げるために使用するものではありませんし、段落を示すものではありません。

※先日書いたサンプルが、こちら( http://oshiete.goo.ne.jp/qa/8246537.html )の回答No.2にあります。
 DOCTYPEを上記に変更して、HTML4.01strictに変更し
 そこで示した示したスタイルシートを次に書き換えてみてください。
 ()
div.header,div.section,div.footer{
width:90%;min-width:620px;max-width:1000px;
margin:0 auto;
padding:5px;
}
div.section{position:relative;min-height:400px;}
div.section div.nav,div.section div.aside{/* 子孫セレクタ */
position:absolute;top:0;
width:200px;height:100%;
}
/*div.section div.nav{left:0;}*/
div.section div.nav{height:200px;bottom:10px;position:fixed;top:auto;}
div.section div.aside{right:0;}
div.section h2,div.section div.section{
margin:0 210px;
}
div.section div.section{
width:auto;min-width:0;min-height:200px;
margin:0 210px;
}
/* たったこれだけ!---おまけに分かりやすく色分け */
body{background-color:gray;}
div.header{background-color:aqua;}
div.section{background-color:silver;}
div.section div.section{background-color:white}
div.section div.nav{background-color:yellow;}
div.section div.aside{background-color:lime;}
div.footer{background-color:fuchsia;}



 

 FC2はわかりませんが、IEと他の標準ブラウザで差が出る場合、もっとも疑わなければならないのは、IEが互換モードで動作している可能性です。
 IEは、かってユーザーの取り込みと他のブラウザを排斥するために独自の仕様を取り入れていました。その後IEもウェブ標準に倣うことになりますが、かってのIEのために作られたページを表示するために「互換モード」をもっています。
 そのIEを標準モードで動作させるためには、DOCTYPEを適切に記述する必要があります。
[HTML4.01strict]でしたら、
<!DOCTYPE HTML PU...続きを読む

Qtableのcellpadding="0" cellspacing="0"をCSSで

tableのcellpadding="0" cellspacing="0"をCSSで設定する方法を検索したところ、
border-collapse:collapse;
border-spacing:0;
というアドバイスが記載されていました。
実際に使ってみたのですが、
どうしてもセル余白とセル間隔が発生してしまいます。
どうしたらよいですか。

Aベストアンサー

border-spacingはborder-collapseの値がseparateのときしか有効にならないそうです。
http://www.htmq.com/style/border-spacing.shtml

サンプルが
http://www.htmq.com/style/border-collapse.shtml
にあるので参考にしてください。

# それにしてもこんなプロパティがあるとは知らなかった…

参考URL:http://www.htmq.com/style/border-spacing.shtml

QIEのレイアウト崩れについて 助けてください

いつもお世話になっております。
実はブログを作成していて一部、IEのみ配置が違っている部分(検索フォーム部分のみ)がございました。
どのようにCSSを変更しても他ブラウザのように表示されず困っております。

そこでIEハックをして修正しようと思いました。
IE11でのハック方法が分からず、どなたかご教示頂けませんでしょうか。
また、CSSなど修正可能な方がいらっしゃいましたら助言頂けると嬉しいです。


【HTML】
<!-- コンテンツ部分 -->
<div id="contents">
<a href="#" title="トップページ"><div class="btn">Home</div></a>
<a href="#" title="当サイトについて"><div class="btn">about</div></a>
<a href="#" title="写真・画像置き場"><div class="btn">Photo</div></a>
<a href="#" title="ツイッター - Twitter -"><div class="btn">Twitter</div></a>
<a href="#" title="お問い合わせ"><div class="btn">Mail</div></a>

<!-- 検索フォーム -->
<div class="search" align="right">
<form action="./" method="get" >サイト内検索
<input class="search_input" type="text" name="q" maxlength="200" value="<%search_word>">
<input class="search_btn" type="image" src="pngファイル(15px*14px)">
</form>
</div>
</div>

【CSS】
/***** ボタン部分 *****/

#contents{
width: 1200px;
height: 35px;
margin-bottom: 25px;
}

.btn{
float: left;
width: 100px;
height: 33px;
padding-left: 20px;
padding-right: 20px;
border: 1px solid #15aeec;
background-color: #49c0f0;
background-image: -webkit-linear-gradient(top, #49c0f0, #2cafe3);
background-image: linear-gradient(to bottom, #49c0f0, #2cafe3);

color: #fff;
-webkit-transition: none;
transition: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
line-height: 33px;

}

/* マウスオーバー */
.btn:hover{
border:1px solid #1090c3;
background-color: #1ab0ec;
background-image: -webkit-linear-gradient(top, #1ab0ec, #1a92c2);
background-image: linear-gradient(to bottom, #1ab0ec, #1a92c2);
}

/* クリック */
.btn:active {
background: #1a92c2;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .2);
color: #1679a1;
text-shadow: 0 1px 1px rgba(255, 255, 255, .5);
}

/***** 検索部分 *****/
.search{
/*float: left;*/
height: 33px;
margin-left: auto;
border: 1px solid #15aeec;
background-color: #49c0f0;
color: #fff;
-webkit-transition: none;
transition: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
line-height: 33px;
}

.search_input{
width: 220px;
padding: 5px 35px 5px 6px;
border:1px solid #333;
}

/* 可能であれば:root .search_btnを共通で使用したいです */
:root .search_btn{
position: relative;
top: 3px;
left:-30px;
}

/* まだIE10の配置修正はしていません */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.search_btn{
position: relative;
top: 0px;
left:-30px;
}
}


動きを確認したところ
.search_inputのheightをデフォルトより広くとるとIEのレイアウトのみ崩れるようになりました。
何卒、ご返事よろしくお願い致します。

いつもお世話になっております。
実はブログを作成していて一部、IEのみ配置が違っている部分(検索フォーム部分のみ)がございました。
どのようにCSSを変更しても他ブラウザのように表示されず困っております。

そこでIEハックをして修正しようと思いました。
IE11でのハック方法が分からず、どなたかご教示頂けませんでしょうか。
また、CSSなど修正可能な方がいらっしゃいましたら助言頂けると嬉しいです。


【HTML】
<!-- コンテンツ部分 -->
<div id="contents">
<a href="#" title="トップページ">...続きを読む

Aベストアンサー

スタイルシートに取り掛かる前に、HTMLを根本から学びなおす必要があります。
・・・厳しいですが、そのほうがはるかに早く上達できます。・・・
a要素--行内要素--内にDIVは置けません!!
★今のページをAnother HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )でチェックしたらよいです。

★スタイルシートを使ってデザインする最大の目的は
 1) 構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )
  文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になる

 2) 豊富なプレゼンテーション
  スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )

 上記のリンク先は必ずしっかり読んで理解すること

★DIVの使い方も含めHTMLの基本が出来ていません。
 デザインを目的にHTMLが書かれていますが、HTMLは文書構造をマークアップするものです。出生はSGMLです。
 『プレーンテキストのみを用いて、「タグ」を使うことによってデータに意味を持たせることが考えられた。( http://ja.wikipedia.org/wiki/SGML#.E8.83.8C.E6.99.AF )』
 <h1>は見出し)heading>、<p>は段落(Paragrph)、<li>はリストのアイテム(List Item)
 それで足りないときにDIVやSPANを使って
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』
 (ここが理解され難かったためHTML5では新しく構造を示す要素が追加されて、DIVやSPANは原則使わなくなります。)
 Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.( http://www.w3.org/TR/2012/CR-html5-20121217/grouping-content.html#the-div-element )
 適切な要素がないときの最後の最後の手段としてdivを使うことを強く推奨する。--とね

 また、スタイルシートのセレクタも基点となるセレクタを書かれていませんが、本来は書くべきです。

 と全般的に基礎が全く出来てない上にCSS3などを積み上げてらっしゃる。それでは崩れ落ちます。

 IE11は、他のウェブ標準ブラウザと同じでハックは必要ありません。もしIE11で崩れるならfirefoxやChromeでも崩れるはずです。
 標準モードで動作するようにDOCTYPEを記述し、HTML/CSSが正しければIE8以降のブラウザでは崩れはないはず。

 HTMLは文書構造しか書きませんから・・こんなシンプルなものでよい。
 class名などもデザインではなく文書構造を示すようにする。もちろん無駄なものは書かない。書く必要はない。

<!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">
<!--
-->
_</style>
</head>
<body>
_<div class="header">
__<h1>タイトル</h1>
__<div class="nav">
___<ol>
____<li><a href="/" title="トップページ">Home</a></li>
____<li><a href="/about" title="当サイトについて">about</a></li>
____<li><a href="/album" title="写真・画像置き場">Photo</a></li>
____<li><a href="/twiter" title="ツイッター - Twitter -">Twitter</a></li>
____<li><a href="/contact" title="お問い合わせ">Mail</a></li>
___</ol>
__</div>
__<div class="form">
___<form action="./">
____<h2>サイト内検索</h2>
____<p>
_____<input type="text" name="q" maxlength="200" value="%search_word">
_____<input type="image" src="pngファイル(15px*14px)">
____</p>
___</form>
__</div>
_</div>
_<div class="section">
__<h2>見出し</h2>
__<p>本文はsection</p>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
__<dl class="documentHistry">
___<dt id="FIRST-PUBLISHED">First Published</dt>
___<dd>2013-03-03</dd>
__</dl>
_</div>
</body>
</html>

スタイルシートに取り掛かる前に、HTMLを根本から学びなおす必要があります。
・・・厳しいですが、そのほうがはるかに早く上達できます。・・・
a要素--行内要素--内にDIVは置けません!!
★今のページをAnother HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )でチェックしたらよいです。

★スタイルシートを使ってデザインする最大の目的は
 1) 構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )
  文書の構造をプ...続きを読む

Qテーブルタグの中にdivを含めてはダメ?

テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
何か不都合でもあるのでしょうか?
何かご存知の方がいれば教えていただけませんか?

Aベストアンサー

以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth,tdが書けることになっています(それ以外は不可)。

th,tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。

Qテーブルセル余白(例えば左側だけ、上側だけ、など)

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ5ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="XX"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

Aベストアンサー

1つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">
<!--
td {padding: 5px 10px 20px 30px;}
-->
</style>


人気Q&Aランキング