중첩 된 <a> 및 <span> 도전 : 2 부 - javascript, IE8 및 맞춤

Question

나는 두 명의 머리 scratchers를 여기 있습니다 : # 1- IE8 내 자바 스크립트를 좋아하지 않는 것; # 2 - 모든 IE6의 CSS 정렬 문제 & 7 초. 내 마지막 질문 - 정말 도움이되는 다양한 제안 (자바 스크립트 사용) 주셔서 감사합니다.

CSS 전용 페이지의 이중 중첩 동작을 얻을 수있었습니다 (아래 유효 웹 페이지를 방문했을 때 Firefox의 team.html을 참조하십시오. 유효하지 않은 html이 아름답게 작동하는 것을 볼 수 있습니다). 이 파이어 폭스, 크롬 및 일부 browsershots.org 테스트에 따라 IE 6 & 7의 최소 부하에서 작동하지만, 그렇지 않은 경우에 작동하지 않는 것 같습니다 - 다음과 같이 ...

라이브 페이지> [here] <입니다 IE8.

<script language="JavaScript"> 
function showHide(d) 
{ 
var onediv = document.getElementById(d); 
var divs=['hidden','hidden2','hidden3','hidden4','hidden5','hidden6','hidden7','hidden8','hidden9']; 
for (var i=0;i<divs.length;i++) 
{ 
if (onediv != document.getElementById(divs[i])) 
{ 
document.getElementById(divs[i]).style.display='none'; 
} 
} 
onediv.style.display = 'block'; 
} 
</script> 

및 관련 HTML :

<div id="greyback"><h2>Some header text</h2> 
<ul id="scrollbox"> 
<div class="listcat">A sub-header in the list</div> 
<li class="main"> 
<a href="javascript:showHide('hidden2');">Clickable List Item 
</a> 
</li> 
<span id="hidden2">Detail about the list item - the javascript pops this span up when the List Item is clicked 
<span class="team"><img src="img.jpg"></span> 
as well as some more text in the same container, plus this link: 
<a href="link.pdf"><img src="img.png" > 
</a> 
</span> 
</ul> 
</div><!-- closes greyback --> 

이 자바 스크립트 영향을받는 요소에 관련된 CSS :

.main {width:15em; background: lightblue;} 
#hidden, #hidden2, #hidden3, #hidden4, #hidden5, #hidden6, #hidden7, #hidden8, #hidden9 
{position: absolute;width: 46.5em; min-height: 20em; height: auto; left: 2em; top:16.5em; z-index:10; font-size:0.8em; text-align: left; padding: 1em; padding-bottom: 0em; background-color: #ffffff; color: #535353; border: solid #FFA500 0.15em; display: none; font-family: Arial, sans-serif; float:left; 
} 
#scrollbox span.team img {float: right; border: solid 0.1em #7ebb11; padding:2px; width:6em; margin: 0 auto; margin-bottom: 0.3em; margin-left: 0.5em; margin-top: 0em;} 
#hidden2 a, #hidden3 a, #hidden4 a, #hidden5 a, #hidden6 a, #hidden7 a, #hidden8 a, #hidden9 a {float: left; width: auto; height:2em; margin: 0 auto; margin-right: 1em; margin-bottom: 0.5em; padding-top:0.5em; color: green; font-style: bold; font-size: 100%;} 
#hidden2 a img, #hidden3 a img, #hidden4 a img, #hidden5 a img, #hidden6 a img, #hidden7 a img, #hidden8 a img, #hidden9 a img {width: 2em; margin:0 auto; float: left; height:2em; margin-top: -0.5em;} 
#hidden2 a img: hover, #hidden3 a img:hover, #hidden4 a img: hover, #hidden5 a img: hover, #hidden6 a img: hover, #hidden7 a img: hover, #hidden8 a img: hover, #hidden9 a img: hover {} 

다음

내가 헤더에 넣어 한 자바 스크립트입니다

div, ul, li 등의 자바 스크립트 스타일이 아닌 CSS 만 해당 :

,

#greyback {float: right; width: 21em; height: auto; 
background-color: #e3e3e3; margin: 0 auto; margin-top: 1em; 
margin-right: 2em; padding-top: 1em; font-family: Corbel, Calibri, 
sans-serif; border:0.25em solid #535353;} 

#greyback h2 {font-size: 0.8em; margin: 0 auto; margin-left: 1em; 
margin-right: 1em; margin-top: -0.5em; padding-top:1em;  
font-weight: bold; text-align: center; font-family: Corbel, "Century Gothic", Century-Gothic, "Avant Garde", "Avant Garde Gothic", Arial, sans-serif;color:#535353;} 

#greyback img {margin-top:1em; border: 0.5em white solid; max-width:85%; 
height: auto;} 

#scrollbox {margin: 0 auto; margin-top: 1em; margin-bottom: 1em; width:18em; list-style: none; height:auto; max-height: 21em; overflow:auto; border-bottom: 0.1em solid #FFA500; border-top: 0.1em solid #FFA500; } 

.listcat {float: left; text-align:left; width: 100%; margin-left:-2em; margin-right: 0.5em; margin-top: 0.1em; margin-bottom: 0.3em; padding-top:0.5em; color: green; font-size: 90%; font-weight:bold;} 

#scrollbox a {float: left; color:#000000; text-decoration:none; width:18em; height: auto; margin: 0 auto; margin-bottom: 0.5em; font-family: Arial, sans-serif; font-size: 0.9em; text-align:left;} 

#scrollbox a.menu {} 
#scrollbox a span {display:none; position:absolute; left:0em; top:0;} 
#scrollbox a span img {float: right; border:0; max-width:7.5em;} 
#scrollbox a span img:hover {border:0; max-width:7.8em;} 
#scrollbox a span img.team {border:solid 2px #7ebb11; padding:2px; max-width:8em; margin: 0 auto; margin-bottom: 0.3em; margin-left: 0.5em; margin-top: 0em;} 
#scrollbox a:hover {border: 0; color: #7ebb11; font-size:0.9em;} 
#scrollbox a:hover span {border: 0; color: #535353;} 
#scrollbox a span:focus {color: blue;} 
#scrollbox a:active {border:none; color: #535353; /*this is the color of the hover pop-up text */ text-decoration: none;} 
#scrollbox a:focus {border:0em solid #000; outline:0;} 

#scrollbox ul {} 
#scrollbox li {float:left; list-style: none; background: url(blank.png) no-repeat left center; margin-left: -1em; font-family:Arial, sans-serif; font-size: 0.9em;} 
#scrollbox a:active span, #scrollbox li a:active span, #scrollbox a:focus span, #scrollbox li a:focus span {display: block; width: 52.5em; min-height: 20em; height: auto; left: 1.5em; top:18em; z-index:10; font-size:0.9em; text-align: left; padding: 1em; padding-bottom: 0em; background-color: #ffffff; color: #535353; border: solid #FFA500 0.25em;} 

나는이 간단하지만, (A)는 목록의 텍스트를 자르고있다 IE6 & 7에 IE8와 (b) 목록 정렬 전혀로드되지 않은 것 같습니다 바랍니다.

대단히 감사합니다. 건배 패트릭

Answer 1

페이지가 "divScroller is not defined"오류로 인해 충돌합니다. 일부 파일을 포함하지 않은 것으로 보입니다. http://docs.jquery.com/Core/jQuery#callback