掲示板/JavaScript質問板/過去ログ/一覧/ slimboxというスクリプトを使うと空白ができてしまいます

0 名前：たか： 2007/06/05（火） 23:37 ID:D.qtXHfZ sub-6Z: 皆さんはじめまして。
現在、CSSで段組をしたサイトを作っているものです。
そのサイトに画像を沢山置くのですが、その画像を開く際にSlimBoxを使用したいと思っています。
しかしながら、SlimBoxを使うためにJavaScriptをONにすると、
フッター部分にある画像の下に大量の空白ができてしまいます。
自分なりにCSSをさわってみたり、JavaScripファイルの中身を見てみたりと試行錯誤はしてみたのですが、
どうしても解決できませんでした。

JavaScriptをONにする事によって空白ができてしまう場合というのはありえるのでしょうか？
どなたかお返事を頂けると助かります。

よろしくお願い致します。

SlimBox
http://www.digitalia.be/software/slimbox

1 名前：匿名： 2007/06/05（火） 23:37 ID:Fm/QxFJd sub-Cz: ごめん、SlimBox の本体を覗く時間がないのでとりあえずヒント。

・その現象は、ごく簡単な HTML を書いた場合でも起きるのか？それとも、何か特別な記述があるときのみ起こるのか？
・その現象が生じるブラウザは？その現象に関する CSS バグは報告されていないか？（見た目の制御はほぼ全て CSS プロパティをいじることで行う）

# 回答者にゼロから検証させると時間がかかるので、やれる所まで自力で検証してくれると何かとありがたい。

また、Firefox や Konqueror なら標準で DOM インスペクタというツールがついてくる。スクリプト実行前と実行後のツリー構造を見比べて、何の要素がどこに付加されたか、その要素にどんなスタイルが与えられているかを確認すると、話が早い。

2 名前：たか： 2007/06/05（火） 23:37 ID:D.qtXHfZ sub-6Z: 匿名さん、返信ありがとうございます。

匿名さんの返信を拝見した後、早速確認をしてみました。

>・その現象は、ごく簡単な HTML を書いた場合でも起きるのか？それとも、何か特別な記述があるときのみ起こるのか？
ごく簡単なHTML、imgを使って、画像を2個（画像１とフッターにあたる画像）をならべた状況では発生しませんでしたが、その状態ではフッターを常に下に置くというCSSが適用できないため納得のいく結果ではありませんでした。

>・その現象が生じるブラウザは？その現象に関する CSS バグは報告されていないか？（見た目の制御はほぼ全て CSS プロパティをいじることで行う）
その現象が生じるブラウザはIE6のみです、FireFoxでは正常に動作し、納得のいくレイアウトで表現されています。私も最初はCSSバグ、IEバグの方向で調べていたのですが、可能性があるとすれば、フッターを常に下に置くために使用するPositionだと思い、色々いじってはみたものの、改善されませんでした。その時にJavaScriptのON・OFFを切り替えたらどうなる？と思い、切り替えたところ、ONにした時のみ発生したものですから、Scriptなのかなと…。

書いていただいた情報にDOMインスペクタというものがあったので、早速確認してみました。
NodeNameという所でON・OFFにした時に違いが出る部分はSlimBox.jsの中に記述されている、lboverlay、lbCenter、lbBottomContainerの3つでしたが、いじってみても特に変化はありませんでした。

現状のhtmlですが、記載できる部分に制限がかかっており実際のものとは異なるのですが、大体こういう構成だというものを掲載させて頂きます。
よろしくお願い致します。

/*　html　*/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

<head>
<title></title>
<link REL="stylesheet" href="css/style.css" TYPE="TEXT/CSS">
<link REL="stylesheet" href="css/slimbox.css" TYPE="TEXT/CSS">
<script type="text/javascript" src="./js/mootools.js"></script>
<script type="text/javascript" src="./js/slimbox.js"></script>

</head>
<div id="wrapper">
<a href='./image/sample.jpg' rel='lightbox-smd'><img src='./image/sample.jpg' alt='' width='94' height='55' border='0'></a>
</div>
<div id="space"> </div>

<div id="footer"><a> </a></div>

</body>
</html>

/*　CSS　*/
*{
text-align:center;
margin:0;
padding:0;
}

img {vertical-align: bottom;}

/* body */
body{
width:100%;
height:100%;
background:#DFEFEF url("../image//main_bg.jpg") repeat-x 0% 0%;
}

/* wrapper */
#wrapper {
position:relative;
width:800px;
height:100%;
margin:auto;
padding:0;
color:#444;
font:x-small/1.5em Georgia,Serif;
voice-family: "\"}\""; voice-family:inherit;
font-size:small;
} html>body {font-size:small;}

/* menu */
#menu {
float:right;
width:400px;
height:72px;
}
#menu ul {
float:left;
list-style:none;
}
#menu li {
float:left;
}
#menu a.home {
float:left;
width:93px;
height:36px;
background:url("../image/home.jpg");
display:block;
}

#menu a.web {
float:left;
width:91px;
height:36px;
background:url("../image/web.jpg");
display:block;
}

#menu a.dtp {
float:left;
width:91px;
height:36px;
background:url("../image/dtp.jpg");
display:block;
}

#menu a.contact {
float:left;
width:91px;
height:36px;
background:url("../image/contact.jpg");
display:block;
}

#menu a span {
float:left;
display:none;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#menu a span {float:none;}
/* End IE5-Mac hack */

/* menu overroll */
#menu #current a {
background-position:0 -36px;
}
#menu #current a span {
background-position:0 -36px;
}
#menu a:hover {
background-position:0 -36px;
}
#menu a:hover span {
background-position:0 -36px;
}

/* main content */
#content
{
padding:0;
margin:0;
float:left;
}

#logo {
margin-top:36px;
float:left;
width:400px;
}

#title
{
width:244px;
margin-top:80px;
float:left;
}

#about
{
width:267px;
float:left;
}

#text
{
text-align:left;
float:left;
display:block;
width:350px;
}

.preview {
list-style:none;
width:145px;
height:146px;
margin:0 30px 15px 0;
float:left;
}

.preview dt {
height:24px;
padding-left:2px;
}

.preview dd{
background:url(../image/preview.jpg) no-repeat 0% 0%;
padding:9px 7px 0 7px;
height:146px;
display:block;
}

.mirror{
margin-top:17px;
}

#line {
float:left;
width:325px;
height:6px;
background:url(../image/line.gif) no-repeat;
font-size:4px;
margin:20px 0;
}

/* footer */

#space{
width:100%;

}

#footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height:20px;
float:left;
_margin-top:144px;

}

#footer a {
display:block;
text-indent:-9999px;
text-decoration:none;
width:100px;
height:20px;
background:url(../image/footer.jpg);
margin-left:auto;
margin-right:auto;
}