- 締切済み
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> <!-----以上がソースです。------> リストマークが消えません 教えてください 宜しくお願いいたします。
- nobutajj
- お礼率100% (3/3)
- HTML
- 回答数3
- ありがとう数6
- みんなの回答 （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; ] ではダメ？
お礼
はい でもご指摘に従いもう一度試してみます。 ありがとうございます。
関連するQ&A
- リストで間が開いてしまう・・・
xhtml&cssでサイト作成を行っているのですが、 リストをインラインでならべて、 list-style-type: none; でリストの黒丸を消して、 そこに画像を入れてならべようと思ったのですが、 画像と画像の間に隙間が開いてしまいます。 ソースはこちらです。 ---XHTML------------------------- <div id="@"> <ul> <li> <img src="@" /> </li> <li> <img src="@" /> </li> <li> <img src="@" /> </li> </ul> </div> ----XHTML---------------------------------- ----CSS------------------------------------ div#@@@@ ul{ display: inline; list-style-type: none; margin: 0px; padding: 0px; } div#@@@@ li{ display: inline; list-style-type: none; margin: 0px; padding: 0px; } ----CSS------------------------------------ 念のために、ulとliの両方を指定しておきました。 (通常は、liだけでよいです。） このとおりになるのですが、 これで、隙間をなくす方法を知っていたら教えてください！ お願いします！
- 締切済み
- HTML
- list-style-imageがきかない。
下記のようにリストの中黒を画像にしたいのですが、Chromeでは画像が表示されず、中黒のままです。原因が分る方教えてください。 SafariとFireFoxでは表示されます。 [html] <ul> <li><a href="concept.html">コンセプト</a></li> <li><a href="gallery.html">ギャラリー</a> </li> </ul> [CSS] li { margin-bottom:15px; margin-left:50px; list-style-image:url("../img/xxx.png"); }
- ベストアンサー
- CSS
- リストを全体的に右寄せにしたい。
リストを横並びにしました。 これを大きいdivで囲んだ中の右寄せにするにはどうしたらよいのでしょうか。 #ex { width: 100%; background-color: #66CCFF; height: 28px; } #ex ul { list-style: none; } #ex li { margin: 0px; padding: 5px 0px 5px 30px; list-style: none; float: left; background: url(***.gif) no-repeat 10px 0.5em; } <div id="ex"> <ul> <li><a href="#">リスト</a></li> <li><a href="#">リスト</a></li> </ul> </div>
- ベストアンサー
- HTML
- 画像を挿入して横並びのメニューリストを作ったのです
が、margin-top,margin-bottom(margin-leftはききます）がききません。何が原因でしょうか？ 以下がソースです。 ～html～ <ul id="menu"> <ul> <li>a href="#"><img src="〇〇.jpg"alt="〇〇" width="167" height"59"/></a></li> <li><a href="#"><img src="△△.jpg"alt="△△" width="167" height"59"/></a></li> 省略 </ul> ～css～ ul#menu {margin-left: 45px} ul#menu li {list-style-type: none; float: left} ul#menu li a {display: block; width: 181px} ul#menuのところに記述しましたが、変化ありませんでした。
- ベストアンサー
- CSS
- css リストを右揃えにできません。。。
非常にシンプルなことができず、頭を抱えています。 縦に並んだリストを、右揃えにしたいです。 ulに便宜的にborderをつけていますので、 そのボックスの右にピッタリ並べたいのですが … text-align、margin 二通りの指定で試したものの 左揃えになってしまいます（Mac safari firefox）。 なんで～～？？ どなたかドウゾ助けてください。よろしくお願いします。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <!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> <style><!-- *{ margin:0; padding:0; } ul.align { list-style:none; text-aling:rignt; width:200px; border:1px solid #000;} ul#margin li { list-style:none; margin-left:auto; margin-right:auto;} --></style> </head> <body> <ul class="align"> <li><a href="" title="">AA</a></li> <li><a href="" title="">BBBBB</a></li> <li><a href="" title="">CCC</a></li> <li><a href="" title="">DDDD</a></li> </ul> <ul class="align"> <li>AA</li> <li>BBBBB</li> <li>CCC</li> <li>DDDD</li> </ul> <ul id="margin"> <li><a href="" title="">AA</a></li> <li><a href="" title="">BBBBB</a></li> <li><a href="" title="">CCC</a></li> <li><a href="" title="">DDDD</a></li> </ul> </body> </html>
- ベストアンサー
- HTML
- スタイルシートでのメニュー作成で
今回初めてテーブルを使わずスタイルシートでナビゲーションを作成しているのですが 下記の方法ではメニュー内のテキストが左に寄ってしまいます。 出来ればすっかり左寄せではなく、左に10px程空間を入れたいのですがどのようにすれば良いでしょうか。 CSS内の#menuに「margin-left:10px」としても反映されません。 ■■ CSS ■■ #menu {margin: 12px; padding: 0px; width: 180px; border-top: 1px solid #080240; border-right: 1px solid #080240; border-left: 1px solid #080240; font-size: 100%; } #menu ul {margin: 0px; padding: 0px; list-style: none; } #menu li {margin: 0px; padding: 0px; } ■■ HTML ■■ <ul> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> </ul> アドバイスいただけると助かります。 どうぞ宜しくお願い致します。
- ベストアンサー
- HTML
- CSS 横並びリストの書き方はどちらがよいでしょうか
スタイルシートで横並びリストを作成するとき、li { display: inline; } を使う方法と、li { display: block; float:left; } を使う方法がありますよね。皆さんは、意識して、使い分けられていますか？ どちらで表現しようか、よく迷います。どちらの方法でも同じレイアウトにできるように思ってしまっていて。。でも自分の気付いていないデメリットがあるのかな？と気になります。「こうしたい場合、こちらのレイアウトだと無理」とか、「これではこのブラウザで表示が崩れる」など、お気づきのことがあれば、教えていただけないでしょうか。 下に、自分で確認用に作ったhtmlがあるので、そのままブラウザで見ていただければと思います。お手数ですが、よろしくお願いします。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>横並びサンプル</title> <style type="text/css"> <!-- /* リスト：インライン ------------------------------------------------------------ */ #yoko1 li { display: inline; } #yoko1 a { display: block; float:left; } #yoko1 li { list-style-type: none; margin:0 5px; } #yoko1 a { padding: 5px 10px; margin: 5px; text-decoration:none; border:1px solid #CCFF33; } #yoko1 a:hover { background-color:#CCCCFF; } #yoko2 { clear:left; } /* リスト：ブロック ------------------------------------------------------------ */ #yoko2 li { display: block; float:left; } #yoko2 a { display:block; } #yoko2 li { list-style-type:none; margin:0 5px; } #yoko2 a { padding: 5px 10px; text-decoration:none; border:1px solid #CCFF33; } #yoko2 a:hover { background-color:#CCCCFF; } --> </style> </head> <body> <div id="yoko1"> <ul> <li><a href="#">あ</a></li> <li><a href="#">い</a></li> <li><a href="#">う</a></li> </ul> </div> <div id="yoko2"> <ul> <li><a href="#">あ</a></li> <li><a href="#">い</a></li> <li><a href="#">う</a></li> </ul> </div> </body> </html>
- ベストアンサー
- HTML
- リスト項目でのメニュー作成
リスト項目を使いcssでメニューを作成しているのですが、下記のような記述でメニュー1の部分だけ違う色を指定したい場合、どのように記述すればよいのでしょうか？ <html lang="ja"> <head> <style type="text/css"> ul#menu li { list-style-type: none; float: left; padding: 0px; line-height: 22px;font-size:14px;width: 110px; margin-left: 2px;} ul#menu li a { text-decoration: none; display: block; / padding: 5px; color: #black; background-color: #8BCFDE } ul#menu li a:hover { background-color: #ff9999; color: #black; } </style> </head> <body> <ul id="menu"> <li><a href="#/">メニュー1</a></li> <li><a href="#/">メニュー2</a></li> <li><a href="#/">メニュー3</a></li> <li><a href="#/">メニュー4</a></li> <li><a href="#/">メニュー5</a></li> <li><a href="#/">メニュー6</a></li> </ul> </body> </html>
- ベストアンサー
- HTML
- Dreamweaverでリストを作成するとボックスからずれてしまいます
DreamweaverCS3を使用してサイトを作成している初心者です。 AP divで作ったボックスの中にリストを作成したのですが、 何故か文字の部分がボックスから大幅にずれてしまいます。 CSS記述↓ #apDiv1 { position:absolute; left:57px; top:82px; width:150px; height:143px; z-index:12; background-color: #FFFFFF; } #apDiv1 li { list-style-type: none; background-color: #CCCCCC; color: #333333; display: block; width: 135px; padding-bottom: 4px; padding-top: 4px; margin-bottom: 1px; margin-left: 0px; margin-top: 0px; padding-left: 15px; } #apDiv1 li a:hover { background-color:#999999 } <body>内です↓ <div id="apDiv1"> <ul> <li class="style4"><a href="http://oshiete.goo.ne.jp/">あああ</a></li> <li class="style4"><a href="http://oshiete.goo.ne.jp/">いいい</a></li> <li class="style4"><a href="http://oshiete.goo.ne.jp/">ううう</a></li> <li class="style4"><a href="http://oshiete.goo.ne.jp/">えええ</a></li> </ul> </div> どうしたらボックスにピッタリ合わせる事ができるのでしょうか。 どうぞ宜しくお願い致します。
- ベストアンサー
- グラフィックソフト
- CSSを用いてリストを横並びにして、それを2行にまたがせる方法
CSS を用いて、リストを横並びにしたのはいいのですが、そのリストの数が多く、2行にまたがらざるを得ません。 Firefox ですと枠内に入りきらないリストは自動的に改行して表示してくれるのですが、IE ですと入りきらないリストを右端に無理矢理表示（縦に伸びていきます）し、そのリストの次から2行目と移り変わります。 -- HTML -- <div id=content> <ul> <li><a href="">AAA</a></li> <li><a href="">BBB</a></li> <li><a href="">CCC</a></li> <li><a href="">DDD</a></li> <li><a href="">EEE</a></li> <li><a href="">FFF</a></li> </ul> </div> -- CSS -- #content ul { padding: 0; margin: 0; list-style-type: none; } #content li { float: left; display: block; padding: 2px 10px 0 5px; margin: 0; list-style-type: none; } 上記の例ですとEEEが1行目に入りきらない場合、Firefox では、EEEが2行目へとなって後が続きます。 IEですと EEE のうち E 1文字だけでも入ると残りの2文字は下方へずれて行きます。そして、FFFから2行目となります。 このIEでの不具合で良い解決法があれば、ご教授願います。 よろしくお願い致します。
- ベストアンサー
- HTML
お礼
お忙しい中、丁重なお答すみません ありがとうございました さっそくご指摘のあるパートを勉強し再度挑戦します。 本当にお手数かけました。 ありがとうございます。