作者keiesa (kei)
看板Ajax
標題[請益] 急問！用IE開啟有Accordion效果的網頁뜠…
時間Mon Oct 22 09:16:10 2007
※ [本文轉錄自 Web_Design 看板]
作者: keiesa (kei) 看板: Web_Design
標題: [請益] 急問！用IE開啟有Accordion效果的網頁會爛掉.....
時間: Sun Oct 21 21:05:13 2007
不知道可不可以在這裡問這個問題，如果不妥請告訴我該去哪個板問，謝謝！
昨天被這個網站
http://www.stickmanlabs.com/accordion/ 的效果吸引，
所以嘗試把它的原始檔抓下來做學校的網頁，
一直都用firefox預覽，沒想到都弄好了以後用IE6開居然爛掉了.....
我把它上傳到這裡：
http://kei.000webhost.org/2007musicology/index.html
(有點慢，所以我把語法也附在底下)
用firefox都OK，用IE問題有：
1.幾乎每一個"accordion_toggle"開啟後上下會出現黑色的邊
2.「發表論文」的"vertical_accordion_toggle" 開不了
3.「主辦單位」的"vertical_accordion_toggle" 整個變黑色的
因為是新手，所以只敢替換它的文字還有改變編碼為BIG5，
實在不知道為什麼會壞掉.....
拜託板上各位高手幫我看一下，感激不盡(拜)，謝謝！
以下是我的語法：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head
profile="
http://gmpg.org/xfn/11"><title>2007台灣音樂學論壇</title><!-- Meta
Tags -->
<meta http-equiv="content-type" content="text/html; charset=big5">
<meta name="keywords" content="accordion, javascript accordion,
scriptaculous">
<meta name="description" content="The ultimate modal window system,
LightWindow, allows you to build your own theem, create mixed media galleries
including flash, quictkime and images. Through a variety of parameters this
system can do it all and recreate any other system out there!">
<meta name="robots" content="index, follow"><!-- JavaScript -->
<script type="text/javascript" src="combine.php"></script><!-- CSS -->
<link rel="stylesheet" type="text/css" href="default.css">
<script type="text/javascript">
//
// In my case I want to load them onload, this is how you do it!
//
Event.observe(window, 'load', loadAccordions, false);
//
// Set up all accordions
//
function loadAccordions() {
var topAccordion = new accordion('horizontal_container', {
classNames : {
toggle : 'horizontal_accordion_toggle',
toggleActive : 'horizontal_accordion_toggle_active',
content : 'horizontal_accordion_content'
},
defaultSize : {
width : 525
},
direction : 'horizontal'
});
var bottomAccordion = new accordion('vertical_container');
var nestedVerticalAccordion = new accordion('vertical_nested_container', {
classNames : {
toggle : 'vertical_accordion_toggle',
toggleActive : 'vertical_accordion_toggle_active',
content : 'vertical_accordion_content'
}
});
// Open first one
bottomAccordion.activate($$('
#vertical_container .accordion_toggle')[0]);
// Open second one
topAccordion.activate($$('
#horizontal_container
.horizontal_accordion_toggle')[2]);
}
</script><!-- CSS -->
<style type="text/css">
/*
Vertical Accordions
*/
.accordion_toggle {
display: block;
height: 30px;
width: 680px;
background: url(images/accordion_toggle.jpg) no-repeat top right #a9d06a;
padding: 0 10px 0 10px;
line-height: 30px;
color: #ffffff;
font-weight: normal;
text-decoration: none;
outline: none;
font-size: 12px;
color: #000000;
border-bottom: 1px solid #cde99f;
cursor: pointer;
margin: 0 0 0 0;
}
.accordion_toggle_active {
background: url(images/accordion_toggle_active.jpg) no-repeat top right
#e0542f;
color: #ffffff;
border-bottom: 1px solid #f68263;
}
.accordion_content {
background-color: #ffffff;
color: #444444;
overflow: hidden;
}
.accordion_content h2 {
margin: 15px 0 5px 10px;
color: #0099FF;
}
.accordion_content p {
line-height: 150%;
padding: 5px 10px 15px 10px;
}
.vertical_accordion_toggle {
display: block;
height: 30px;
width: 600px;
background: url(images/accordion_toggle.jpg) no-repeat top right #a9d06a;
padding: 0 10px 0 10px;
line-height: 30px;
color: #ffffff;
font-weight: normal;
text-decoration: none;
outline: none;
font-size: 12px;
color: #000000;
border-bottom: 1px solid #cde99f;
cursor: pointer;
margin: 0 0 0 0;
}
.vertical_accordion_toggle_active {
background: url(images/accordion_toggle_active.jpg) no-repeat top right
#e0542f;
color: #ffffff;
border-bottom: 1px solid #f68263;
}
.vertical_accordion_content {
background-color: #ffffff;
color: #444444;
overflow: hidden;
}
.vertical_accordion_content h2 {
margin: 15px 0 5px 10px;
color: #0099FF;
}
.vertical_accordion_content p {
line-height: 150%;
padding: 5px 10px 15px 10px;
}
/*
Horizontal Accordion
*/
.horizontal_accordion_toggle {
/* REQUIRED */
float: left; /* This make sure it stays horizontal */
/* REQUIRED */
display: block;
height: 100px;
width: 30px;
background: url(images/h_accordion_toggle.jpg) no-repeat top left #a9d06a;
color: #ffffff;
text-decoration: none;
outline: none;
border-right: 1px solid #cde99f;
cursor: pointer;
margin: 0 0 0 0;
}
.horizontal_accordion_toggle_active {
background: url(images/h_accordion_toggle_active.jpg) no-repeat top left
#e0542f;
border-right: 1px solid #f68263;
}
.horizontal_accordion_content {
/* REQUIRED */
height: 100px; /* We need to define a height for the accordion as it
stretches the width */
float: left; /* This make sure it stays horizontal */
/* REQUIRED */
overflow: hidden;
background-color: #ffffff;
color: #444444;
}
.horizontal_accordion_content p {
width: 450px;
line-height: 150%;
padding: 5px 10px 15px 10px;
}
/* Container styling*/
#horizontal_container {
margin: 20px auto 20px auto;
width: 680px;
height: 100px;
}
#vertical_nested_container {
margin: 20px auto 20px auto;
width: 620px;
}
</style></head><body>
<div id="container">
<h1><span>2007台灣音樂學論壇</span> </h1>
<p class="description"></p>
<div id="vertical_container">
<h1 class="accordion_toggle accordion_toggle_active">活動資訊</h1>
<div style="height: auto; display: block;" class="accordion_content">
<br/>
<p> 時間：2007年12月14日至15日<br/><br/>
地點：國立台北藝術大學 國際會議廳</p>
<br/>
</div>
<h1 class="accordion_toggle">報名資訊</h1>
<div style="height: 0px; display: none;" class="accordion_content">
<p>
<br/>
採網路報名方式，即日起開放報名，限額200名。<br/><br/>
請先<a href="../2007twmusicology/2007reg.xls">下載報名表</a>，填完
後再寄至<a href="mailto:
[email protected]">我們的信箱</a>。
</p>
<div id="vertical_nested_container">
<h3 class="vertical_accordion_toggle">認證時數</h3>
<div style="height: 0px; display: none;"
class="vertical_accordion_content">
<p>
將於12月初公告。
</p>
</div>
</div>
</div>
<h1 class="accordion_toggle">發表論文</h1>
<div style="height: 0px; display: none;" class="accordion_content">
<div id="vertical_nested_container">
<h3 class="vertical_accordion_toggle">學術組</h3>
<div style="height: 0px; display: none;"
class="vertical_accordion_content">
<p>
2007台灣音樂學論壇學術委員會委員：<br/>
黃均人(召集人)、曾翰霈、溫秋菊、蔡宗德、王惠民、楊建章、蔡燦煌</p>
</div>
<h3 class="vertical_accordion_toggle">論文審查通過名單</h3>
<div style="height: 0px; display: none; "
class="vertical_accordion_content">
<p>
致發表人:<br/>
台灣音樂學論壇今年已經是第三次舉辦，前兩年屆是以邀稿的方式徵求論文，本屆則增加
了公開徵求論文並進行審查的方式。本次公開徵選總共收到19篇投稿論文，經學術委員會
七位委員們審查論文摘要，並以無記名投票，選出七篇單篇論文與一篇專題討論小組論文
，獲選之論文題目與投稿人姓名如下：<br/><br/>
<table width="420px" border="1" align="center">
<th colspan="2" align="center" valign="middle" style="border-top-width:
center; text-align: center; ">審查通過單篇論文 (依票數高低排列)</th>
<tr>
<td width="300px" height="180%" align="center" valign="middle" style="margin:
center; text-align: center; ">論文題目</td>
<td width="50px" height="180%" align="center" valign="middle" style="margin:
center; text-align: center; ">投稿人</td>
</tr>
<tr>
<td>由雙鏡效應論台灣當代音樂</td>
<td>林幗貞</td>
</tr>
<tr>
<td>論武滿徹的音樂自然觀---以ARC為例</td>
<td>楊舒婷</td>
</tr>
<tr>
<td>台灣當代音樂創作中的「道白歌」現象初探</td>
<td>車炎江</td>
</tr>
<tr>
<td>從日治時期台灣音樂會史料再探西洋音樂在台發展論述</td>
<td>林姿呈</td>
</tr>
<tr>
<td>The Filipino Catholic Choir Soundscape in Taipei</td>
<td>黃珮玲</td>
</tr>
<tr>
<td>依里亞德的理論探究歌劇Peter Grimes 的聖俗二元性</td>
<td>陳威仰</td>
</tr>
<tr>
<td>男性學者凝視下的女性音樂家-<br/>法蘭契斯卡‧卡契尼晚期史料與詮釋間的張力
</td>
<td>許芳瑜</td>
</tr>
</table>
<br/><br/>
<table width="420px" border="1" align="center">
<th colspan="2" align="center" valign="middle" style="border-top-width:
center; text-align: center; ">審查通過專題討論小組論文</th>
<tr>
<td width="300px" height="180%" align="center" valign="middle" style="margin:
center; text-align: center; ">論文題目</td>
<td width="180px" height="180%" align="center" valign="middle" style="margin:
center; text-align: center; ">投稿人</td>
</tr>
<tr>
<td>After New Musicology: <br/>二十一世紀的音樂學研究新視野</td>
<td>陳人彥、張雅婷、<br/>高雅俐、楊建章</td>
</tr>
</table>
<br/><br/>
</p>
</div>
<h3 class="vertical_accordion_toggle">議程表</h3>
<div style="height: 0px; display: none;"
class="vertical_accordion_content">
<p>
將於11月中公告。
</p>
</div>
</div>
</div>
<h1 class="accordion_toggle">交通資訊</h1>
<div style="height: 0px; display: none;" class="accordion_content">
<div id="horizontal_container">
<h4 class="horizontal_accordion_toggle">地<br/>理<br/>位<br/>
置</h4>
<div style="width: 0px; display: none;"
class="horizontal_accordion_content">
<p>
<a target="_blank" title="連結至Google地圖"
href="
http://maps.google.com/maps?f=d&hl=zh-TW&geocode=8447105497421462392,25.131454,121.468964&saddr=&daddr=25.131648,121.469007&mrcr=0&mrsp=1&sz=16&mra=dme&sll=25.132328,121.469929&sspn=0.008373,0.014462&ie=UTF8&om=1&ll=25.132328,121.469929&spn=0.008373,0.014462&source=embed">
北藝大地理位置</a><br/>
</p>
</div>
<h4 class="horizontal_accordion_toggle" >學<br/>校<br/>地<br/>
圖</h4>
<div style="width: 0px; display: none;"
class="horizontal_accordion_content">
<p>
<a href="
http://www2.tnua.edu.tw/tnua/link/map/map.html" target="_blank"
title="連結至校園鳥瞰圖">北藝大地圖</a> （國際會議廳位於研究大樓二樓）
<br/>
</p>
</div>
<h4 class="horizontal_accordion_toggle
horizontal_accordion_toggle_active">乘<br/>車<br/>資<br/>訊</h4>
<div style="width: 525px; display: block; height: auto;"
class="horizontal_accordion_content">
<p>
可至捷運淡水線關渡站轉乘校車<br/><br/>
<a href="
http://musikwissenschaft.googlepages.com/bus.doc">校車與紅35發
車時刻表</a><br/>
<a href="
http://musikwissenschaft.googlepages.com/961sat.doc">週六
校車時刻表</a>
</p>
</div>
<h4 class="horizontal_accordion_toggle">查<br/>詢</h4>
<div style="width: 0px; display: none;"
class="horizontal_accordion_content">
<p>
<a href="
http://www.trtc.com.tw/">台北大眾捷運首頁</a><br/>
<a href="
http://www.taipeibus.taipei.gov.tw/">台北市公車路線
查詢</a>
</p>
</div>
</div>
</div>
<h1 class="accordion_toggle">主辦單位</h1>
<div style="height: 0px; display: none;" class="accordion_content">
<div align="center" style="width:70%; float: left;" >
<p> <br/>主辦單位 國立台北藝術大學音樂學研究所 台灣音
樂學論壇籌備小組<br/>
電話：(02)2896-1000 #5040<br/>
電子信箱：<a
href="mailto:
[email protected]">
[email protected]</a></p>
<p>協辦單位 國家科學委員會人文研究中心</p>
</div>
<div align="center" style="width: 30%; float: right;" >
<p><br/>歷年台灣音樂學論壇網站<br/>
<a target="_blank"
href="
http://homepage.ntu.edu.tw/~gim/2005forum/index.html">2005台灣音樂學論壇
</a><br/>
<a target="_blank" href="
http://www.music.nsysu.edu.tw/2006/2006.html">2006台
灣音樂學論壇</a><br/><br/>
相關連結<br/>
<a target="_blank" href="
http://groups.yahoo.com/group/TaiwanMusicology/">台灣
音樂學討論區</a><br/>
</p>
</div>
</div>
<div class="page-footer">
</div>
</div>
</div>
<script type="text/javascript">
//
// You can hide the accordions on page load like this, it maintains
accessibility
//
// Special thanks go out to Will Shaver @
http://primedigit.com/
//
var verticalAccordions = $$('.accordion_toggle');
verticalAccordions.each(function(accordion) {
$(accordion.next(0)).setStyle({
height: '0px'
});
});
</script>
<script type="text/javascript" src="urchin.js"></script>
<script type="text/javascript">_uacct =
"UA-624845-2";urchinTracker();</script>
</body></html>
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 219.84.5.143
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 219.84.5.143
1F：→ keiesa:一和三解決了，第二個問題麻煩板上高手幫幫我，謝謝！선 10/23 09:54
2F：→ keiesa:自己用奇怪的方式解決了....."vertical_nested_accordion" 10/23 14:48
3F：→ keiesa:只有最上層的才有效("horizontal_container"卻不受限??) 10/23 14:50
4F：→ keiesa:所以我把"vertical_nested_accordion"裡所有名稱都加上"2" 10/23 14:54
5F：→ keiesa:就OK了...知其然不知其所以然地解決了，不好意思佔用板面了 10/23 14:56