TOP > Expression Web & FrontPage Users Forum
[リストへもどる]
一括表示
タイトルExpression Web2 Template vs IE8 on Vista
記事No337
投稿日: 2009/10/20(Tue) 08:23
投稿者たどじん   <tadjin@msn.com>
参照先http://www.k-kono.com/
Expression Web2のTemplate組織4と「一目でわかる・・」を使い、 http://www.k-kono.com を作りました。XPSP3上のIE7(Dell Desktop)、IE8(Toshiba Notebook)やFirefoxで問題なく動作して喜んでいたのですが、数日前、Vista Home Premium(Dell Studio)上のIE8で見たところ、向かって左にnavigation、右にcontentsが水平に並ばず、後者が前者の下になりleftに寄っているのを見つけました。
Expression Web2にある他のTemplateのいくつかを見てみましたが、IE8 on Vista HomePremiumの環境ではスモールビジネスの4,5はこの問題が起きません。一方組織の4,5では、上に指摘した問題が起きています。問題のあるTemplateのCSSファイルと問題のないもののCSSを比較して、少しコードを変えて試してみましたが、不成功でした。お忙しいところ恐れ入りますが、この問題への対処の仕方についてご教示いただければありがたくメールしました。よろしくお願いいたします。

タイトルRe: Expression Web2 Template vs IE8 on Vista
記事No338
投稿日: 2009/10/20(Tue) 11:20
投稿者wanichan   <webmaster@wanichan.com>
実際にWebサイトを拝見いたしましたが、特に問題はないようです。

段組にならずに下に回ってしまうという問題を回避するには、マージンやパディングの設定を変更する必要があります。
幅とパディングと枠線を同時に指定しないようにするとか、そういうことしか思いつかないです。
もうひとつ、はみ出た部分をカットするという方法もありますね。

実際に私はExpressionTech.jpのサイトを組織の4とかで作成しましたが、特に問題は起きていません。

おそらく、テンプレートを基にページを作っているうちに崩れた可能性も考えられるので、一度その問題のページを提示していただけませんか?
こちらでは問題が起きてませんので・・・

どうぞよろしくお願いいたします。

タイトルRe^2: Expression Web2 Template vs IE8 on Vista
記事No339
投稿日: 2009/10/20(Tue) 18:05
投稿者たどじん   <tadjin@msn.com>
参照先http://www.k-kono.com/
> 実際にWebサイトを拝見いたしましたが、特に問題はないようです。
> 段組にならずに下に回ってしまうという問題を回避するには、マージンやパディングの設定を変更する必要があります。
> 幅とパディングと枠線を同時に指定しないようにするとか、そういうことしか思いつかないです。
> もうひとつ、はみ出た部分をカットするという方法もありますね。
>
> 実際に私はExpressionTech.jpのサイトを組織の4とかで作成しましたが、特に問題は起きていません。
>
> おそらく、テンプレートを基にページを作っているうちに崩れた可能性も考えられるので、一度その問題のページを提示していただけませんか?
> こちらでは問題が起きてませんので・・・
>
> どうぞよろしくお願いいたします。

Expression web2のtemplate 組織5を何も手を加えずに、default.htmlをそのままこのIE8(OS:Vista Home PremiumのPC)でプレビュすると、同じ問題が起きています。したがって作っているうちに崩れたということはありません。
しかしテンプレートの中にはすでにご連絡したように、この問題が起きていないものもあります。同じIE8でも、問題が起きたり、起きなかったり、テンプレートの中にも問題があったり無かったり、非常におかしな現象です。
ご要請があれば問題の個所をスクリーン・キャプチャして画像でお送りすることはできますが、いかがいたしましょうか。
実際のサイトとしては、参照先のサイトしかありません。
よろしくご検討ください。

タイトルRe^3: Expression Web2 Template vs IE8 on Vista
記事No340
投稿日: 2009/10/20(Tue) 18:55
投稿者wanichan   <webmaster@wanichan.com>
> Expression web2のtemplate 組織5を何も手を加えずに、default.htmlをそのままこのIE8(OS:Vista Home PremiumのPC)でプレビュすると、同じ問題が起きています。したがって作っているうちに崩れたということはありません。
> しかしテンプレートの中にはすでにご連絡したように、この問題が起きていないものもあります。同じIE8でも、問題が起きたり、起きなかったり、テンプレートの中にも問題があったり無かったり、非常におかしな現象です。
> ご要請があれば問題の個所をスクリーン・キャプチャして画像でお送りすることはできますが、いかがいたしましょうか。
> 実際のサイトとしては、参照先のサイトしかありません。
> よろしくご検討ください。

こちらの環境はOSがWindows 7ですが、IE8ですべてのページをくまなく見ています。
しかし、問題は起きていません。
まことに恐れ入りますが、どのページが崩れているのかそのアドレスを教えていただけませんか?

タイトルRe^4: Expression Web2 Template vs IE8 on Vista
記事No341
投稿日: 2009/10/20(Tue) 20:25
投稿者たどじん   <tadjin@msn.com>
参照先http://www.k-kono.com/
> こちらの環境はOSがWindows 7ですが、IE8ですべてのページをくまなく見ています。
> しかし、問題は起きていません。
> まことに恐れ入りますが、どのページが崩れているのかそのアドレスを教えていただけませんか?

崩れているのは、参照先サイトのトップページです。中央に写真がありますが、この部分がナビゲーターの下になっているのです。http://www.k-kono.com/ です。

ところで、問題の起きていないスモールビジネス6のテンプレートを開き、div#contentの幅をCSSで少しずつ変更したところ幅をふやして、ある程度の線を超えるとデザインが崩れ同じようなことになることがわかりました。そこで、問題のあった組織5のテンプレートで、トップページのcontentの幅を少し小さくしたところ、めでたし、めでたし!、デザインが崩れなくなりました。前のメールでおっしゃっておられた、paddingとか例のボックスの値が何か関係があるのかもしれませんね。IE8だけの問題なのか、IE8とVistaの問題なのかは分かりません。アメリカのフォーラムのIE8のpositioningのスレッドを読むと、難しい点があるようにみうけられました。
すばやいお返事を賜りありがとうございました。とにかく対処法だけは分かりました。Windows7 になると、問題解決でしょうか。

タイトルRe^5: Expression Web2 Template vs IE8 on Vista
記事No342
投稿日: 2009/10/20(Tue) 20:55
投稿者wanichan   <webmaster@wanichan.com>
解決してなによりです。

ところで、トップページだけ左のナビゲーション部分の幅が広いのが気になりますが、これは意図的に、ということでしょうか?

確かに、Expression Webに組み込みのWebサイトテンプレートには、ある意味孔明の罠みたいなものが存在しています。右側の段組が左側のナビゲーションの下に回りこませないようにするには、メインコンテンツのdiv部分、つまり、#content スタイルにはみ出た部分はカットする等のプロパティを使うという方法があります。

#content のスタイルを変更して・・・・
レイアウトカテゴリの「overflow」プロパティを「hidden」にしてみてください。
# 知っておくといいかもしれないレベルですが・・・

幅とパディングと枠線は同時に指定すると罠にはまります。
私もその経験をしてしばらく四苦八苦したことがあります。

もしまた何かございましたらお気軽にこのフォーラムをご利用ください。
どうぞよろしくお願いいたします。

タイトルRe^6: Expression Web2 Template vs IE8 on Vista
記事No343
投稿日: 2009/10/21(Wed) 20:09
投稿者たどじん   <tadjin@msn.com>
参照先http://www.k-kono.com/
この問題を詳しくご説明いただきありがとうございます。「hidden」 にすると言っても
ちょっとわからなかったので、これではっきりしました。いずれ暇を見て試してみます。

トップページのナビゲーションの幅が広いのは、中央の写真の位置の関係です。今でも写真の右の部分は広く開いているので、そこをあまりひろすきないようにという配慮です。三段組みにして、中央の段で写真がセンターにくるようにすればいいのですが、やりかたを試行錯誤で研究しなければならないし、どうしても必要という感じでもないので、そのままにしています。

周囲にこういう問題を話せる人がいないので、すばやい反応をありがとうございました。重ねてお礼申し上げます。

タイトルRe^7: Expression Web2 Template vs IE8 on Vista
記事No344
投稿日: 2009/10/21(Wed) 22:47
投稿者wanichan   <webmaster@wanichan.com>
もし良かったら記事をUPしましたのでご覧いただきたく存じます。
http://www.wanichan.com/web/expression/faq/faq40.html

そのうちに2段組から3段組に変更する方法などを紹介していきたいと思います。

私の理解度が足りなくて申し訳ございませんでした。
また何かございましたらよろしくお願いいたします。

タイトルRe^8: Expression Web2 Template vs IE8 on Vista
記事No345
投稿日: 2009/10/29(Thu) 13:33
投稿者たどじん
参照先http://www.k-kono.com
> もし良かったら記事をUPしましたのでご覧いただきたく存じます。
> http://www.wanichan.com/web/expression/faq/faq40.html

この記事にあるcontentsのwidthを減らす方法と、overflow:hiddenを使う方法双方をためしました。まず、widthは変えずにoverflow:hidden を試しましたが、コンテンツは段組にならずナヴィゲーション部分の下に配置されたままでした。そこで、overflow:hiddenをやめ、widthを10ピクセル減らしましたところ、意図したとおりの2段組になりました。

という結果で、一応問題は解決しました。

widthを減らすのは、たとえば、10センチ幅の空間に、幅11センチは入らないので幅を9.9センチに削っていれたというイメージだろうと思います。

一方、overflow:hiddenは、overflowを上記の例で端の1センチと考えると、その1センチの部分を見えないように隠すというイメージでしょうか。そう考えてしまうと、1センチ部分は見えないが存在している、つまり幅はやはり11センチなので、10センチ幅には入らないというように考えられます。

overflow:hiddenを使うほうが本命だろうと思うのですが、とりあえずはこの方法で対処しておきます。なお、このoverflow:hiddenの使い方についてのドキュメント(日英どちらもOKです)がありましたらお教えください。