CSSの事について教えてください。

以下のソース
<style type=”text/css”>
body{margin:0px; padding:0px;}
#wrapper{width: 100%; position: relative; margin: 0px; padding: 0px; background-color: transparet;}
#header{width: 100%; background-color: transparent;}
#colR{margin: 0px; padding: 0px; widh: 170px; position: absolute; top: 0px; right: 0px; text-align: left;
background-color: Fuchsia;
}
</style>
</head>
<body>
<div id=”header”>
<img src=”images/navi.gif” width=”100%” height=”70”></div>
<div id=”wrapper”>
<div id=”colR”>
右のボックス
</div>
</div>
</body>
</html>
をmac IE5で表示すると右にどうしても余白が出来るのです。(横スクロールが出ます)
画面いっぱいにマージン無しで表示したいのですが。どなたか教えていただけませんか?WIN IE6 モジラはOKです。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2005/03/29 01:07:54
  • 終了:--

回答(6件)

id:KIROW No.1

KIROW回答回数38ベストアンサー獲得回数02005/03/29 01:24:00

ポイント20pt

横100%は避けた方がいいようですね 98%か95%位にしてみてください また#headerもmargin: 0px;にした方がいいと思います

もしheaderを窓全体で色付けしたい場合はbodyの背景で配置した方がいいと思います

id:moriamko44728

教えていただいてありがとうございます。

実際にはヘッダー部分には100pxほどの画像が非左寄せではいります。ウインドいっぱいに見せるたheaderの背景画像をリピートさせてます。

wrapperは100%を取っても同じみたいです。

右のボックスを右端に絶対配置したらスクロールバーが出てしまいます。ヘッダーは影響していないような感じがするのですが・・・画像の幅80%でも解消しないんです。

2005/03/29 01:40:27
id:Mars No.2

Mars回答回数203ベストアンサー獲得回数202005/03/29 06:38:28

ポイント20pt

absoluteでなくてもよいのならmarginを使った右寄せにしてみてはどうでしょうか?

#colR{

margin:0;

margin-left:auto;

padding:0;

width:170px;

text-align:left;

background-color:Fuchsia;

}

id:izayoimizuki No.3

izayoimizuki回答回数302ベストアンサー獲得回数02005/03/29 07:54:43

ポイント20pt

確かIEのウィンドウ枠の一部はボーダーで

描画されているのでそのあたりが原因では?

あるいはHTMLにMarginやPaddingが

ついているのかもしれません。

というわけでとりあえず

<?xml version=”1.0” encoding=”UTF-8”?>

<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.1//EN” ”http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<style type=”text/css”>

html,body{border:#fff 0 solid;margin:0px;padding:0px;}

#wrapper{width:100%;position:relative;margin:0px;padding:0px;}

#header{width:100%;margin:0px;padding:0px;}

#colR{margin:0px;padding:0px;width:170px;position:absolute;top:0px;right:0px;background-color:#f0f;}

</style>

</head>

<body>

<div id=”header”>

<img src=”images/navi.gif” width=”100%” height=”70” /></div>

<div id=”wrapper”>

<div id=”colR”>

右のボックス

</div>

</div>

</body>

</html>

でいかがでしょうか。

id:moriamko44728

教えていただいてありがとうございます。

確かにボーダーがあるみたいですが解消しませんでした・・・

ウインドサイズを小さくすると余白が増えるみたいで謎です。解消策はないんでしょうかね。

izayoimizukiさん前にも教えていただきました。

本当にありがとうございます。

そして、他のみなさん、ありがとうございます。

今回のサイトでは左マージンAUTOは出来ないので

困ってしまいます。

2005/03/29 11:04:16
id:Mars No.4

Mars回答回数203ベストアンサー獲得回数202005/03/29 16:52:41

ポイント20pt

2回目です。前回はURL提示だけだったのですが、そのなかで書かれていた方法はいかかがでしょうか?環境がないので確かめていませんが。


#colR{

~省略~

right:15px;

margin-right:-15px;

}

/* 右端から15pxの位置に配置し、右マージンを-15pxにする。 */

id:moriamko44728

ありがとうございます。

すいません。コメントせずに次の質問を開いてしまったもので。コメントできませんでした。

本当に教えていただいてありがとうございます。

試してみたのですが、はじめ読み込んで来たときはスクロールバーは消えてますが、ウインドを一度、小さくするとマージンが発生してしまいます。15pxだけではなく、何度もウインドをリサイズ(小さく)するとマージンが大きくなるみたいです・・・

原因はまったく分かりません。

絶対配置ではなくマージンAUTOは大丈夫です。マージンは出ませんがこちらの制作環境ではこの方法は残念ながら使えません。

でも大変勉強になりました。ありがとうございました。

2005/03/29 22:13:37
id:tarou-af No.5

tarou-af回答回数4ベストアンサー獲得回数02005/03/31 22:33:19

ポイント20pt

ブラウザ依存の問題を完璧に処理するのは、努力の割に成果が見合わない……これが私の持論です(汗)。

あるブラウザだと期待どおりに動くのに、違うブラウザだとそうはならない、といった現象の場合は文法に問題があるのかもしれませんし、ブラウザのバグかもしれません。


それはさておき、今回の場合は<div id=”header”>にもスタイルシートでwidth=”100%”を指定したらうまく行きそうな気がします。私はwindowsなので実験できませんでしたが。

おそらく右の余白というのは、bodyにマージンではなく、ほかの属性(divあるいはimgかも)のマージンなのでは?

divでだめなら、imgも疑ってみては?

id:moriamko44728

はい。確かにおっしゃる通りですね。

ホントに割に合わない場合が多いですね。

hedarに100%は試してみましたがだめでした。

他に凝ってみます。ありがとうございます!!

2005/04/01 00:30:12
id:y_asai No.6

y_asai回答回数12ベストアンサー獲得回数02005/03/31 23:26:31

ポイント20pt

http://blog.livedoor.jp/masalog/archives/2389775.html

Mac IE 5 対策終了かと: マサログのトビラ ver.1.00

[1]

Mac IE5の右マージン対策について、下記のサイトが参考になるのではないでしょうか。上の方と同じ-15pxの手法です。ただし、やはり「一度動かすと崩れる」とあるようですが・・・。


[2]

あるいは、下記のブラウザ別ハックを使ったCSSの書き方ではいかがでしょうか?環境がありませんので試せず申し訳ないのですが、css-validatorでは合格しました。よかったら試してみてください。


<style type=”text/css”>

body{margin:0px; padding:0px;}

#wrapper{width: 100%; position: relative; margin: 0px; padding: 0px; background-color: transparent;}

#header{width: 100%; background-color: transparent;}


#colR{margin: 0px; padding: 0px; position: absolute; top: 0px; right: 0px; text-align: left; background-color: Fuchsia; width: 170px;

voice-family: ”¥”}¥””;

voice-family:inherit;

width:170px;

}

html>body #colR {

width: 170px;}


</style>

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません