ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ

質問
質問者：exemplary ブラウザの文字サイズを変えると、inputのフォームのせいでレイアウトが崩れる
困り度：
  • 困っています
 こんにちは。ウェブデザイン初心者の質問です。

HTMLでページをデザインしています。form，input要素を使って検索用のフォームを設置したのですが、Firefox等のブラウザでフォントサイズを大きくすると、そのtableのレイアウトが崩れてしまいます。
リンクが張れないようなので、簡略化したスクリプトを書かせてもらうと、

<table align="center" cellpadding="0" cellspacing="0" width="700" height="225">
<tr>
<td colspan="2" width="400" height="200"><img src="image01.jpg" width="400" height="200"></td>
<td rowspan="2" width="300" height="225">
<script language="JavaScript" src="items.js"></script>
</td>
</tr>
<tr>
<td width="200" height="25" align="right" background="image02.jpg">
<form action="​http://www.google.com"​ target="body">
<span><input name="" size="28" maxlength="80" type="text"></span>
</form>
</td>
<td width="200" height="25"><img src="image03.jpg"></td>
</tr>
</table>

右側のtdはフラッシュファイルです。この状態でフォントサイズを拡大すると、左側のtdのグループと右側のフラッシュのtdの間に隙間ができて、その隙間がフォントサイズとともにどんどん広がります。このtableの上下には同じ幅のtableがあり、それらの横幅は変わらないため全体のレイアウトが激しく崩れてしまいます。formを削除するとこのようなことは起こりません。
tableタグを使わずに、cssでのデザインも試みましたが、結局フォームがあるとないとで同じ結果になります。
firefoxではフォントサイズを絶対値で固定することができなくなったと聞いたのですがそのせいでしょうか？

解決策をご存知の方がいらっしゃったらぜひお願いします。
質問投稿日時：08/04/01 18:42
質問番号：3913544
この質問に対する回答は締め切られました。

回答

良回答20pt
回答者：abril > firefoxではフォントサイズを絶対値で固定することができなくなったと聞いたのですがそのせいでしょうか？

FirefoxではCSSでfont-sizeにどの様な単位を定義していたとしても、ブラウザ側の文字サイズの変更に合わせ「必ず可変」の状態になります。というか、主なモダン・ブラウザで未だに（px指定で）でfont-sizeが固定されてしまうのはIEぐらいです。

> この状態でフォントサイズを拡大すると、左側のtdのグループと右側のフラッシュのtdの間に隙間ができて、その隙間がフォントサイズとともにどんどん広がります。

<input>タグの"size"による「長さ」は絶対値ではない為、環境によってかなり表示幅の解釈が異なりますし、ブラウザ側の文字サイズをアップしていけば自ずと<input>の幅も広がってしまいます。

> formを削除するとこのようなことは起こりません。
> tableタグを使わずに、cssでのデザインも試みましたが、結局フォームがあるとないとで同じ結果になります。

<input>の長さをCSSで固定値にしてやれば、HTML側でsize="XX"と入っていても、CSSでの定義の方が優先されます。
---------------------------------------------------------------------
【HTML】
---------------------------------------------------------------------
<form action=" ​http://www.google.com"​ target="body">
<input class="hogehoge" name="" size="28" maxlength="80" type="text">
</form>

---------------------------------------------------------------------
【CSS】
---------------------------------------------------------------------
input.hogehoge {
width: 200px;
}
---------------------------------------------------------------------
<form>の入る<td>がwidth="200"となっていたので、そこに入る<input>タグに対してhogehogeというclassセレクタを定義し、widthを200pxとしています。

これで問題の<input>タグの部分も長さは固定される筈ですが、いかがでしょうか？
種類：回答
どんな人：専門家
自信：参考意見
回答日時：08/04/01 21:26
回答番号：No.1
この回答へのお礼CSSでサイズを定義したらうまくいきました。
どうもありがとうございます。
 
このページのトップへ