背景にグラデーションを使用するとデザインガ崩れる

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

0   名前： ひろ ： 2007/02/26（月） 05:54  ID:MR4gn3x7 sub-vG
IE6でHP作成を行っているのですが、背景にグラデーションを用いるとセレクトボックス（プルダウンボックス）のデザインが崩れてしまします。
詳しい症状としては、縦スクロールが発生した時に、初期表示で表示されていない部分（画面に収まりきらなかった部分）を縦スクロールさせ、表示させるとセレクトボックスが正しく表示されません。
ただ、マウスのカーソルをセレクトボックスの上にもってくると正しく表示されます。
解像度の高いモニターを用い、全画面表示（縦スクロールの出ない状態）にすると正しく表示されます。
また、縦スクロールが出ている状態でもグラデーションをのけると正しく表示されます。

グラデーションは
<style type="text/css">
<!--
body {filter: progid:DXImageTransform.Microsoft.Gradient
(StartColorStr=#E3F4FF, EndColorStr=#75C8FF, GradientType=0) }
-->
</style>
と定義しています。

どなたか同じような症状を経験した方、いらっしゃいましたらご教授ください。
よろしくお願い致します。
1   名前： 元帥 ： 2007/02/26（月） 05:54  ［URL］  ID:00ZAyqc9 sub-bK
状況がよく掴めないのですが、現象が発生する最低限のソースコードを提示できませんか？

フィルターはIE専用ですので、他のブラウザでは当然ながら表示されません。
フィルターを使用した背景に合わせて文字色を指定すると、背景が表示されない他のブラウザでは文字が見えにくくなる場合がありますので、ご注意を。

単純な記述ミスも考えられますので、先ずは検証を。
http://openlab.ring.gr.jp/k16/htmllint/htmllinte.html
http://jigsaw.w3.org/css-validator/
2   名前： ひろ ： 2007/02/26（月） 05:54  ID:MR4gn3x7 sub-vG
元帥様

コメントありがとうございます。
不要箇所を除き、現象の現れる部分のみ抽出しました。
見にくい（醜い）ページですが、見てください。
右スクロールを上下に動かしてもらうとセレクトボックスの表示がおかしくなります。

なお、教えていただいたサイトで最低限のエラーは取り除きました。

以上、よろしくお願い致します。


↓↓↓ソース↓↓↓
----------------------------------------------------------------------------------------


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML lang="ja-JP">
<HEAD>
<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 11.0.0.0 for Windows">
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">

<TITLE>テスト２</TITLE>
<STYLE type="text/css">
<!--
body {filter: progid:DXImageTransform.Microsoft.Gradient
(StartColorStr=#E3F4FF, EndColorStr=#A4DBFF, GradientType=0) ;}

-->
</STYLE>
</HEAD>
<BODY><SELECT>
<OPTION>テスト１</OPTION>
<OPTION>テスト２</OPTION>
</SELECT>
<BR>
<SELECT>
<OPTION>テスト１</OPTION>
<OPTION>テスト２</OPTION>
</SELECT>
<BR>
<SELECT>
<OPTION>テスト１</OPTION>
<OPTION>テスト２</OPTION>
</SELECT>
<BR>
<SELECT>
<OPTION>テスト１</OPTION>
<OPTION>テスト２</OPTION>
</SELECT>
<BR>
<SELECT>
<OPTION>テスト１</OPTION>
<OPTION>テスト２</OPTION>
</SELECT>
<BR>
<SELECT>
<OPTION>テスト１</OPTION>
<OPTION>テスト２</OPTION>
</SELECT>
<BR>
<SELECT>
<OPTION>テスト１</OPTION>
<OPTION>テスト２</OPTION>
</SELECT>
<BR>
<SELECT>
<OPTION>テスト１</OPTION>
<OPTION>テスト２</OPTION>
</SELECT>
<BR>
<SELECT>
<OPTION>テスト１</OPTION>
<OPTION>テスト２</OPTION>
</SELECT>
<BR>
<SELECT>
<OPTION>テスト１</OPTION>
<OPTION>テスト２</OPTION>
</SELECT>
<BR>
<SELECT>
<OPTION>テスト１</OPTION>
<OPTION>テスト２</OPTION>
</SELECT>
<BR>
<SELECT>
<OPTION>テスト１</OPTION>
<OPTION>テスト２</OPTION>
</SELECT>
<BR>
<SELECT>
<OPTION>テスト１</OPTION>
<OPTION>テスト２</OPTION>
</SELECT>
<BR>
<SELECT>
<OPTION>テスト１</OPTION>
<OPTION>テスト２</OPTION>
</SELECT>
<BR>
<SELECT>
<OPTION>テスト１</OPTION>
<OPTION>テスト２</OPTION>
</SELECT>
<BR>
<SELECT>
<OPTION>テスト１</OPTION>
<OPTION>テスト２</OPTION>
</SELECT>
<BR>
<SELECT>
<OPTION>テスト１</OPTION>
<OPTION>テスト２</OPTION>
</SELECT>
<BR>
<SELECT>
<OPTION>テスト１</OPTION>
<OPTION>テスト２</OPTION>
</SELECT>
<BR>
<SELECT>
<OPTION>テスト１</OPTION>
<OPTION>テスト２</OPTION>
</SELECT>
<BR>
<SELECT>
<OPTION>テスト１</OPTION>
<OPTION>テスト２</OPTION>
</SELECT>
<BR>
<SELECT>
<OPTION>テスト１</OPTION>
<OPTION>テスト２</OPTION>
</SELECT>
<BR>
<SELECT>
<OPTION>テスト１</OPTION>
<OPTION>テスト２</OPTION>
</SELECT>
<BR>
<SELECT>
<OPTION>テスト１</OPTION>
<OPTION>テスト２</OPTION>
</SELECT>
<BR>
<SELECT>
<OPTION>テスト１</OPTION>
<OPTION>テスト２</OPTION>
</SELECT>
<BR>
<SELECT>
<OPTION>テスト１</OPTION>
<OPTION>テスト２</OPTION>
</SELECT>
<BR>
<SELECT>
<OPTION>テスト１</OPTION>
<OPTION>テスト２</OPTION>
</SELECT>
<BR>
<SELECT>
<OPTION>テスト１</OPTION>
<OPTION>テスト２</OPTION>
</SELECT>
<BR>
<SELECT>
<OPTION>テスト１</OPTION>
<OPTION>テスト２</OPTION>
</SELECT>
<BR>
<SELECT>
<OPTION>テスト１</OPTION>
<OPTION>テスト２</OPTION>
</SELECT>

</BODY>
</HTML>
3   名前： あや ： 2007/02/26（月） 05:54  ID:TRVH9wjM sub-ND
> body {filter: progid:DXImageTransform.Microsoft.Gradient
> (StartColorStr=#E3F4FF, EndColorStr=#A4DBFF, GradientType=0) ;}

を指定していることで不具合が生じているなら、このグラデーション背景を画像作成ソフトで作って１枚の画像として設置してみるのは駄目なのでしょうか？
　試しにこの２色のグラデーションを2000×2000ピクセルのgif画像で作ってみたところ約45KBとけして重くないと思うのですが…
　そして各select間はcssで調整してあげればいいのではないかな、と。
　http://www.tagindex.com/html_tag/form/select.html

最初#E3F4FFと#A4DBFFの２色をグラデーションにしてもその違いがよくわからなくて(室内の灯りが反射しているだけだったのかと…)画像ソフトで作ってやっとわかりました。
4   名前： ひろ ： 2007/02/26（月） 05:54  ID:MR4gn3x7 sub-vG
やはり画像ですか・・・
あまり使いたくない（背景色に変更があった時が面倒だから）んですよね。。

使い勝手のよい、グラデーション作成ソフトご存知の方いらっしゃいますか？
5   名前： α ： 2007/02/26（月） 05:54  ID:PSwm6sL6 sub-bK
グラデーション作成ソフトではないのですが、プレゼンテーションソフトはグラデの深度など決めて作れる物が多いので使ってみてはどうでしょうか?
それだけに特化したソフトが使いたい場合は、ググるとすぐ出てきますよ。
6   名前： 元帥 ： 2007/02/26（月） 05:54  ［URL］  ID:wvRIXdjM sub-bK
>>2
何ででしょうね？
取り敢えず、以下でその現象は発生しなくなりました。
少なくとも、私の環境下では。
ページ全体をdivで囲み、そのdivにfilterを設定しました。

CSS:
body{
margin:0;
}

div.body{
filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#E3F4FF, EndColorStr=#A4DBFF, GradientType=0);
width:100%;height:100%;padding:1em;
}

HTML:
〜略〜
<body>
<div class="body">

ここにページの内容を記述

</div>
</body>
</html>


>>4
それ専用ではないですが、Jtrimのグラデーション機能が個人的には使い易いと思っています。
7   名前： ひろ ： 2007/02/26（月） 05:54  ID:MR4gn3x7 sub-vG
みなさん

ありがとうございました。
現状、基本的にＩＥを前提としてますので
filter:progid:DXImageTransform.Microsoft.Gradient・・・
を用いようと思ってますが、他のブラウザの事を考えると画像にすべきですかね？

フレームを用いたＨＰで背景をグラデーション画像とした場合にうまく一枚の画像に見せるには、どうすればよいのでしょうか？
一枚画像を作り、それをフレームの大きさごとにカットしなければいけないんですか？

filter:progid:DXImageTransform.Microsoft.Gradient
を用いると

上側のフレームの背景定義：
(GradientType=0,startColorstr=#FFFFFF, endColorstr=#E3F4FF)

下側のフレームの背景定義：
(GradientType=0,startColorstr=#E3F4FF, endColorstr=#a4dbff)

のようにすればあたかも一つの画面のように見えます。
このような感じで一枚に見せたいのです。

ご教授下さい。
8   名前： 元帥 ： 2007/02/26（月） 05:54  ［URL］  ID:mHxSdC35 sub-bK
> 他のブラウザの事を考えると画像にすべきですかね？
他のブラウザを考慮するなら、IEではグラデーション、それ以外では単色背景の方が喜ばれるような…？

> フレームを用いたＨＰで背景をグラデーション画像とした場合にうまく一枚の画像に見せるには、どうすればよいのでしょうか？
> 一枚画像を作り、それをフレームの大きさごとにカットしなければいけないんですか？
究極的な方法はありませんが、それが一番無難ですね。

今回のケースでは、高さ2000ピクセル、横幅1ピクセルのグラデーション画像を用意し、フレーム毎に分割するだけでしょうから、容量的には効率が良いと言えます。
9   名前： 匿名 ： 2007/02/26（月） 05:54  ID:dNetjyhh sub-kJ
IE の filter 系は ActiveX が有効になっていないと効かない（スクリプト操作する場合も try..catch する必要がある）。Web で大手を振って使うものではないと思う。まあ、スタイルシートは無視されうることを分かって使う分には構わないが。
一覧へ戻る