- 締切済み
CSSIE7でレイアウトが崩れます（リストスタイル..)
はじめまして ノブタです TAGの掲示板でもご質問いたしています。 急いでいますのでなりふり構わずすみません。 ２コラム型（入れ子）のHP作成で 左側にメニュー項目を作成しました。 あらかじめCSSでlist-styleはnoneを指定いたしています。 作成過程で（Dreamweaver）上でもリストスタイルは表示されませんでした。 もちろんIE6でもレイアウトのズレも無くリストスタイルも無い状態で表示されていました。 しかし、IE７では（Dreamweaver）上でも作成過程からリストスタイルが表示されレイアウトが右に膨らみ崩れます。 初期化する意味でimportで読み込ませてみたり、*:first-child+html { }や アンダーバー＿ を子セレクターを使用したり トライしてみるのですが上手く反映されません。 リストマークがIE7で現れ本当に困っていいます。 助けてください お願いいたします。 （基本的なCSSができていようで勘違いしています） ソースは以下のような感じですが..... 教えて頂けたら嬉しいのですが 宜しくお願いいたします。 /!------CSS------/ #menus{ float:left; margin-left:1px; margin-top:10px; margin-bottom:25px; margin-right:3px; width:162px; background-color: #FFFFFF; clear: both; list-style:none; display:block; } *:first-child+html #menus{ list-style:none; } /!--こんな感じで試しています。--/ UL#menus{ margin:35px 5px 0px 0px; width:162px; height:400px; background-color:#FFFFFF; clear:left; display:inline; list-style:none; _list-style:none;/!--こんな感じで試しています。--/ } ul menus { /* for IE7 */ list-style: none; }/!--こんな感じで試しています。--/ *:first-child+html ul#menus{ list-style:none; }/!--こんな感じで試しています。--/ UL#menus LI { clear: both; hight: 162px; list-style:none; list-style-position:inside; } ul menus li{ /* for IE7 */ list-style: none; }/!--こんな感じで試しています。--/ *:first-child+html ul#menus li{ list-style:none; } /!--こんな感じで試しています。--/ /!--*一回一回記述してみたり削除してみたり試しています。--/ /!-----以上がCSSです----/ ｈｔｍｌは <!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=shift_jis" /> <link rel="stylesheet" href="reset.css" type="text/css" media="all"> <link rel="stylesheet" type="text/css" HREF="CSS/details3000.css"> <!------//////// 省略 ////////////---> <div id="left"> <div id="menus"> <ul> <li id="menus01"> <li id="menus02"><a href=""></a></li> <li id="menus03"><a href=""></a></li> <li id="menus04"><a href=""></a></li> <li id="menus05"><a href=""></a></li> <li id="menus06"><a href=""></a></li> <li id="menus07"><a href=""></a></li> <li id="menus08"><a href=""></a></li> </ul> </div> <ul id="menus" > <LI> <img src="imges/leftmenus/sp002.gif" onmouseover="setRollOverImg(0, this)" onmouseout="setRollOverImg(1, this)" /></LI> <LI> <img src="imges/leftmenus/sp003.gif" width="162" height="30" onmouseover="setRollOverImg(2, this)" onmouseout="setRollOverImg(3, this)" /></LI> <!-----以上がソースです。------> リストマークが消えません 教えてください 宜しくお願いいたします。
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- abril
- ベストアンサー率69% (388/560)
CSSもHTMLも基本的なシンタックスを理解されておられない様に見受けられます。 よって、現状はかなり意味不明な構造になっています。ご自分で定義された各セレクタの意味が以下の様になっている事をまず理解して下さい。 【CSS】 (1) #menus{ list-style:none; } ↑タグの種類を問わず、"menus"というidに対して有効。 (2) *:first-child+html #menus{ list-style:none; } ↑上記は「IE7だけに適用させるhack」だが、既に先立つ(1)で定義されているプロパティと同じなのでので不要。 こういうhackはその環境に対してだけ（通常の定義ではバグ等により不具合が発生してしまうのを回避する策として）「後から定義した異なるプロパティの方を有効にする（他環境では無視されるので先に定義したプロパティの方がそのまま有効となる）」為に使用するものです。なので、(1)でIE7が思い通りの挙動をしてくれていなければ、(2)はIE7に対して「同じ定義を上書きしただけのプロパティ」を二重に適用するだけなので、無意味です。 (3) UL#menus{ list-style:none; _list-style:none; } ↑<ul>タグのid属性として記述された"menus"に対して有効。 ちなみに"_list-style:none;"という”アンダースコア・ハック”はIE6用hackであり、IE7では無視されますのでこれもIE7用として記述しておられるのでしたら全く無意味です。 (4) ul menus { /* for IE7 */ list-style: none; } ↑セレクタとしてこういう記述は有り得ません。「<ul>タグの子要素の<menus>タグに適用」という意味になってしまいますが、”<menus>タグ”というものはHTMLには存在しませんので。 (5) UL#menus LI { list-style:none; list-style-position:inside; } ↑<ul id="menus">の子要素の<li>に対して有効。(3)で既に親要素の<ul>に対して"list-style:none;"を定義しているので、ここで更に定義する必要はありません。また、「"list-style:none;"（リストスタイルを表示させない）」としているのに「list-style-position:inside;（リストマークの位置を内側に）」という定義も無意味ですので不要です。 (6) ul menus li{ /* for IE7 */ list-style: none; } ↑「<ul>タグの子要素の<menus>タグの子要素の<li>に適用」という意味になり、(4)以上にわけのわからない無効な定義になっています。 (7) *:first-child+html ul#menus li{ list-style:none; } ↑<ul id="menus">の子要素の<li>に対して有効。IE7用hackとしての記述になっていますが、(5)で定義したプロパティと全く同じですのでこれも今までの説明通り、不要です。 【HTML】 <div id="left"> <div id="menus"> <ul> <li id="menus02"><a href=""></a></li> <!-- （省略） --> </ul> </div> ↑ここまでを(A)ブロックとします。 <ul id="menus" > <LI><img src="imges/leftmenus/sp002.gif" onmouseover="setRollOverImg(0, this)" onmouseout="setRollOverImg(1, this)" /></LI> <!-- （省略） --> </ul> ↑ここまでを(B)ブロックとします。 ■同じ"menus"というidは、1つのHTML文書内では1回しか出てきてはいけません。よって、現状の様な<div id="menus">～</div>と<ul id="menus">～</ul>という(A)と(B)が同一ファイル内に存在する構造は不可です。 ■「リストマークがIE7で現れ」てしまう箇所は、(A)(B)どちらの事ですか？ (A)の部分のリストマークを消したいのであれば、CSS上での記述は： (a1) ul { list-style: none; } (a2) #menus ul { list-style: none; } (a3) div#menus ul { list-style: none; } といったいずれか（他にも記述方法がありますが幾つかのサンプルを挙げました）が考えられますが、CSS内にはそれに相当するセレクタがありません。従って提供されたCSSのソースだけに限って言えば、IE7だけではなく全ての環境で(A)のリストマークが表示される事になります（実際、サンプルをそのまま再現した状態では表示されています）。 ※多分、reset.cssの方で主要なプロパティを初期化しているのだとは思いますが…。 また、(B)の部分のリストマークを消したいのであれば、CSS上での記述は： (b1) ul { list-style: none; } (b2) #menus { list-style: none; } (b3) ul#menus { list-style: none; } といった様な記述が妥当ですが、CSSを見ると(1)が(b2)／(3)が(b3)とそれぞれ同じセレクタで記述されていますので、(B)ブロックではIE7を含めた全ての環境でリストマークは非表示となります（実際、サンプルをそのまま再現した状態では表示されていません）。 ■ソースにはidセレクタしか出てきませんが、classセレクタも適切に使い分けておられますか？idセレクタは詳細度が高いので、reset.cssで<ul>に対する"list-style: none;"というプロパティの初期化を行っていたとしても、後に続くdetails3000.cssの方でそれを打ち消してしまう様な記述をしてしまっていたら（reset.cssもdetails3000.cssも全貌が不明なのであくまで推測ですが）、意図しない表示結果になってしまう事も充分有り得ます。 ■あと一つ気になったのは、<head>内の外部CSSの参照状態です。 <link rel="stylesheet" href="reset.css" type="text/css" media="all"> <link rel="stylesheet" type="text/css" HREF="CSS/details3000.css"> とありますが、reset.cssとdetails3000.cssの置き場所が違う様ですが、これはどちらかのパスが間違っている、という事はないですよね？ それから、"CSS"というディレクトリ名は大文字で正しいですか？（ローカル上では大文字・小文字は区別されませんが、Webサーバ上では異なるものとして認識されますので、念の為） 提供されたソースを見る限りで「推測」できるのはこれぐらいが関の山です。 ただ率直に申し上げて、CSSもHTMLも「理屈がわかっていないのにあちこちで聞きかじった技・手法を闇雲に貼り付けている」という状態に思われます。一部がこの状態なので、全体像はCSS・HTML共に更に矛盾した構造・不適切な文法をあちこちに抱えているのではないか…と。何箇所にも渡る正しくない記述が絡み合った結果のトラブルということになると、根本的な解決はそれらの部分を徹底的に洗い出してCSSもHTMLも正しい文法・構造になる様に根底から修正しない限り望めないでしょう。仮に、更に無理矢理な定義を重ね何とかIE7上の辻褄を合わせられたとしても、今度は他の環境で破綻する、という状態を引き起こしかねませんので、やめた方が宜しいです。 質問者様自ら「（基本的なCSSができていようで勘違いしています）」と仰られていますが、「基本」が理解できていないのならCSSをあれこれするのはまだ控えられるのが賢明です。CSSもHTMLも（まあ何のスキルにチャレンジするしても当たり前の事だとも思いますが…）最低限のシンタックスを理解されてから実践されないと泥沼にはまるだけです。
- tsunami02
- ベストアンサー率23% (16/68)
どのページにもリストマークを使わないなら、この下 ul,ol { margin-left: 0px; } li { list-style:none; } menusのみリストマークをいれないなら、この下 #menus ul,ol { margin-left: 0px; } #menus li { list-style:none; }
お礼
ありがとうございます。 さっそく使ってみます。 本当にすみませんでした。
リストの頭につくマークを消せばいいんですよね？ #menus ul { list-style:none; ] ではダメ？
お礼
はい でもご指摘に従いもう一度試してみます。 ありがとうございます。
お礼
お忙しい中、丁重なお答すみません ありがとうございました さっそくご指摘のあるパートを勉強し再度挑戦します。 本当にお手数かけました。 ありがとうございます。