以下のソース
<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です。
No.1
38
0
20pt
横100%は避けた方がいいようですね 98%か95%位にしてみてください また#headerもmargin: 0px;にした方がいいと思います
もしheaderを窓全体で色付けしたい場合はbodyの背景で配置した方がいいと思います
No.2
20320
20pt
absoluteでなくてもよいのならmarginを使った右寄せにしてみてはどうでしょうか？
#colR{
margin:0;
margin-left:auto;
padding:0;
width:170px;
text-align:left;
background-color:Fuchsia;
}
No.3
3020
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>
でいかがでしょうか。
教えていただいてありがとうございます。
確かにボーダーがあるみたいですが解消しませんでした・・・
ウインドサイズを小さくすると余白が増えるみたいで謎です。解消策はないんでしょうかね。
izayoimizukiさん前にも教えていただきました。
本当にありがとうございます。
そして、他のみなさん、ありがとうございます。
今回のサイトでは左マージンAUTOは出来ないので
困ってしまいます。
No.4
20320
20pt
２回目です。前回はURL提示だけだったのですが、そのなかで書かれていた方法はいかかがでしょうか？環境がないので確かめていませんが。
#colR{
～省略～
right:15px;
margin-right:-15px;
}
/* 右端から15pxの位置に配置し、右マージンを-15pxにする。 */
ありがとうございます。
すいません。コメントせずに次の質問を開いてしまったもので。コメントできませんでした。
本当に教えていただいてありがとうございます。
試してみたのですが、はじめ読み込んで来たときはスクロールバーは消えてますが、ウインドを一度、小さくするとマージンが発生してしまいます。15pxだけではなく、何度もウインドをリサイズ（小さく）するとマージンが大きくなるみたいです・・・
原因はまったく分かりません。
絶対配置ではなくマージンAUTOは大丈夫です。マージンは出ませんがこちらの制作環境ではこの方法は残念ながら使えません。
でも大変勉強になりました。ありがとうございました。
No.5
40
20pt
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html
Another HTML-lint gateway
ブラウザ依存の問題を完璧に処理するのは、努力の割に成果が見合わない……これが私の持論です（汗）。
あるブラウザだと期待どおりに動くのに、違うブラウザだとそうはならない、といった現象の場合は文法に問題があるのかもしれませんし、ブラウザのバグかもしれません。
それはさておき、今回の場合は<div id=”header”>にもスタイルシートでwidth=”100%”を指定したらうまく行きそうな気がします。私はwindowsなので実験できませんでしたが。
おそらく右の余白というのは、bodyにマージンではなく、ほかの属性（divあるいはimgかも）のマージンなのでは？
divでだめなら、imgも疑ってみては？
はい。確かにおっしゃる通りですね。
ホントに割に合わない場合が多いですね。
hedarに100%は試してみましたがだめでした。
他に凝ってみます。ありがとうございます!!
No.6
120
20pt
http://blog.livedoor.jp/masalog/archives/2389775.html
Mac IE 5 対策終了かと: マサログのトビラ ver.1.00
[１]
Mac IE5の右マージン対策について、下記のサイトが参考になるのではないでしょうか。上の方と同じ-15pxの手法です。ただし、やはり「一度動かすと崩れる」とあるようですが・・・。
[２]
あるいは、下記のブラウザ別ハックを使った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>
1
2
44
44
教えていただいてありがとうございます。
実際にはヘッダー部分には100pxほどの画像が非左寄せではいります。ウインドいっぱいに見せるたheaderの背景画像をリピートさせてます。
wrapperは100%を取っても同じみたいです。
右のボックスを右端に絶対配置したらスクロールバーが出てしまいます。ヘッダーは影響していないような感じがするのですが・・・画像の幅80%でも解消しないんです。