掲示板/スタイルシート質問板/過去ログ/一覧/ IEとFxで表示が変わる？（ボックスの大きさ）

0 名前： S.K. ： 2007/03/04（日） 12:07 ID:TOyufVbb sub-t1

ボックスにcssで最小幅と最大幅を指定し、
paddingも指定したら、
IEでは、画面に入りきったのですが、
Fxでは、右側にパディングで指定した幅がはみ出して、
横スクロールバーが表示されてしまいます。
コレをどちらのブラウザでも、はみ出さないようにすることはできませんか？
下のように指定したのですが・・・。

.mein{
max-width:1200px;
min-width:400px;
padding:0px 0px 0px 110px;}

1 名前： key-child ： 2007/03/04（日） 12:07 ID:8GUFlW2K sub-DR: 現象が再現されません。
再現されるソースをお願いします。

2 名前： S.K. ： 2007/03/04（日） 12:07 ID:TOyufVbb sub-t1

すみません。訂正します。
下のようにすると、表示が変わってしまうのです。
ひとつのボックスだけならば、うまくいくのですが。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>Title</title>
<STYLE TYPE="text/css"> 
<!--
BODY{
background-color:#000000;
scrollbar-face-color:#000000;
scrollbar-track-color:#000000;
scrollbar-arrow-color:#A9A9A9;
scrollbar-highlight-color:#000000;
scrollbar-3dlight-color:#000000;
scrollbar-shadow-color:#A9A9A9;
scrollbar-darkshadow-color:#000000;
font-size:100%;
color:#F0F8FF;
border:0px;
margin:0px;}
.a1{
width:100%;
height:100%;
max-height:850px;
min-height:250px;
z-index:1;
border-width:0px 0px 2px;
border-color:#ffffff;
border-style:outset;}
.a2{
width:100%;
height:100%;
max-height:850px;
min-height:250px;
position:absolute;
top:0px;
left:0px;
z-index:9;}
.a3{
background-color:#000000;
width:100px;
height:100%;
max-height:700px;
min-height:200px;
position:absolute;
top:0px;
left:0px;
border-width:0px 2px 0px 0px;
border-color:#ffffff;
border-style:outset;
z-index:8;}
.a4{
width:100%;
height:99%;
max-height:700px;
min-height:200px;
position:absolute;
top:0px;
overflow:auto;
padding-left:100px;
margin-top:0px;
z-index:6;}
.a5{
width:100%;
height:100%;}
.a6{
width:100%;
height:100px;
position:absolute;
bottom:0px;
left:0px;}
.a7{
width:100%;
height:100%;}
-->
</STYLE>
</head>
<div class="a1"><div class="a2">
<div class="a3">
内容<div class="a6"><br>
内容
</div></div>
<div class="a4">
<div class="a5">内容
</div><div class="a7">内容
</div></div></div></div>
</html>

3 名前：元帥： 2007/03/04（日） 12:07 ［URL］ ID:Azc7Go/r sub-bK: >>1
まさにどこでも配置モードの手書きバージョンといった所です。
それは、まぁ、ともかくとして、クラスa4,a5,a7のwidth:100%;が原因です。
この場合、bodyの横幅に対して100%確保されますから、ページの横幅は100%+100pxとなり、横スクロールバーの出現は必然です。
body要素の記述は見当たりませんが、存在するものと、ブラウザは解釈しているのでしょう。
突っ込み所は他にもあるのですが、width:100%;を他の適当な値にしてやれば、一応要望は満たせます。

このような段組ページを作る際、floatが用いられます。
下記サイトを参考になると思います。
http://www.geocities.jp/multi_column/
http://css.uka-p.com/

「どこでも配置モード」の非は検索すればいくらでも見つかりますので、参考にして下さい。
手段そのものは非でも何でもなく、むしろ奨励されて然るべきものですが、生成されるコードが問題なのです。

尚、文法チェックはこちらを。
http://openlab.ring.gr.jp/k16/htmllint/htmllinte.html
http://jigsaw.w3.org/css-validator/

4 名前： S.K. ： 2007/03/04（日） 12:07 ID:TOyufVbb sub-t1: 解説ありがとうございます。
floatで挑戦してみます。

文法もおかしかったですね。

5 名前：元帥： 2007/03/04（日） 12:07 ［URL］ ID:xIQujz8/ sub-bK: >>3

今更ですが、アンカー先が間違っていました。
誤：>>1
正：>>2

失礼致しました。