2011-07-29 19 views
1

WebページにFlash swfの周りに丸い角のある境界線を配置しました。会社のロゴはその下に座る必要があります。 (Safari、Chromeなどで正しく表示されているようにhttp://www.designboutiqueuk.com/loader/index.html)。IEの境界線が正しく表示されない

問題は、インターネットエクスプローラでは、境界線がフラッシュとロゴを囲む(ロゴが境界内にあるべきではない)ということです。 IEのいくつかのバージョンでは、すべてが左に表示されますが、ブラウザでは中央に表示する必要があります。国境がIEでぎっしりと回っていないと、それは世界の終わりではありません - あなたが別のことを知っていればボーナスになるかもしれませんが、これはまだ可能ではないと私は信じています!どんな助けでも大歓迎です。どうもありがとう。

答えて

2

あなたはIEが適切なDOCTYPEなく、他のはるかに多くの近代的なブラウザのように実行しようとするために取得することはありません。あなたはquirksモードです。最初の行に追加してください:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
+0

素晴らしいです。皆さんありがとうございました!私は本当にあなたの助けに感謝します! – Thomasina

+0

@Thomasina - これを受け入れられた答えとして選択することによって感謝を表します。 – Rob

+0

+1良いキャッチ@ロブ。 –

1

あなたのソースによれば、divのロゴがdivの中にあるため、これが起こっています。

<div style="width: 800px; margin: 20px auto; padding: 20px; border: #DD002B solid 2px; border-radius: 10px; -moz-border-radius: 10px;"> 
    <div align="center"> 

    //movie stuff here 

    </div> 

    <div style="margin: 0px 0px 0px -20px; padding: 40px 0px; display:block; float: left;"><img src="images/gsma_logo.jpg" width="100px"></div> 

</div> 

それが浮いて、通常の文書フローの外に取り、パディングと組み合わされ、近代的なブラウザで罰金座っています。

ロゴを上記の最後の閉鎖divの外側に配置してください。

1

私はJasonに同意します。しかし、答えに追加するには、同じ幅の別のコンテナを持っていて、現在のものと思われる場所にロゴを入れてください。マージンと余裕を調整する必要があるかもしれませんが、おおよそあなたが探しているものを達成するはずです。

<div style="width:800px;margin:20px auto"> 
    <div style="width: 800px; margin: 0 auto; padding: 20px; border: #DD002B solid 2px; border-radius: 10px; -moz-border-radius: 10px;"> 
     <div align="center"> 

     //movie stuff here 

     </div> 



    </div> 
    <div style="margin: 0px 0px 0px -20px; padding: 40px 0px; display:block; float: left;"><img src="images/gsma_logo.jpg" width="100px"></div> 
</div> 
+0

ありがとうございました!残念ながら今IEでこれが起こっています(IEでの表示方法についてはscreengrabを参照してください)http://www.designboutiqueuk.com/loader/Outlook.jpg - 白い背景は完全に黒く、境界線と映画はすべきですロゴはボーダーのすぐ下に20pxで表示され、ボーダーの左に並ぶ必要があります。 境界線の左側に一列に並んでいないロゴ以外はサファリが良いです。 – Thomasina

+0

画像の周りの幅も800pxにする必要があります。白い背景に関しては、代わりにこれを試してみてください:http://pastie.org/2289937私はdoctypeの1行目にコードを追加しました。 bodyタグの属性を取り除き(288行目)、CSSの6行目から10行目に置き換えました。 – agmcleod

0

このCSSを使用します。

#movie { 
width: 800px; 
margin-left: auto; 
margin-right: auto; 
margin-top: 20px; 
padding: 20px; 
border: #DD002B solid 2px; 
border-radius: 10px; 
-moz-border-radius: 10px; 
} 
#logo { 
width: 100px; 
height: //logo height 
margin-left: auto; 
margin-right: auto; 
float: left; 
display: block; 
clear: both; 
} 

<div id="movie"> 
//movie stuff here 
</div> 
<div id="logo"><img src="images/gsma_logo.jpg" width="100px"></div> 
関連する問題