No.2ベストアンサー
- 回答日時:
> 次のところが具体的にどの様に修正すれば良いのか、どうしても分からないのですが。
少なくとも何らかの解釈をされたと思いますが、何が分からなかったのでしょうか。
> > #header h1 要素
> > margin プロパティ値の不正により無視されています。
HTMLソース 21行目の見出し 『カーナビ カーセキュリティの持込取り付け』
ページ中では h1 要素に対して margin の指定で上部に余白を取っているようですが、
CSS では『margin:50px 0 0 5;』と0以外の値に単位がついていないため、このプロパティが無視されています。
『margin:50px 0 0 5px;』と記述すべきです。
> > #header p 要素
> > 上記に伴い、位置がずれています。
この後の3行の文章は、前述の要素の高さを利用して配置されているようですが、
h1 要素の margin の無効化によってFxでは上部にずれています。
IEではプロパティ値に単位が無い場合でも補完されるために無効化されずh1要素の上部にマージンが取られています。
> > メニュー部
> > リスト要素内の width, margin, padding, border の合計値が親要素の width を超えています。
本来、width は padding よりも内側の内容領域の幅を示す値です。
しかしながら、WinIE5.5などの一部のブラウザ(IE6 quirkモード)では、width が margin, border, padding まで含んで計算されています。
"IE"の表示結果を基準とするのであれば、指定しているwidthプロパティ値から margin, border, padding の値を減算する必要があります。
> > CSS ではセレクタが #menu ul と指定されていますが、HTMLでは"menu" は class 属性値です。
"#menu ul" というセレクタは、menu を id 属性値として持つ要素に包含される ul 要素に対して適用されます。
CSS に記述している "#menu ul" は ".menu ul" の間違いである可能性があります。
他に指摘した部分については理解されているのでしょうか。
No.1
- 回答日時:
> スタイルシートの関係だとは思いますがFirefoxでもInternet Explorerでの見た目と同じようにすることは可能でしょうか?
IEでの見た目というより、理想と思われる表示結果を実現することは可能である可能性が高いです。
> 出来れば制作中のWebサイトを見て頂き、アドバイスを頂けないでしょうか?
私が検証した限りになりますが。
#header h1 要素
margin プロパティ値の不正により無視されています。
#header p 要素
上記に伴い、位置がずれています。
メニュー部
リスト要素内の width, margin, padding, border の合計値が親要素の width を超えています。
CSS ではセレクタが #menu ul と指定されていますが、HTMLでは "menu" は class 属性値です。
代表あいさつ部
float が適用されているボックスの高さが 280px になっていますが、内容はその高さを超えています。
<br style="clear:both;" />
CSS2 では clear プロパティはブロックレベル要素にしか指定できません。
text-align:justify; text-justify:inter-ideograph;
justifyを指定すると、閲覧環境によって表示が崩れる可能性があります。
HTMLソース 66行18字目、112行10字目、113行10字目
予期せぬ空白が含まれている可能性があります。
DTDには反しませんが、div 要素直下にインラインレベルの記述は好ましくありません。
HTMLには一切関係ありませんが、"infomation" はスペルミスです。
IE6で理想と思われる表示がされているのは、実装不備が対応しているだけです。
IE6は margin プロパティ値などに単位が無くても補完して解釈します。
IE6は DTD以前に記述があると quirk モードで解釈され、width 値が margin, padding, border の値を含んだものとして扱われます。
メニュー部のマーカーが表示されていないのも単に隠れているだけで、list-style-type:none が効いているわけではありません。
代表のあいさつ部も、内容が親要素の幅を超えると可変するというIEの特性です。
この回答への補足
quadsさん
もう少し教えて頂けないでしょうか?
次のところが具体的にどの様に修正すれば良いのか、どうしても分からないのですが。
よろしくお願いします。
-------------------------------
#header h1 要素
margin プロパティ値の不正により無視されています。
#header p 要素
上記に伴い、位置がずれています。
メニュー部
リスト要素内の width, margin, padding, border の合計値が親要素の width を超えています。
CSS ではセレクタが #menu ul と指定されていますが、HTMLでは "menu" は class 属性値です。
-------------------------------
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(ブラウザ) Internet Explorer でなければ開けないページ 4 2022/03/25 18:03
- その他(ブラウザ) Edge internet explorer モードのサイトの再読み込みを許可 表示されない 2 2023/03/03 12:10
- その他(ブラウザ) pythonの既定のブラウザを変更したいです 1 2022/07/06 22:09
- Windows 10 Internet Explorer-11 を削除はしたけれど… 3 2022/06/20 17:54
- Windows 10 explorerをedgeで開く方法 2 2022/06/05 14:59
- その他(パソコン・周辺機器) EXCELで「WEBオプションの対象ブラウザ」を変更する方法 2 2023/04/12 15:44
- Excel(エクセル) セルの値をグーグルで検索するエクセルVBAについて! 2 2022/08/01 21:41
- Web・クリエイティブ EXCELでweb内の表を取込む方法を教えてください 2 2023/04/01 11:28
- その他(ブラウザ) Internet ExplorerからEdgeに変更したときの「お気に入り」についての質問です。 1 2022/05/02 16:02
- Windows 10 拡張子が .mht というファイルが見れないッ! 1 2023/05/17 09:33
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
1から100までの自然数のうち、2...
-
超音波で洗脳。
-
CSSのセレクタに指定するbodyと...
-
smallにtext-allignが効かない
-
「諸要素」とはどういう意味で...
-
【ヒトの神秘】美男美女から何...
-
aの中にspan
-
リンク付き画像を右よりに表示...
-
aタグ 中央寄せ
-
cssで好きな位置に好きなボック...
-
<div>でレイアウトすると上下に...
-
html5で右揃え、方法は?
-
初歩的な質問です。<div>のwidt...
-
あるタグが反応しません...
-
HTMLで <p>~</p>内で2回以...
-
border: noneでボタンの境界線...
-
<object>
-
<br />と<br>は同じ意味ですか?
-
Bootstrap レスポンシブ textarea
-
imgタグをそのまま使うことは正...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【ヒトの神秘】美男美女から何...
-
超音波で洗脳。
-
質問1.
-
smallにtext-allignが効かない
-
含む含まないという概念自体の...
-
NからZへの全単射を具体的に構...
-
角丸画像の背景色を透明にした...
-
タグは大文字と小文字どちらが...
-
改行ほどは行かないけど、若干...
-
2個のFormを横並びにしたい
-
「諸要素」とはどういう意味で...
-
input type="hidden"で取得した...
-
CSS:overflow要素の印刷について
-
textareaの幅を画面と合わせたい
-
親要素・子要素
-
テキストボックスの中にリンク...
-
emとstrongの反対
-
cssのdisplay:block
-
border: noneでボタンの境界線...
-
tdに対してmin-heightの定義、...
おすすめ情報