- 締切済み
CSS IEとfirefoxおなじレイアウトにしたいのですが
初心者です。↑質問ですが IEでレイアウトはみれてもfirefoxでは崩れてしまいそれの 対処で困ってしまっています。 どなたかアドバイスください。 ↓のCSSなのですが、途中混乱したままの投稿となってしまっていますが おわかりなられるかた助けてください！ ロゴがメイン画像にのっかったりと崩れがたえません。 body{ margin-top: 60px; padding: auto; background-color: #000000; background-image: url(../image/back.gif); color: #000000; cursor: crosshair; } P{ margin: 0; } h1{ font-family: serif; font-size: 5pt; color: #000000; } /*imgDIV↓*/ #lightbox{ width: 100%; z-index: center; text-align: center; background-repeat: no-repeat; } /*toplogo*/ #wrapper{ position: relative; width: 100%; margin: auto; margin-bottom: 20px; margin-left: auto; margin-right: auto; } #logo{ padding-top: 50px 50px 50px 50px; position: absolute; left: 410px; } /*グローバルナビ*/ #hako { margin-top: 150px; line-height:50px; padding-left: 900px; } #hako li { display:inline; list-style:none; padding-right:12px; float: left; background: url(../image/bpin.gif) left top no-repeat; line-height: 12px; padding-left: 17px; } #hako li{ font-family: DejaVuSans; font-size: 12px; } #hako li a { color:#C0C0C0; text-decoration:none; border-bottom:solid 2px #ADABAE; } #hako li a:hover { color:#FFFF66; border-bottom:solid 1px #CC0000; }
- HTML
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- abril
- ベストアンサー率69% (388/560)
ANo.1です。 うーん…ソースを見ましたけど、あのままだとIEで見ようがFirefoxで見ようが、へんてこなレイアウトになっていますし、CSSの方も混乱を極めているので「質問者様が本当に実現したいレイアウト」のイメージが今一つわかりかねますね。 とりあえず、CSSの指定から明らかにおかしなところ・矛盾しているところだけを取り除いて修正を加えた感じだと、以下のレイアウトでIEもFirefoxも表示結果がほぼ同じにはなりますが… ---------------------------------------------------------------------- 【HTML】 ---------------------------------------------------------------------- （省略） <body> <h1>ppppppppppppp</h1> <div id="wrapper"> <h1 id="logo"><img src="image/000.gif" alt="000.gif(3955 byte)" width="300" height="100" /></h1> <!-- ナビゲーション --> <ul id="hako"> <li><a href="http://www.....co.jp">HOME</a></li> <li><a href="http://www.....co.jp/company.html">COMPANY</a></li> <li><a href="mailto:info@m....co.jp">CONTACT</a></li> </ul> </div> <div id="lightbox"><img src="image/topp.jpg" alt="topp.jpg(107403 byte)" width="800" height="457" /></div> </body> </html> ---------------------------------------------------------------------- 【CSS】 ---------------------------------------------------------------------- body { margin-top: 60px; background: url(../image/back.gif) #000000; color: #000000; cursor: crosshair; } p { margin: 0; } h1 { margin: 0; font-family: serif; font-size: 5pt; color: #000000; } /*imgDIV↓*/ #lightbox { width: 100%; text-align: center; } /*toplogo*/ #wrapper { width: 100%; margin-bottom: 20px; } #logo { margin: 0 0 50px 410px; } /*グローバルナビ*/ #hako { list-style: none; margin: 150px 0 0 900px; padding: 0; line-height: 50px; } #hako li { margin: 0; padding: 0 12px 0 17px; line-height: 12px; background: url(../image/bpin.gif) left top no-repeat; font-family: DejaVuSans; font-size: 12px; } #hako li a { color: #c0c0c0; text-decoration: none; border-bottom: solid 2px #adabae; } #hako li a:hover { color: #ffff66; border-bottom: solid 1px #cc0000; } ---------------------------------------------------------------------- ※実現したいレイアウトになっていないと思われるので修正点の細かい解説は今の時点では省きます。 ANo.2様のご指摘の点などを参考にされて下さい。でも、現在のh1の指定は明らかにスパム行為（極端に小さいフォントサイズにして前景色と背景色を同じにして不可視状態にしている）なのでNGですよ。 でもおそらく質問者様の望んでいるのはこういうレイアウトではないんだろうなぁ、という気はします（色々とヘンだから）。 手っ取り早いのはレイアウトイメージを添付して頂くことなのですが、できなければ、上記をそのままコピペして試してみて、「こうじゃない」という箇所を具体的に補足して下さい。
・htmlとbodyにはmarginを指定しないほうがいいです。 ・paddingにはautoという値はありません。 ・floatを指定したらwidthを指定してください。 ・font-sizeをpxやptで指定するのはやめた方がいいです。%を使ってください。 ・position:absolute;を指定したらwidthを指定してください レイアウトをコントロールするために、cssの一番始めにmarginとpaddingを0に指定すると楽ですよ。 html,body,p.h1,h2 { margin:0; padding:0; } 最後の #hako li a { color:#C0C0C0; text-decoration:none; border-bottom:solid 2px #ADABAE; } の指定は問題が起こる可能性があります。 :hover等で変更したいプロパティは:linkや:visitedを利用して指定する方が安全だと思います。
- abril
- ベストアンサー率69% (388/560)
これは多分、http://oshiete1.goo.ne.jp/qa4823199.html の質問の続きなのだと思いますが。 トラブルの説明とセレクタのネーミングからある程度の想像はできても、(X)HTMLの方のソースもある程度公開して頂かないと…どういうマークアップに対してスタイルが指定されているのかわかりませんので。 ただ、CSSだけを単体で見た今の時点でも「？」な指定がいくつかありますね。 z-index: center; →z-indexの値は整数値（0,1,2…）しかない筈ですが。 padding-top: 50px 50px 50px 50px; →4つ値があるところ見ると本当は上下左右全部に50pxの余白を与えたいのでは？それなら正しくは"padding: 50px;"です。 margin: auto; margin-bottom: 20px; margin-left: auto; margin-right: auto; →間違いじゃないですけど、無駄な繰り返し指定が多いですね。同じ事は"margin: auto auto 20px auto;"の一行で済みます。 これはトラブルの本質にはあまり関わりないかと思いますが、とりあえず指摘しておきます。 とにかく、もっと詳細な情報を提供して下さい。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_4_thumbnail_img_sm.png)
補足
すみません。 HTMLのソースはこちらです。 <?xml version="1.0" encoding="utf-8"?> <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-style-type" content="text/css" /> <title>museo international</title> <link rel="stylesheet" type="text/css" href="css/index.css" media="screen, print" /> <link rel="HOME" href="http://www.....co.jp" /> <link rel="NEXT" href="http://www.....jp/company.html" /> <link rev="made" href="mailto:info@...co.jp" /> </head> <body> <h1>ppppppppppppp</h1> <div id="wrapper"> <h1 id="logo"><img src="image/000.gif" alt="000.gif(3955 byte)" width="300" height="100" /></h1> <!-- ナビゲーション --> <ul id="hako"> <li><a href="http://www.....co.jp">HOME</a></li> <li><a href="http://www.....co.jp/company.html">COMPANY</a></li> <li><a href="mailto:info@m....co.jp">CONTACT</a></li> </ul> </div> <div id="lightbox"><img src="image/topp.jpg" alt="topp.jpg(107403 byte)" width="800" height="457" /></div> </body> </html>