テキストボックスの大きさをwinとmacで固定するには？

質問

テキストボックスの周りが不規則なグラデがかかった画像なので長さを可変にして組むことができず、がっちり画像を切って組みました。
しかし、winでちょうどよくてもmacで見ると、ボックスが大きくなってデザインが崩れてしまいます。
テキストボックスの大きさをwinでもmacでも同じになるように固定することはできないのでしょうか？
納期が迫っていてかなり困っています。
どなたか良いアドバイスをいただけないでしょうか。
よろしくお願いします。

回答No.7

A-U-N

連続投稿失礼します。
Macでの検証が今すぐは出来ないので何ともなのですが、
テキストボックス自体は立体表示をOFFにして白ベタにし、
その背景にテキストボックスっぽい画像を置くというのはどうでしょうか。
具体的には、
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD WIDTH="200" COLSPAN="3"><IMG SRC="aaa.jpg" WIDTH="200"></TD>
</TR>
<TR>
<TD WIDTH="100"><IMG SRC="bbb.jpg" WIDTH="100"></TD>
<TD WIDTH="50" ALIGN="CENTER" STYLE="background-image:url('textbox.jpg');"><INPUT TYPE="TEXT" STYLE="width:45px;border:0px white solid;"></TD>
<TD WIDTH="50"><IMG SRC="ccc.jpg" WIDTH="50"></TD>
</TR>
</TABLE>

↑これでどうでしょうか。
aaa.jpg、bbb.jpg、ccc.jpg は背景画像のパーツ、
textbox.jpgはテキストボックスの枠線、
です。
テキストボックスに適用しているスタイル、
border:0px white solid;
で立体表示されている本物の枠線を消しています。

回答No.6

A-U-N

絵の位置が固定で、その中にテキストボックスも固定位置に配置したいということであれば、
あとは、
position:absolute;
left
top
という手がありますが、厳密な位置合わせをWinとMacで行ったことはないので同じようにズレが生じるかもしれませんね。

ちょっと参考URLを見つけられなかったのですが、
閲覧マシンがMacの場合とWinの場合で、JavaScriptを使って参照するCSSファイルを動的に切り換えるという手法もあります。
これなら、Macの場合はwidth:45px、Winの場合はwidth:50pxなど一応、別々に設定できます。

回答No.5

amc007

どうも、状況がイメージできなくて……
これって、画像の真ん中を文字のボックスと同じ大きさで四角く切った状態にして、
<TABLE BACKGROUND="画像URL" WIDTH="Xpx" HEIGHT="Ypx">
で、Xpxに画像の横ピクセル、Ypxに縦のピクセルサイズを入れてですね、表の中のセルは3×3にしてしまって、
<TR>
<TD WIDTH="Xpxから真ん中のセルのピクセルの横幅を引いて2で割った数値" HEIGHT="Ypxから真ん中のピクセルの縦幅を引いて2で割った数"></TD>
<TD WIDTH="真ん中のセルのピクセルの横幅" HEIGHT="Ypxから真ん中のピクセルの縦幅を引いて2で割った数"></TD>
<TD WIDTH="Xpxから真ん中のセルのピクセルの横幅を引いて2で割った数値" HEIGHT="Ypxから真ん中のピクセルの縦幅を引いて2で割った数"></TD>
</TR>
<TR>
<TD WIDTH=Xpxから真ん中のセルのピクセルの横幅を引いて2で割った数値" HEIGHT="真ん中のセルの縦幅"></TD>
<TD WIDTH=指定のセルの" HEIGHT="指定のセル">（指定）……
こんな感じで各セルの数値を設定していって、解決しませんか？

回答No.4

noname#40524

webでフォントサイズは『ピクセル』で指定しています。
WinのIEで変更されると、少し文字がMacでは大きく成りますが、
全体のレイアウトは崩れていません。

お礼

ご意見ありがとうございます。
仰るとおり、文言を入れる分にはマックで多少大きくなろうとレイアウト的には特に問題ないと思います。
今回、困っているのは、テキストボックスのサイズで周りが全て画像のため、1pxたりともずらせない点です。
例えば、
＜table width="800" border="0" cellspacing="0" cellpadding="0"＞
＜tr＞
＜td＞＜img src="A" width="" height=""＞＜/td＞
＜td＞＜img src="B" width="" height=""＞＜/td＞
＜td＞＜INPUT type="text" name="search" style="width: px"＞＜/td＞
＜/tr＞
＜/table＞
といった感じで組むとすると、テキストボックスのサイズ指定をどのようにすれば、
WINでもMACでも画像のようにぴったり収まるのでしょうか？
検索して探してみたのですが、探し方が悪いのか、もしかしてすごい初歩的なことなのか、
解決方法を見つけられませんでした。
よろしくお願いします。

回答No.3

A-U-N

いますぐの検証ができる環境ではないので簡単な情報ですが、
とりあえず、スタイルシートに関しては、
width
font-size
辺りが直接的に関係しますよね。
単位としては、pxかpt辺りで（それぞれ意味が異なります）、
で色々な数値を与えて検証でしょうか。
ほんとに簡易な実験方法ですが、
＜INPUT TYPE="TEXT" NAME="XXX" STYLE="width:50px;"＞
とかやって両方の環境で見てみて、この"width:??px;"の??の部分の数値を調整していくと。
デザインによっては、OS・ブラウザで使用するcssファイルを切り替える必要もありえますよね。

お礼

ご意見ありがとうございます。
ご連絡頂いたあと、いろんな単位で数値を変えて試してみたのですが、やはりwinがうまくいけばMACでは崩れる、その逆もまたしかり・・・。
ほとんど文字要素がないようなデザイン重視ページなので（それもどうかと思いますけど）、background指定とかで可変にできないんです。
これまで厳密にマックを意識していなかったのですが、
htmlを組むとき他の皆さんはどうされているのでしょうか・・・。
引き続きもう少し、研究してみます。
どうもありがとうございました。

回答No.2

A-U-N

一応・・・スタイルシートは使っておいでですよね？
あとMacと一口にいっても、対象ブラウザやOSのバージョンが関わってきますが、そこら辺はどうでしょうか？

補足

情報不足でした（汗。すみません。

>スタイルシートは使っておいでですよね？
はい、cssは別ファイルに入れて使ってます。
そこでどうにかなるのかな～、とも思ったんですが、よく分からなくて・・・。

macのOSは9、ブラウザはIE5で見ました。
どうぞよろしくお願いします。

回答No.1

agito_0v0

・・・何の話ですか？
わかるようにお書きください。

でないと、スルーされますよ。。。

補足

すみません、あせって簡略化し過ぎました。
htmlを組んでおりまして、検索ボックスの周りがベタ色でなくて画像なので、例えば
<INPUT type="text" name="search" size="26">
とすると、winでは問題ないのですが、macで見るとテキストボックスが大きくなってデザインが崩れてしまいます。このテキストボックスの大きさをwinでもmacでも共通（？）の大きさにすることはできないものかと。
このような感じでお分かりになりますでしょうか？
よろしくお願いします。