- 締切済み
IEとFirefoxで表示が違う
初歩的な質問で申し訳ありません。困っています。 どなたか、教えて頂けませんか？ ↓のＣＳＳでIE7では、ちゃんとテキストがセンターに表示されていますが、Firefoxで見ると左に寄っています。 どうしたらいいのでしょうか？ .menu{/*メニュー外枠*/ padding : 0px; margin : 0px 0px 30px 50px; border-width : 1px 0px; border-style : solid; border-color : #3d8f3d; } .menu2{/*メニュー*/ padding : 0px; margin : 2px 8px; letter-spacing : 1px; font-size : 13px; font-family : "Times New Roman",Verdana,"ＭＳ Ｐゴシック",Osaka,monospace; text-align : center; } よろしくお願いいたします。
- bananamamy
- お礼率50% (1/2)
- CSS
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- -Kei
- ベストアンサー率50% (151/299)
tableで囲っているのが原因です。 <div class="menu"> <!--メニュー 始--> <div class="menu2"> <a href="#">Profile</a> <a href="#">Diary</a> <a href="#">Blog</a> <a href="#">BBS</a> <a href="#">Hobby</a> <a href="#">Essay</a> </div> <!--メニュー 終--> </div> 間隔が狭すぎる場合はCSSに .menu a{ margin:0px 10px; } を追加してください。 適当にやっただけなので要調整 CSSは整理したらもうちょっとシンプルになるかと思います。
- -Kei
- ベストアンサー率50% (151/299)
IE7、Firefox2同じように見えますよ。 HTMLは↓でいいんですよね？ <!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=utf-8" /> <style type="text/css"> <!-- .menu{/*メニュー外枠*/ padding : 0px; margin : 0px 0px 30px 50px; border-width : 1px 0px; border-style : solid; border-color : #3d8f3d; } .menu2{/*メニュー*/ padding : 0px; margin : 2px 8px; letter-spacing : 1px; font-size : 13px; font-family : "Times New Roman",Verdana,"ＭＳ Ｐゴシック",Osaka,monospace; text-align : center; } --> </style> </head><body> <div class="menu"><div class="menu2">TEST</div></div> </body></html>
補足
-Keiさま ありがとうございました。 ご回答のＨＴＭＬでは、同じ状態で見られました。 お手数をお掛けしますが、ＨＴＭＬを全て貼り付けますので、見て頂けないでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"><head> <meta http-equiv="content-type" content="text/html;charset=Shift_JIS"> <META http-equiv="Content-Script-Type" content="text/javascript"> <META http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rev="made" href="mailto:**********@mail.goo.ne.jp/"> <title>***************</title> <style type="text/css"> <!-- BODY,TD,DIV{/*全体の文字*/ font-size : 14px; font-family : Verdana,"ＭＳ Ｐゴシック",Osaka,monospace; color : #555555; } BODY{/*背景素材*/ background-image : url(rose_green_02-2.jpg); background-repeat : no-repeat; background-attachment : fixed; background-position : 100% 100%; } .title{/*サイト名*/ font-size : 26px; padding : 0px; margin : 80px 0px 0px 80px; letter-spacing : 3px; font-family : "Times New Roman",Verdana,"ＭＳ Ｐゴシック",Osaka,monospace; color : #3d8f3d; } .title2{/*小見出し*/ font-size : 16px; font-weight : bold; letter-spacing : 1px; padding : 0px; margin : 0px 0px 10px 0px; font-family : "Times New Roman",Verdana,"ＭＳ Ｐゴシック",Osaka,monospace; } .menu{/*メニュー外枠*/ padding : 0px; margin : 0px 0px 30px 50px; border-width : 1px 0px; border-style : solid; border-color : #68d168; text-align : center; } .menu2{/*メニュー*/ padding : 0px; margin : 2px 8px; letter-spacing : 1px; font-size : 13px; font-family : "Times New Roman",Verdana,"ＭＳ Ｐゴシック",Osaka,monospace; color : #3d8f3d; text-align : center; } .box1{/*メイン外枠（ラインなし）*/ padding : 10px; margin : 10px 10px 30px 50px; border-width : 4px 4px; border-style : solid; border-color : #68d168; width : 500px; text-align : left; } .box2{/*コメント枠（ラインなし）*/ padding : 10px; margin : 10px 10px 30px 50px; border-width : 2px 2px; border-style : solid; border-color : #68d168; width : 400px; line-height : 19px; } A{/*リンクしている文字*/ color : #3d8f3d; text-decoration : none; } A:HOVER{/*マウスが触れた時*/ color : #c4ad8c; text-decoration : none; } body{/*スクロールバー*/ scrollbar-3dlight-color: #ffffff; scrollbar-arrow-color: #000000; scrollbar-darkshadow-color: #ffffff; scrollbar-face-color: #ffffff; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color: #ffffff; scrollbar-track-color: #ffffff; } --> </style> </head> <body> <!--サイト名 始--> <div class="title">*********************</div> <!--サイト名 終--> <!--メニュー外枠 始--> <div class="menu"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <!--メニュー 始--> <td><div class="menu2"><a href="#">Profile</a></div></td> <td><div class="menu2"><a href="#">Diary</a></div></td> <td><div class="menu2"><a href="#">Blog</a></div></td> <td><div class="menu2"><a href="#">BBS</a></div></td> <td><div class="menu2"><a href="#">Hobby</a></div></td> <td><div class="menu2"><a href="#">Essay</a></div></td> <!--メニュー 終--> </tr> </table> </div> <!--メニュー外枠 終--> <div align="center"> <!--メイン外枠 始--> <div class="box1"> <!--（1）始--> <div class="title2">******************</div> <div class="box2"> ************************ </div> <!--（1）終--> <!--（2）始--> <div class="title2">***************</div> <div class="box2"> ************************ </div> <!--（2）終--> <!--（3）始--> <div class="title2">**************</div> <div class="box2"> ************************ </div> <!--（3）終--> <!--（4）始--> <div class="title2">**************</div> <div class="box2">*****************<br> ********************* </div> <!--（4）終--> </div> <!--メイン外枠 終--> </div> </body> </html> 何度も申し訳ありません・・・・。
お礼
-Keiさま 教えて頂いた通りに直したところ、Firefoxでもちゃんと見られました！！ 本当に助かりました。 こんな素人相手に、ご丁寧に教えて頂きありがとうございました。 勉強不足を痛感しています。理解出来るようになるのは、いつのことやら・・・