人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: moriamko44728
●カテゴリ:ウェブ制作
✍キーワード:absolute background-color BODY CSS IE6
○ 状態 :終了
└ 回答数 : 6/6件

▽最新の回答へ

1 ● KIROW
●20ポイント

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

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

◎質問者からの返答

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

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

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

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


2 ● Mars
●20ポイント

http://cgi2.html.ne.jp/~n_1_2_3/ie5cssbugsj.html#margin-hiddenma...

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

#colR{

margin:0;

margin-left:auto;

padding:0;

width:170px;

text-align:left;

background-color:Fuchsia;

}


3 ● izayoimizuki
●20ポイント

確か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は出来ないので

困ってしまいます。


4 ● Mars
●20ポイント

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


#colR{

?省略?

right:15px;

margin-right:-15px;

}

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

◎質問者からの返答

ありがとうございます。

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

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

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

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

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

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


5 ● tarou-af
●20ポイント

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%は試してみましたがだめでした。

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


1-5件表示/6件
4.前の5件|次5件6.
関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ