Internet Explorerの文字のサイズ変更

[新着] Webテンプレートを仮オープンしました

0   名前： ジベル ： 2007/02/16（金） 11:05  ID:AgNZ/TOR sub-.G
Internet Explorer（6）の文字のサイズ変更すると指定したボックスサイズの高さが拡大縮小してしまうため、文字のサイズ変更を行っても指定したサイズを固定したいのですが…

詳しく説明しますとヘッダーに画像、メニューにも画像を配置し、画像と画像がつながっているとします。（下のコードは画像などは省いています）
その場合に、文字のサイズ変更をすると隙間ができてしまうといった様な感じです。
floatは、必ず使用したいのでfloatを残したまま画像を固定する方法を教えていただきたいと思います。よろしくお願いします。

html
省略
<body>

<div id="header">
</div>

<div id="menu">
</div>


</body>
省略

css
#header {
float: left;
height: 20px;
width: 700px;
background-color: #CCCCCC;
}

#menu {
clear: left;
height: 20px;
width: 700px;
background-color: #CCCCCC;
}
1   名前： K+S ： 2007/02/16（金） 11:05  ID:nROqylMa sub-YS
理想とされる構成が見えてこないのですが。
#headerと#menuに対するフロートは何のためですか？
画像についても全く検討がつきません。
2   名前： ジベル ： 2007/02/16（金） 11:05  ID:AgNZ/TOR sub-.G
<div id="header">にはいくつか画像を配置したいためです。そのため、フロートする必要があります。メニューは左の位置に配置したいため、フロートを解除しています。
理想とされるイメージがわかり辛いかもしれませんが、このような場合に隙間を無くすことについてどうしても知りたいのですが…
3   名前： K+S ： 2007/02/16（金） 11:05  ID:nROqylMa sub-YS
>>1
> #headerと#menuに対するフロートは何のためですか？
#menuに対してはフロートしていませんでしたね。

>>2
私の力不足かもしれませんが、考えられている構成が把握できません。
可能であれば画像も含めたHTML及びCSSソース、或いはページそのものを提示していただけませんか。
4   名前： ジベル ： 2007/02/16（金） 11:05  ID:AgNZ/TOR sub-.G
K+Sさん、何度もすみません。
下のコードで判り易くなったと思うのですが（なってなかったら、すみません）。
下のコードを使ってみるとわかると思いますが、文字のサイズ最大と最小とでは3pxの違いが出ます。ヘッダー高さ95pxに同じ高さの画像を配置したとします。
最大の時に3pxの空白が生まれ、白の部分として表示されます。下のコードですとバックグラウンドをカラーで設定してますので、違いがわからないとは思うのですが…
大した違いじゃないし、文字サイズなんて変更する人ってそんなにいないじゃんと思われるかもしれません、しかしなんとか解決したいと思っております。

html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>無題ドキュメント</title>
<link href="onegaisimasu_1.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="content">

<div id="header">
<h1><a href="#">タイトル</a></h1>
<h2><a href="#">住所（addressタグにするべきですがとりあえずh2を使っています）</a></h1>
<p class="under">下の柄（ここにメニューより右側にヘッダーの影を下に入れます）</p>
</div>

<div id="menu">
<ul>
<li class="menu_1"><a href="#">トップページ</a></li>
<li class="menu_1"><a href="#">説明</a></li>
<li class="menu_1"><a href="#">案内</a></li>
</ul>
</div>

</body>
</html>

css
onegaisimasu_1.css

* {
margin: 0;
padding: 0;
}

body {
font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
font-style: normal;
color: #333;
}

#header h1 {
float: left;
width: 420px;
height: 75px;
text-indent: -9999px;
background-color: #00FF00;
}
#header h2 {
float: left;
width: 300px;
height: 75px;
text-indent: -9999px;
background-color: #00FF00;
}
#header p.under {
height: 20px;
width: 720px;
background-color: #00FF00;
float: left;
}

#menu ul {
width: 38px;
}
#menu ul li {
width: 170px;
height: 40px;
text-indent: -9999px;
}
#menu ul li a {
display: block;
width: 170px;
height: 40px;
}
#menu ul li.menu_1 a {
background-color: #00FF00;
}

#menu ul li.menu_1 a:hover {
background-color: #00FFFF;
}
5   名前： ジベル ： 2007/02/16（金） 11:05  ID:AgNZ/TOR sub-.G
訂正です。
#menu ul {
width: 40px;
6   名前： ジベル ： 2007/02/16（金） 11:05  ID:AgNZ/TOR sub-.G
すみません。訂正2です。
#menu {
clear: left;
}

IEでは、ボックス内で文字の大きさが変更されるため、それによりボックスのサイズが変更されるという事なのでしょうか。

h1 {
font-size: 1px;
}
h2 {
font-size: 1px;
}
p {
font-size: 1px;
}

としてみましたら大きさが変わらなくなりました。
間違った解釈でしたら、スレお願いします。


7   名前： K+S ： 2007/02/16（金） 11:05  ID:nROqylMa sub-YS
理想としている形が完全には理解できませんが。

文字サイズの変更により高さが変わりうるボックスに対して overflow:hidden でも指定することで解消できるでしょうか。
#header p.under {
overflow:hidden;
height: 20px;
width: 720px;
background-color: #00FF00;
float: left;
}

ただ、ソースを拝見した限りでは、恐らく理想とされている構成に対して適切でない記述があります。
8   名前： カヅサツ ◆ThCi95HEzw ： 2007/02/16（金） 11:05  ［URL］  ID:O5hEMlpW sub-r2
レイアウトを言葉で伝えるのってかなり難しいですから、画像とか併用すると塩梅が宜しいかと。
9   名前： ジベル ： 2007/02/16（金） 11:05  ID:pISR0qe2 sub-9f
K+Sさん、ありがとうございます。
overflow:hidden;
こちらで解決できました。
適切でない記述とはどの部分なるでしょうか。
何度もすみません。

また、
overflow:hidden;を使用した場合、他のブラウザでの問題はありますでしょうか。自分でも調べてみますが、何かよいアドバイスがありましたら何でもよいのでレスお願いします。

カヅサツさん、なるべくそのようにします。ありがとうございます。
10   名前： ジベル ： 2007/02/16（金） 11:05  ID:pISR0qe2 sub-9f
自分なりに調べた結果、
IE5対策として、
/*\*/
overflow: hidden;
/**/
overflow: hidden;をIE5では除外するといった事でした。

ただし、IE5で確認していないため、除外する目的は分かっていません。
他にアドバスなどがありましたらお願いします。
一覧へ戻る