• ベストアンサー

W3Cのソースコードの検証サービスで「文法解析エラーが発生しました」という結果が出たときは何のことを言っているのですか?

W3Cのソースコードの検証サービスで「文法解析エラーが発生しました」という結果が出たときは何のことを言っているのですか? 問題の箇所は h2, h3, h4, h5, h6, { font-size: 14px; } の部分でエラーがでました。 ほかに、この部分に関連する部分としては、以下のようなソースコードも書いています。しかし、間違ってはいないように思われますが、、、 body, h1, h2, h3, h4, h5, h6, dl, dt, dd, table, th, td, img { margin: 0; padding: 0; border: none; font-style: normal; font-weight: normal; font-size: 100%; text-align: left; } h3 { background-image: url(images/main/h3.gif); line-height: 28px; margin-bottom: 15px; font-weight: bold; } h2 { text-indent: 15px; line-height: 28px; color: #FFF; background-image: url(images/h2.jpg); background-repeat: no-repeat; font-weight: bold; margin-bottom: 15px; } 以下の検証サービスで、ソースコードの検証を行いました。 http://jigsaw.w3.org/css-validator/

  • HTML
  • 回答数2
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

直接入力で  h2, h3, h4, h5, h6, { font-size: 14px; } を入力すると、同様に「文法解析エラーが発生しました」となります。  h2, h3, h4, h5, h6 { font-size: 14px; } にしてあげれば、「おめでとうございます! エラーはありません。」になりますが、そういうことではないのかな?

katsunof
質問者

補足

早速の回答ありがとうございます! すみません、fujillinさんの上記のh2, h3, h4, h5, h6, { font-size: 14px; }と下記のh2, h3, h4, h5, h6, { font-size: 14px; }にどういう違いがあるのでしょうか? もう少し説明いただけると幸いです。

その他の回答 (1)

  • outbrave
  • ベストアンサー率60% (231/380)
回答No.2

>上記のh2, h3, h4, h5, h6, { font-size: 14px; }と下記のh2, h3, h4, h5, h6, { font-size: 14px; }にどういう違いがあるのでしょうか? それは同じでしょう。 No.1様の回答をよく見てください、h6 の後ろを。

katsunof
質問者

お礼

なるほど、カンマがあるかないかの違いですね。 わかりました。ありがとうございます。

関連するQ&A

  • W3C CSSで文法解析エラーが発生しました

    W3C CSS 検証サービスで 文法解析エラーが発生しました というエラーメッセージが出ます。 cssは次のとおりです。 .qa { color: #ffffff; /* 文字色 */ font-size: 17px; /* 文字サイズ */ font-weight: bold; /* 文字を太く */ text-align: left; .q { background: linear-gradient(-80deg, #ff65ff, #65ffff); /* グラデーションの背景色 */ border: 2px solid #ff0000; /* 線の太さ 線のタイプ 線の色 */ border-radius: 20px; /* 角を丸く */ height: 60px; padding: 15px 40px 15px 15px; position: relative; cursor: pointer; &:before { position: absolute; content: ""; display: block; width: 10px; height: 2px; background-color: #ffffff; right: 15px; top: 50%; transform: translate(0, -50%); } &:after { position: absolute; content: ""; display: block; width: 10px; height: 2px; background-color: #ffffff; right: 15px; top: 50%; transform: translate(0, -50%) rotate(90deg); } } .q.active { &:after { display: none; } } .a { background-color: #999999; border-radius: 20px; /* 角を丸く */ height: 60px; display: none; padding: 15px; } } 検証したスタイルシートを以下に示します の表示は .qa { color : #ffffff; font-size : 17px; font-weight : bold; text-align : left; } です。 どこをどのようにすれば良いでしょうか?

    • 締切済み
    • CSS
  • W3C Validatorで検証するとbackground-imageが

    W3C Validatorで検証するとbackground-imageが正しくありません。と出てしまいます。なぜでしょうか?ちなみにソースは以下の通りです。 よろしくお願いします。 .menu A{ background-attachment : fixed; background-image : url(../top/botan ao.gif); text-align : center; width : 95px; height : 45px; vertical-align : middle; line-height : 15px; background-repeat : no-repeat; text-decoration : none; color : #e9d161; float : left; padding-top : 5px; font-weight : 600; }

  • CSS backgroundが反映されません

    CSS初心者です。 CSSレイアウトで問題にぶつかりました。 下記CSSをIE6で見るとbodyに書いた 「background-image:url(images/flower.png); 」が反映されません。 IE10では反映されました。 いったい何故でしょうか。。。 調べてみたのですがいまいち分かりませんでした。 よろしくお願いいたします。 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ * { margin:0; padding:0; } body { background-image:url(images/flower.png); background-repeat:no-repeat; background-position:bottom; background-attachment:fixed; background: rgb(#00000); color: rgb(76, 76, 76); } body{ text-align:center; } div#container { background-image:url(images/sora.jpg); background-repeat:no-repeat; box-shadow: 10px 10px 10px rgba(0,0,0,0.4); #000; box-shadow: 10px 10px 10px rgba(0,0,0,0.4); #000; } div#container{ width: 770px; margin: 0 auto; text-align: left; border: 3px solid rgb(228, 225, 219); } .photo{ margin: 0px; padding: 0px; left: 600px; top: 970px; width: 141px; position: absolute; } .photo2{ margin: 0px; padding: 0px; left: 400px; top: 970px; width: 141px; position: absolute; } p { line-height: 2em; font-size: 0.8em; } .p1{ font-weight: bold; letter-spacing: 0.1em; } .h1{ text-align: center; } h1 span { display:none; } h2 span { display:none; } h3 { line-height: 1.2em; padding-top: 2.4em; padding-bottom: 1em; font-size: 1em; font-weight: bold; } h3 { background-image:url(images/h3.png); background-repeat:no-repeat; background-position:0px 35px; padding-right: 40px; padding-left: 30px; } h2 { line-height: 1.3em; padding-top: 1em; padding-bottom: 1em; font-size: 1em; font-weight: bold; } a{ color:#0000ff; font-style:normal; text-decoration:underline; } a:link { color: rgb(90, 120, 255); font-style:normal; text-decoration:underline; } a:visited { color: rgb(165, 188, 255); text-decoration:underline; } a:hover { color:#ff0000; font-style:normal; text-decoration:underline; } acronym { border-bottom-color: currentColor; border-bottom-width: medium; border-bottom-style: none; } #intro { padding: 0px 79px 0px 86px; } #participation p { padding-right: 40px; padding-left: 10px; } #intro { padding-top: 50px; } #preamble p { padding-right: 40px; padding-left: 15px; } #explanation p { padding-right: 40px; padding-left: 15px; } #preamble { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #explanation { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #participation { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #benefits { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #requirements { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #quickSummary p{ padding-right: 40px; padding-left: 10px; } #footer { text-align: center; line-height: 1.5em; padding-top: 10px; padding-bottom: 40px; font-size: 0.9em; } #footer a:link { color: rgb(133, 126, 112); } #footer a:visited { color: rgb(133, 126, 112); } #footer a:hover { color: rgb(133, 126, 112); } #footer a:active { color: rgb(133, 126, 112); }

    • ベストアンサー
    • CSS
  • CSSのボタン作成の崩れ

    winでDreamweaver8で作成しています。 ロールオーバーボタンを作成したのはいいのですが、、、 一番左のボタンをクリックすると一番右のアクティブな状態のボタンが出現してしまいます。 フロートと左にしてます。 何度やり直しても解決できません(><) 宜しくお願い致しますm(_ _)m cssコードは body { font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3", sans-serif; background: #FFFFFF; text-align: center; margin: 0px; padding: 0px; }#wrapper { margin: 0px auto; padding: 0px; height: auto; width: 860px; border-right: 1px solid #F69789; border-bottom: 1px solid #F69789; border-left: 1px solid #F69789; text-align: left; } /*ヘッダ全体コンテナ*/ #header { background: url(images/backheader.gif) no-repeat left top; margin: 0px; padding: 0px; height: 95px; border-bottom: 5px inset #F69789; position: relative; } #header h1 { margin: 0px; padding: 0px; float: left; } /*ヘッダ内タイトルロゴ*/ #header img { margin: 0px; padding: 26px 0px 6px 10px; height: 63px; width: 130px; } /*ヘッダ内ナビ*/ #header ul { font-size: 11px; font-weight: bold; margin: 80px 0px 0px; padding: 0px; color: #666666; float: right; list-style: none; } #header li { display: inline; margin: 0px; padding: 0px 10px 0px 15px; background: url(images/tpo_button.gif) no-repeat left center; } #header li a { text-decoration: none; color: #666666; } #header li a:hover,#header li a:active { color: #990033; text-decoration: underline; } #header #midashi { position: absolute; height: 40px; width: 400px; left: 230px; top: 35px; background: url(images/midashi1.gif) no-repeat; font-size: 9px; } /*メイン*/ #main { margin: 0px; padding: 0px; height: 180px; border-bottom: 1px solid #660000; } #topnavi { margin: 0px; padding: 0px; height: 30px; border-bottom: 1px solid #990033; background: #666666; } #topnavi h2 { margin: 0px; padding: 0px; font-size: 9px; float: left; } #topnavi h2 a { text-decoration: none; display: block; margin: 0px; padding: 0px; height: 30px; } /*1番目のボタン*/ #topnavi h2#tn1 a { background: url(images/butoon1/tb1.gif) no-repeat; width: 130px; } #topnavi h2#tn1 a:hover,#topnavi h2#tn1 a:active { background: url(images/butoon1/tb1_2.gif) no-repeat; } /*2番目のボタン*/ #topnavi h2#tn2 a { background: url(images/butoon1/tb2.gif) no-repeat; width: 130px; } #topnavi h2#tn2 a:hover,#topnavi h2#tn1 a:active { background: url(images/butoon1/tb2_2.gif) no-repeat; } /*3番目のボタン*/ #topnavi h2#tn3 a { background: url(images/butoon1/tb3.gif) no-repeat; width: 130px; } #topnavi h2#tn3 a:hover,#topnavi h2#tn1 a:active { background: url(images/butoon1/tb3_2.gif) no-repeat; } /*4番目のボタン*/ #topnavi h2#tn4 a { background: url(images/butoon1/tb4.gif) no-repeat; width: 130px; } #topnavi h2#tn4 a:hover,#topnavi h2#tn1 a:active { background: url(images/butoon1/tb4_2.gif) no-repeat; } /*5番目のボタン*/ #topnavi h2#tn5 a { background: url(images/butoon1/tb5.gif) no-repeat; width: 130px; } #topnavi h2#tn5 a:hover,#topnavi h2#tn1 a:active { background: url(images/butoon1/tb5_2.gif) no-repeat; } /*6番目のボタン*/ #topnavi h2#tn6 a { background: url(images/butoon1/tb6.gif) no-repeat; width: 210px; } #topnavi h2#tn6 a:hover,#topnavi h2#tn1 a:active { background: url(images/butoon1/tb6_2.gif) no-repeat; } になります。

    • ベストアンサー
    • CSS
  • 見出しの複数行の対応について

    見出しが複数行になった場合の対処法(自動で)をおしえてください  | | AAAAAAAAAAAAAAAAAAAAAA |__________________________ 上記のようなL字?の見出しがあります。(本来は実線) これが複数行になると 下線の下に2行目が来てしまいます。 これを | | AAAAAAAAAAAAAAAAAAAAAA | AAAAAAAAAAAAAAAAAAAAAA |__________________________ とするにはどうすれば良いのでしょうか。 ここのコードは HTML <h3 id="item-2" class="ct_sltext">AAAAAAAAAAAAAAAAAAAA‥‥</h3> CSS .content h2, .content h3 { clear:both; font-weight:normal; margin:0; padding:0; } .content h3 { background:transparent url(../images/midasi_bar.gif) no-repeat scroll left 4px; height:40px; margin-bottom:10px; padding:10px 0 5px; } .content h3.ct_sltext { color: #カラー; font-size:17pt; font-style:italic; padding:0 0 5px 40px; } こんな感じになってます。

    • ベストアンサー
    • HTML
  • CSSのpositonでフッタを下部に固定したのですがIE6でズレてしまう原因が分からないので教えてください

    こんばんは、CSSのpositionで下部にフッタを固定する為に設定したらwinIE6で見るとフッタだけ右にずれてしまいます。 当方Mac、osXで主にドリームウィーバーに手打ちです。safari、frefoxではずれませんでした。ソースを省略すると原因が分からないのでCSSを全部載せます。 アドバイスいただけると大変うれしいです。お願いいたします。 html,body{ text-align:center; margin: 0px; background:#FFFFFF; height:100%; } #countainer{ position: relative; height: 100%; min-height:100%; } #contents { padding-bottom:50px; } #header{ height:106px; background-image: url(img/headbg.gif); background-repeat: repeat-x; } #logo { width: 800px; height: 96px; text-align: left; padding: 10px 0 0 0; margin: auto; background-image: url(img/bg_navi.gif); background-repeat: no-repeat; background-position: 100% 100%; } #logo img{ float: left; } #navi{ width: 600px; float: right; } #navi ul{ margin:75px 11px 0 0; padding:0; } #navi li{ width: 100px; height: 21px; float: right; margin:0; padding:0; list-style-type:none; text-align: center; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; line-height: 100%; background-image: url(img/bg_navi.gif); background-repeat: no-repeat; background-position: 0% 100%; } #navi a:link,#navi a:visited{ color:#635142; padding: 0 0 0 12px; } #navi a:hover{ color:#FF6633; text-decoration:none; } #navi a.s:link,#navi a.s:visited{ color:#B59980; } #main{ width: 800px; margin: auto; text-align:left; font-size:80%; } #main .topimg{ width:500px; float:left; text-align: center; } #main .news{ width:300px; height:300px; float:right; background:url(images/bg_news.gif) no-repeat 0px 20px; } #main .news p{ margin:50px 40px 0px; color: #5D4F41; line-height: 150%; font-size: 12px; } #main .body{ width:550px; float:left; clear:both; } #main .body p{ margin:10px 5px; } #main .menu{ width:183px; float:left; font-size:12px; } #main .tabmenu{ width:250px; float:right; } #main h1 span.jp{ font-size: 12px; letter-spacing: normal; font-family:"MS Pゴシック","Osaka","ヒラギノ角ゴPro"; } #main h2{ margin: 30px 0 5px 0; padding:3px; border-bottom: 4px double #83684F; font-size:180%; color: #333333; clear: both; } #main h3{ margin: 30px 0 5px 0; padding:3px; background-color: #83684F; font-size:120%; color: #FFFFFF; clear: both; } #main th{ padding: 3px 5px; background-color: #F3EBDC; border-bottom:1px solid #83684F; text-align:left; font-weight: normal; color:#A07D5E; } #main a.mail{ padding:5px 0 5px 30px; background:url(images/btn_mail.gif) no-repeat 0px 0px; color: #FF0000; } #main a.mail:hover{ background:url(images/btn_ov_mail.gif) no-repeat 0px 0px; } #main .box{ width:183px; float:left; } #main .box img{ margin:0 8px; filter:chroma(color=#FFFFFF); } #main .box h3{ margin: 0 10px; padding: 3px; font-size:100%; color:#A07D5E; position: relative; top: -10px; background-color: #F3EBDC; } #main .box p{ margin: 0 10px; padding: 0; font-size:10px; top: -5px; position: relative; } #footer{ clear:both; color:#666; font-family: Arial, Helvetica, sans-serif; border-top-width: 3px; border-top-style: solid; border-top-color: #D8D8D8; position: absolute; bottom: 0px; margin:auto; text-align: center; font-size: 75%; height: 30px; width: 100%; } #main .body #mn6 { margin-top: 20px; } /*----------------------------span-*/ span.tel{ font-size:24px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; color:#424242; line-height: 24px; } /*-------------------------------------for any--*/ .clear{ clear:both; line-height:1px; } #main .body p { margin-left: 15px; } #main .topimg { margin-top: 20px; }

    • ベストアンサー
    • Mac
  • IE8での段落のズレについて

    IE7では正常(自分が思うように)に表示してくれますが、 IE8では互換モードにしないと大きなタイトル文字の前に1つ 段落が出来てしまい、2行分のタイトルが4行になってしまい、 タイトル画像からはみ出てしまいます。 (下記の例ですと、「アウトドア」の表示が空白の行の下に来ます。 また、「大好き!」の前にも空白の行があり、文字自体も タイトル画像からずれて表示されてしまいます) 色々チェックしたのですが自分では分からなかったので、どなたか 教えて下さい! <CSS> body {background-color:#000099;} div#box {width: 680px; margin-left:auto; margin-right:auto; background-color:#ffffff; padding-top:10px;} div#header{background-color: #999999;width:660px;height:290px;      background-image: url(./boad.jpg);      background-repeat: repeat; margin-right:auto; margin-left:auto; padding-top:10px; } div#header h1 {font-size: 12px; color:#ffffff;               padding:0px 10px 0px 10px; font-weight:bold;} div#header h2 {font-size:12px; margin-left:20px;           font-weight:bold; color:#ffff00;} div#header h3 {font-size:20px; margin-left:30px;               color:#ffffff;} div#header h4 {font-size:4.5em; color:#dddddd;       font-weight:bold; margin-left:80px; line-height:100%; } div#header h5 {font-size:4.5em; color:#dddddd;           font-weight:bold;margin-left:280px;      line-height:100%; } code.main      {text-align:left; } .p1 {font-size:15px; color:#333333; } div#footer {width: 680px;margin-top: 50px; } address {font-size: 0.75em; text-align: center;          font-style:normal; padding-bottom:20px; color:#cccc00;} <HTML ~head以降> <body> <div id="box"> <div id="header"> <h1>&nbsp;&nbsp;釣り&nbsp;&nbsp;キャンプ&nbsp;&nbsp;車&nbsp;&nbsp;etc&nbsp;&nbsp;</h1> <h2>多趣味な男のこだわり日記</h2> <h4>アウトドア</h4> <h5>大好き!</h5> </div> <p><code class="main p1">   皆さんはどんな趣味をお持ちですか?<br>   私は沢山の趣味を持っています。<br><br>   そのためいくら働いてもお金は溜まりません・・・・・<br>   でも、沢山の趣味を自分なりに楽しむのは<br>   ステキな事だと思っています。</code></p> <div id="footer"> <address>多趣味研究会, All rights reserved.</address> </div> </div> </body> </html> 宜しくお願い致します。

    • ベストアンサー
    • HTML
  • css

    上下2つの画像で角丸にcssでしようと思います。上はこれでいいんですが 下の表示はどうするんでしょうか。 <div id="sub"> <h1>メニュー</h1> <ul> <li><a href="1.html" >123</a></li> <li><a href="2.html" >123</a></li> <li><a href="3.html" >123</a></li> </ul> </div> #sub { float:right; margin-top:5px; width:180px; padding:5px 5px 2px 5px; background-image: url(ue.gif); background-repeat:no-repeat; } #sub h1 { background: url(images/a.gif); color:#333333; font-size:11px; font-weight: normal; padding:5px 20px ; } #sub ul{ padding:0; list-style:none; background-color:#FFFFFF; } #sub li{ margin:0 0 0 0px; border-bottom:1px solid #0000ff; } #sub li a { display:block; padding-left:20px; background:url(images/1.gif) 2% 50% no-repeat; line-height:35px; } わかりましたらよろしくお願いします。

    • ベストアンサー
    • CSS
  • ホームページテンプレートダウンロード

    ホームページのテンプレートをダウンロードしました。 内容は下記のとおりです。 しかしこのままアルファエディットに貼り付けてもイメージ通りになりません。 他にimageフォルダが付いていてgifが4つあったのですが これをどこかに貼り付けなければならないのでしょうか? 教えてください。よろしくお願いします。 @charset "UTF-8"; /* --------------------- * FONTSIZE MODEL * * --------------------- * 63% -> 10pxに相当 * 70% -> 11pxに相当 * 75% -> 12pxに相当 * 82% -> 13pxに相当 * 88% -> 14pxに相当 * 94% -> 15pxに相当 * 100% -> 16pxに相当 * 107% -> 17pxに相当 * 113% -> 18pxに相当 * 119% -> 19pxに相当 * 125% -> 20pxに相当 * --------------------- */ /* ========BASIC======== */ * { font-family:Verdana, Helvetica, sans-serif; color:#333; } body { margin:0; padding:0; line-height:1.6; letter-spacing:1px; background:#EFEFEA; } br { letter-spacing:normal; } a { color:#333; text-decoration:none; } a:hover { color:#DF8713; text-decoration:none; } img { border:0; } h1,h2,h3,h4,h5,h6 { margin:0; } /* ========TEMPLATE LAYOUT======== */ div#top { width:778px; margin:0 auto; border-left:1px solid #ccc; border-right:1px solid #ccc; background:#fff; } div#header { width:774px; margin:0 2px; background:#4f3333; } div#menu { width:774px; margin:0 2px; background:#ccc; } div#contents { clear:both; width:774px; margin:0 2px; padding:10px 0; } div#main { float:left; width:554px; padding:0 5px; } div#sub { float:right; width:200px; padding-right:5px; } div#footer { clear:both; width:774px; margin:0 2px; } /* 回り込み解除 */ div#contents:after { content:""; display:block; height:0; clear:both; visibility:hidden; } /* ========HEADER CUSTOMIZE======== */ div#header h1 { margin:0; padding:0 10px; font-size:150%;/* 24px相当 */ color:#fff; line-height:80px; } div#header h1 a { color:#fff; } div#header h1 a:hover { color:#DF8713; } /* ========MENU CUSTOMIZE======== */ div#menu ul { margin:0; padding:0; } div#menu li { float:left; font-size:82%;/* 13px相当 */ color:#333; list-style-type:none; } div#menu li a{ display:block; margin-right:1px; padding:0 20px; color:#fff; line-height:2.5; background:#9C6565; } div#menu li a:hover{ color:#fff; background:#DF8713; } /* 回り込み解除 */ div#menu ul:after{ content:""; display:block; height:0; clear:both; visibility:hidden; } /* ========MAIN CONTENTS CUSTOMIZE======== */ div#main a { color:#DF8713; } div#main a:hover { border:0; color:#DF8713; border-bottom:1px solid #DF8713; } div#main h2 { margin-bottom:3px; padding:2px 2px 2px 5px; font-size:94%;/* 15px相当 */ font-weight:bold; border-left:5px solid #4E3333; background:url(images/bg_h2.gif); } div#main h3 { margin-bottom:2px; padding-left:25px; font-size:82%;/* 13px相当 */ background:url("images/bg_h3.gif") 0 50% no-repeat; } div#main p{ margin:0 0 1em 0; font-size:82%;/* 13px相当 */ } /* ========SUB CONTENTS CUSTOMIZE======== */ div#sub .section { margin-bottom:10px; padding:10px; background:#DEDDD0; } div#sub h2 { padding-bottom:5px; text-align:center; font-size:94%;/* 15px相当 */ font-weight:bold; color:#fff; border-bottom:1px solid #93847B; } div#sub ul { margin:0; padding:5px 0 0 10px; } div#sub li { margin:0; padding-left:12px; font-size:82%;/* 13px相当 */ background:#DEDDD0 url("images/bg_list.gif") 0 50% no-repeat; list-style:none; } /* ========TOTOP CUSTOMIZE========= */ div#totop { padding:10px; text-align:right; font-size:82%;/* 13px相当 */ } div#totop a{ padding:0 0 0 12px; background:url("images/bg_totop.gif") 0 60% no-repeat; } /* ========FOOTER CUSTOMIZE======== */ address{ padding:20px 0; text-align:center; font-style:normal; font-size:75%;/* 12px相当 */ color:#333; border-top:1px solid #ccc; }

  • IE6以下でメニューリストの下に隙間が入ります

    お世話になってます。 あるサイトをCSSで作製しているのですが、メニューリストの下にIE6以下だと余計な余白?が入ります。 他のブラウザやIE7では大丈夫です。 http://takeoff-agp.beautypal.net/sample/test/test.html ここにサンプルを載せました。 CSSは・・・ * { font-style: normal; border: 0; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,p { margin: 0px; padding: 0px; } body { text-align: left; color: #505050; background: #FFFFFF; font-family: "Meiryo", "ヒラギノ角ゴ Pro W3", "MS Pゴシック", Osaka, sans-serif; font-size: 12px; line-height: 1.7; } #wrapper { text-align: left; width: 880px; margin-right: auto; margin-left: auto; background-repeat: repeat-y; background-image: url(../images/bg-wrapper.gif); } #header { height: 110px; width: 860px; background-image: url(../images/bg-header.gif); background-repeat: no-repeat; margin-right: 10px; margin-left: 10px; border-bottom: 3px groove #999999; } #header h1 { margin-left: 10px; } #topnavi { height: 30px; width: 860px; border-bottom: 1px solid #990033; border-top: 1px solid #990033; margin-right: 10px; margin-left: 10px; } #topnavi ul { list-style: none; } #topnavi ul li { float: left; height: 30px; } #topnavi ul li a { float: left; height: 30px; } です。 javascriptでロールオーバーしています。 <a>にfloat: left;とheight: 30px;を入れてる為、二番目のボタンに<a>を入れると直ります。 ですが、現在いるページに<a>をつけるのはおかしいですよね?^^; 分かりずらい文章で大変申し訳ございませんが、とても困っているので、宜しくお願いします。

    • ベストアンサー
    • HTML

専門家に質問してみよう