ログインしてさらにmixiを楽しもう

コメントを投稿して情報交換!
更新通知を受け取って、最新情報をゲット!

CSSテクニックコミュのwinによる表示の違いについて

  • mixiチェック
  • このエントリーをはてなブックマークに追加
いつも、お世話になっております。
win IEでの、表示の違いで悩んでおります。
ポップアップで、表示させるページを作成しているのですが、
(760*600で表示)footerの部分の下に少しの空きが出来てしまいます。他のブラウザーでは、空きが出来ませんが。。。
後、ボタンをfloatさせて、下に余白(padding)を指定しているのですが、指定した数値より多く余白が出来てしまいます。
他のブラウザーでは、指定した余白、footerの部分も空きがでません。
お手数ですが、わかる方がおられましたら、教えて頂きたいと思います。宜しくお願いいたします。

-------HTML--------
<div id="wrp">
<div id="entry-title"><h1>あ</h1></div>
<div class="entry-catch"><p class="bodym">テキスト</p></div>
<div class="entry-dot"><img src="images/spacer.gif" width="632" height="1"></div>
<div class="entry-text">
<p class="bodym" style="font-weight:bold; text-align:right;">テキスト</p>
<p class="bodym">テキスト</p>

<p class="bodym">テキスト<br>
<div class="entry-indent bodym">
テキスト
<div class="entry-indent2" bodym>
テキスト</div></div><p></p>

<p>
<div class="entry-indent bodym">テキスト
<div class="entry-indent2" bodym>テキスト</div></div><p></p></div>
<div class="entry-dot"><img src="images/spacer.gif" width="632" height="1"></div>
<div id="entry-btn">
<div id="entry-btnindent">
<ul>
<li id="yes"><a href="javascript:window.close();">あ</a></li>
<li id="no"><a href="#">い</a></li>
</ul>
</div>
</div>
<hr>
</div>
<div id="entry-foot"><div id="entry-footbtnindent"><ul><li><a href="javascript:window.close();">閉じる</a></li></ul></div></div>

--------CSS------------------
#wrp{
width:720px;
background-color:#fff;
}

#entry-title{
width:720px;
height:70px;
margin-bottom:35px;
}

#entry-title h1{
margin:0;
padding:0;
text-indent:-1000px;
background:url(images/#);
height:70px;
}

.entry-catch{
width:632px;
margin-left:44px;
margin-bottom:10px;
}

.entry-dot{
width:632px;
margin-left:44px;
margin-bottom:20px;
height:1px;
background:url(images/dot.gif) no-repeat;
}

.entry-text{
width:632px;
margin-left:44px;
margin-bottom:10px;
}

#entry-btn{
width:632px;
margin-left:44px;
padding-bottom:35px;
background-color:#fff;
}

#entry-btnindent{
width:400px;
padding-left:168px;
padding-bottom:35px;
}

#entry-btn ul{
margin:0px;
padding:0px;
}

#entry-btn li{
display:block;
margin-right:80px;
list-style:none;
text-indent:-9999px;
float:left;
}

#yes a{
width:102px;
height:30px;
display:block;
text-decoration:none;
background:url(images/#) no-repeat;
}

#yes a:hover{
width:102px;
height:30px;
display:block;
text-decoration:none;
background:url(images/#) no-repeat;
}

#no a{
width:102px;
height:30px;
display:block;
text-decoration:none;
background:url(images/#) no-repeat;
}

#no a:hover{
width:102px;
height:30px;
display:block;
text-decoration:none;
background:url(images/#) no-repeat;
}

#entry-foot{
width:720px;
height:20px;
background-color:#c1c1c1;
clear:left;
}

#entry-footbtnindent{
padding-left:613px;
}

#entry-foot ul{
margin:0px;
padding:0px;
}

#entry-foot li{
list-style:none;
text-indent:-10000px;
}

#entry-foot li a{
display:block;
background:url(images/close.gif) no-repeat;;
text-decoration:none;
width:107px;
height:20px;
}

#entry-foot a:hover{
width:107px;
height:20px;
display:block;
text-decoration:none;
background:url(images/close.gif) no-repeat;
}

.entry-indent{
margin-left:15px;
width:600px;
}

.entry-indent2{
margin-left:15px;
width:580px;
}

hr{
display:none;
clear:left;
}

コメント(4)

<p class="bodym">テキスト<br>
<div class="entry-indent bodym">
テキスト
<div class="entry-indent2" bodym>
テキスト</div></div><p></p>

<p>
<div class="entry-indent bodym">テキスト
<div class="entry-indent2" bodym>テキスト</div></div><p></p></div>

直接の解決になるかは分からんですが、
上のソース部分の div にある【bodym】の消し忘れ?群を
どうにかした方がいいと思います。


あと、
* {
margin: 0;
padding: 0;
}
などして全設定をリセットしてみるのも手です。
うろ覚えですが、たしかIEのバグに、floatさせてる要素自体にmarginを設定すると値が倍になる、というものがあった気がします。
なので、可能ならfloatさせるBOXをつくり、その中でボタンを配置してみてはどうでしょう?
>ぎんさん
書き込み有り難うございました。
全設定をリセットしているのですが。。。

>えどさん
書き込み有り難うございました。

ログインすると、みんなのコメントがもっと見れるよ

mixiユーザー
ログインしてコメントしよう!

CSSテクニック 更新情報

CSSテクニックのメンバーはこんなコミュニティにも参加しています

星印の数は、共通して参加しているメンバーが多いほど増えます。

人気コミュニティランキング