スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Dreamweberで「この操作を実行すると、テストサーバー上のファイルが更新されます。 このため、このファイルを使用しているほかのユーザに影響を与える可能性があります。 処理を実行しますか?」

これにOKすると。
「依存ファイルをPUTしますか?」
というメッセージが表示される。

原因は、テストサーバを設定したため。詳しくは以下を参照のこと。
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1332549633
スポンサーサイト

flashプレーヤーが「セキュリティサンドボックス侵害」 エラーを発生し、実行が停止

原因は、FlashPlayerの設定。
「グローバルセキュリティ設定」にindex.htmlが存在する
フォルダが設定されていなかったため。

以下のURLから設定を行う。
http://www.macromedia.com/support/documentation/jp/flashplayer/help/settings_manager04.html

Flashで文字入力を行うと、黒枠が表示されてしまう。

原因は、プロパティ内の「テキストの周囲に境界線を表示」
が指定されていたため。(「文字」内にある。)
これを指定しないようにする。

ieで右寄せしたハイパーリンクの左側余白にリンクが設定される

ieで、右寄せしたハイパーリンクの左側余白にリンクが設定される。
FireFoxでは問題なし。

コーディングを変えるしかないようである。
tableタグを利用し、td内にリンクを納めるようにする。
(gooblogで使用している方法)
左側tdは、左寄せ、右側tdは、右寄せとする。

参考までに、他のblogでは、pタグを使用して、
右寄せで対応していることが多い。
今回は、一行に二つのリンクが存在するため、
この方法は採用できない。

IE6でmin-heightを適用する方法

min-heightについて
ie6では、min-height、min-widthが使用できない。
以下の方法で回避できる。

■min-height

.foo {
min-height:100px;
height: auto !important;
height: 100px;
}

■min-width

.bar {
min-width:100px;
width: auto !important;
width: 100px;
}
参考URL
http://blog.creamu.com/mt/2008/03/cssminheighteasiest_crossbrows.html
http://css-eblog.com/csstechnique/min-height-forie.html
(こちらのほうが詳しく解説している)

ieで、input="submit"で作成したボタン内の文字の余白が余分に取られてしまう

ieで、input="submit"で作成したボタン内の文字の余白が余分に取られてしまう。

IEのバグ?仕様?

回避策として、cssにoverflow:visible;を指定する。
参考URL
http://6sick.jugem.jp/?eid=63

ieで、textareaのスクロールバーが初期状態で表示されてしまう

ieで、textareaのスクロールバーが初期状態で表示されてしまう。
firefoxでは表示されない。

IEの仕様?と思われる。
cssにoverflow:auto;を指定する。

ie6で、input項目の説明と入力Boxの内容がずれる

ie6で、input項目の説明と入力Boxの内容がずれる。
Firefoxでは問題なし。

原因はcss上で、inputタグに対して、marginで余白を取ろうとしたためである。
ieでは、inputにmarginで余白を取ろうとするとだめなようである。
inputタグをpタグで囲み。pタグに対し、marginを指定するようにした。
----------------css---------------------------
#blog_contents_right #blog_cont_input p{
    margin-bottom:15px;
}
----------------cssここまで-------------------

-----------------html-------------------------
<div id="blog_cont_input">
    <p>ログインID<input id="lginpas_widthbtm" name="blog_loginid" type="text" size="10" maxlength="10"></p>
    <p>パスワード<input id="lginpas_widthbtm" name="blog_password" type="password" size="10" maxlength="10"></p>
</div>
-----------------htmlここまで-----------------

IE6でinputboxの長さが違う

ie6で、input type="text" type="password"において、
ログインIDのlengthとmaxlengthに同じ値を与えたにもかかわらず、入力Boxの長さが違う。
Firefoxでは問題なし。

ie6のバグのようである。
cssで以下のコーディングを行い、回避した。
--------------css---------------------------
#blog_contents_right input#lginpas_width {
    width:10ex;
}
--------------cssここまで-------------------

IEで\入力がバックスラッシュになる。

原因はieの仕様によるもの。IEでは、UTF-8で保存された場合、
input textareaで\が入力された場合、バックスラッシュが
表示されるようになっている。

CSSに以下の指定をすることにより回避
#blog input,textarea {
   font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
}

input,textareaに、Font-familyを指定する。

参考URL
http://q.hatena.ne.jp/1239476984

FireFoxとIEでマージンが異なっている。

FireFoxとIEでマージンが異なっている。

原因はIEのバグ。以下のURLを参照のこと。

参考URL
IE6でfloatした要素が兄要素のmarginを継承(?)する
http://www.110chang.com/blog/2007/05/ie6floatmargin.html

上記の現象に一致する。

たとえば、ボックス指定した中に


BC

のように、個別のボックスを定義した場合、IEでは、
Aの下に設定したマージンが、BCの下に設定されてしまう。

この現象については、
Aの下のマージンを無効にしたところ、余白がなくなった。

そのことから、この件については、margin-bottomをpadding-bottomで
指定することにより回避した。

2010/5/19追記
paddingを設定しただけでは、回避できない事象が発生した。

|???????????????????????????|
|A                         B|
|???????????????????????????|

上記のような設定をした場合、囲まれた部分(divで定義した部分)
に対し、padding:20px 30px 15px 20pxを指定したところ、
Aのbottomの部分に20pxが設定されてしまった。

このため、padding:0px 30px 15px 20pxとし、
A,Bのpadding-topに20pxを設定することにより、回避した。


テーマ : ブログ
ジャンル : ブログ

firefoxで表示が左右にぶれるような表示がされることがある。

firefoxで表示が左右にぶれるような表示がされることがある。

原因は、ieでは、スクロールバーが常に表示されるが、Firefoxは
必要なときのみスクロールバーが表示されるため、スクロールバー分右にずれることになり、
このため、ぶれたように見えることがある。

cssに以下の内容を追記する。
--------------------css-------------------------
*html body {       /*IE6だけに適用*/
   overflow-y:auto;
}

*+html body {     /*IE7だけに適用*/
   overflow-y:auto;
}

body {
   overflow-y:scroll;
}
-----------------------------------------------
参考URL
http://www.u-ziq.com/blog/2006/09/firefoxcss.html

※追記
上記の方法だと、ie系でウインドウを縮めてしまうと、
スクロールバーが二重に出てしまう。

body {
   overflow-y:scroll;
}

ではなく、

html{
   overflow-y:scroll;
}

とする。

参考URL
http://ne.tc/2007/11/15/%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E3%83%90%E3%83%BC%E3%81%AE%E6%9C%89%E7%84%A1%E3%81%AB%E3%82%88%E3%82%8B%E3%82%BB%E3%83%B3%E3%82%BF%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%AE%E3%81%9A%E3%82%8C/

ただ、上記のようにしても、極端にウインドウを小さくすると、
ie系で発生するケースがある。

テーマ : ブログ
ジャンル : ブログ

IE6でボックス指定した(div)テキスト下部のマージンが余分に取られる。

ie6で、IE6でボックス指定した(div)テキスト下部のマージンが余分に取られる。

原因は、ie6のバグ、
ie6には、WinIE5.0?6.0には外側のボックスに高さ(値は何でもよい)を与えると、
内側のボックスのフロートに関わらずボックス高さを拡張してしまうバグ(仕様?)がある。

cssに以下のハックを適用し、回避することとする。
------------------ css記述内容 ------------
* html .model_contents_details {
    height: 1em;
}
----------------------------------------------

上記の記述で、ie6では回避できたが、
ie7では回避できないことが判明した。

そのため、上記のCSSの記述は削除し、
以下のCSSのheightをautoとすることで回避した。
---------------- CSS記述内容---------------
.model_contents_details {
    border-left: 1px solid #ff99ae;
    border-right: 1px solid #ff99ae;
    width:613px;
    height:auto;
    min-height:1em;
    position:relative;
    display:block;
}

.model_contents_details .model_condtl_txt {
    width:365px;
    height:auto;
    color:#4d4d4d;
    text-align:justify;
    text-justify:distribute;  /* for IE */
    letter-spacing:0.1em;
}
-------------------------------------------------------

上記のmin-height:1emは、IE7対策である。

IE7で画像入りのリンクをクリックすると画像がずれる

ie7で画像入りのリンクをクリックすると、
画像が左にずれてしまう。ie6 FireFoxでは問題なし。

サブメニュー部分のcssのWidth,heightの記述位置に問題があった。

修正前のcssでは、以下のように記述していた。
------------------修正前css--------------------------
#diet_submenu ul li{
    width:210px;
    height:60px;
    margin-bottom:10px;
    clear:both;
}

#diet_submenu ul li a{
    background-image:url(../images/gra_subm_kadomaru.png) ;
    background-position:left top;
    background-repeat:no-repeat;
    position:relative;
    display:block;
}
-----------------修正前cssここまで-------------------------
a要素にwidth,heightを指定していなかったため、
クリック時の認識がうまくいかなかったためと思われる。
以下のように修正を行った。
-----------------修正後css---------------------------------
#diet_submenu ul li{
    margin-bottom:10px;
    clear:both;
}

#diet_submenu ul li a{
    width:210px;
    height:60px;
    background-image:url(../images/gra_subm_kadomaru.png) ;
    background-position:left top;
    background-repeat:no-repeat;
    position:relative;
    display:block;
}
----------------修正後css----------------------------------
a要素側にwidth,heightを設定するようにした。
firefoxで、ロールオーパ時のアンダーラインが表示されなかったので、
a要素のbackground-imageにサブメニューの背景を
設定するようにしたが、この時にバグを作り込んでしまったようである。

ulタグのマーカーの表示のされ方がfirefoxとIEで異なる。

firefoxでは、左側にはみ出して表示されるが、IEでは、はみ出さずに表示される。

原因はulタグの解釈がfirefoxとIEでは異なるため。
cssを以下のように記述することにより回避した。

---------------------css開始-------------------------
#ol_contents_mens p#ol_conmens_txt {
    padding:179px 0px 15px 313px;
}

#ol_contents_mens ul#ol_conmens_li {
    padding:0px 0px 0px 330px; /* FireFoxとIEでulの余白の解釈が異なるため、これで調整 */
}
#ol_contents_mens ul#ol_conmens_li li {
    font-size:9pt;
    list-style:disc;
--------------------css終了---------------------------

参考URL
http://www.tagindex.com/stylesheet/list/margin_padding.html

firefoxで、ロールオーバー時のアンダーラインが表示されない。

原因は、CSSの設定。

----------------修正前css-----------------------
#idx_submenu ul#idx_sub_select li{
    width:210px;
    height:60px;
    background-image:url(../images/gra_subm_kadomaru.png) ;
    background-position:left top;
    background-repeat:no-repeat;
    margin-bottom:10px;
    position:relative;
    clear:both;
}

#idx_submenu ul#idx_sub_select li a{
    display:block;
    width:210px;
    height:60px;
}
------------------------------------------------

----------------修正後css-----------------------
#idx_submenu ul li{
    width:210px;
    height:60px;
    margin-bottom:10px;
    clear:both;
}


#idx_submenu ul li a{
    background-image:url(../images/gra_subm_kadomaru.png) ;
    background-position:left top;
    background-repeat:no-repeat;
    position:relative;
    display:block;
}
-----------------------------------------------

背景がaタグの背景として設定されていなかったため。

ie6でfloat:left指定したbackgroundで指定した画像がフロート落ちする

以下の例参照

1つ目のdiv float:left指定
2つ目のdiv float:left指定
3つめのdiv 指定無し

おのおののdivには、div指定した上部と下部に画像を指定してある。
上記の指定をした場合、二つ目のfloat指定した部分の下部画像がfloat落ちする。

原因は、3つめのdivにfloat:leftを指定していなかったため。
指定することにより回避。

heightがInternetExplorarとFireFoxで解釈が異なる。

InternetExplorarとFireFoxで表示内容を比較した場合、
heightを明確に指定しないと、表示が異なって表示される場合がある。

このようなときは、heightを明確に指定するようにする。

CSSで指定した画像と文字が重なる

background-imageで指定した画像と、リンク文字が重なってしまう場合があった。

Display:blockを指定している場所であり、
以下の方法で回避した。

html記述
<span id="idx_link_icon_sqright"><img src="images/ico_kakuright_mark.png" width="12" height="12"><a href="#">こちらへ</a></span>

CSS記述

span#idx_link_icon_sqright{
right:10px;
margin-top:106px;
position:absolute;
}

span#idx_link_icon_sqright img{
margin-right:5px;
}

span#idx_link_icon_sqright a{
line-height:1.0;


テーマ : 日記
ジャンル : ブログ

IEで画像の上下に隙間ができる。

IEで、画像を表示(imgタグ使用)したときに、
原因不明の隙間ができる。

これは、有名なIEのバグ?である。
回避策としては、CSSにvertical-align:bottomを
記述するとよいとあるが、それでも回避できないことがある。

そのようなときは、以下の方法で回避できる。

CSS上
.ie_yokaku_can {
margin: 0px;
border: 0px;
padding: 0px;
font-size: 0px;
}

html上
<p class="ie_yokaku_can"><img src="../images/gra_kyoko_kado_top.png" width="317" height="15"></p>

余白をなくしたいimgタグをpタグで囲むようにする。
ただし、この方法はpタグの間に文字があるときは、使用できないので注意すること。

そのほか、画像をcssで、background-imageとして定義する方法もある。
ただ、この方法は、html上に無駄な<div>を書くことになるので、私的には
あまりおすすめできないと思っています。

忘れないように・・・

これから、卒業制作中に出会った
障害、並びに回避策を忘れないように書いていきます。

参考になれば幸いです。

はまりました・・・

はまりました・・・

ただいま、卒制真っ最中なんですが、
最後の最後で、ドツボにはまったという感じですが・・・(^^;)

IEでinputboxにカーソルを当てると、
submitボタンがフォーカスが当たったような状態になる。
(黒く縁取りされる)

以下のurlの「Blog」から、アクセスしていただくとわかります。

http://www.eno-moto.sakura.ne.jp/index.html

ログインIDにカーソルを持って行くと、Loginボタンが
黒く縁取りされるのがわかります。

FireFoxでは発生しません。

いろいろやってみたけど、有効な打開策がありません。

どなたか回避策をご存じの方は、アドバイスお願いします。m(..)m


テーマ : 今日のつぶやき
ジャンル : ブログ

Blog作成しました。

初投稿になります。

初めまして、e-swanです。
今あるBlogもまともに更新できていないのに、
新しいBlogも更新できるんだろうか・・・(^^;)

と、心配なのですが、できる限り更新しようと思います。

ただいま、プログラミングもできるWebデザイナー目指して
卒業制作中です。

http://www.eno-moto.sakura.ne.jp/index.html

せっかく作ったBlogなので、
卒業制作中に出くわした障害事象をまとめて辞書代わりに
使えるようにしようかと思っています。

よろしく。(^_^)v

テーマ : 日記
ジャンル : ブログ

プロフィール

e.swan

Author:e.swan
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
月別アーカイブ
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QR
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。