CSS　IEとfirefoxおなじレイアウトにしたいのですが

締切済

質問者：noname#80839
質問日時：2009/03/24 16:02
回答数：3件

初心者です。↑質問ですが
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;
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： abril
回答日時：2009/03/24 18:09

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><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ですよ。

でもおそらく質問者様の望んでいるのはこういうレイアウトではないんだろうなぁ、という気はします（色々とヘンだから）。
手っ取り早いのはレイアウトイメージを添付して頂くことなのですが、できなければ、上記をそのままコピペして試してみて、「こうじゃない」という箇所を具体的に補足して下さい。

- 0
- 件

通報する

No.2

回答者： noname#83877
回答日時：2009/03/24 17:55

・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を利用して指定する方が安全だと思います。

- 0
- 件

通報する

No.1

回答者： abril
回答日時：2009/03/24 16:15

これは多分、

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;"の一行で済みます。

これはトラブルの本質にはあまり関わりないかと思いますが、とりあえず指摘しておきます。
とにかく、もっと詳細な情報を提供して下さい。

この回答への補足

すみません。
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-Transitio …
<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><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>