У меня есть два головных скребка: # 1 - IE8, похоже, не нравится мой javascript; # 2 - проблема выравнивания CSS во всех IE6 и 7. Большое спасибо за различные предложения (использовать javascript) на мой последний вопрос - очень полезно.
Мне удалось получить двойное вложенное поведение страницы, предназначенной только для CSS (см. Team.html в Firefox, когда вы открываете живую страницу ниже, чтобы увидеть прекрасно работающий неподтвержденный HTML), реплицированный с моим первым в истории JavaScript как следует ...
Текущая страница>> здесь ] <- она работает с Firefox, Chrome и, по крайней мере, загружается в IE 6 и 7 в соответствии с некоторыми тестами browsershots.org, но в остальном, похоже, не работает в IE8. </p>
Вот javascript, который я поместил в шапку:
<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, относящийся к этим элементам, связанным с javascript:
.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 {}
И CSS, который просто выполняет не-JavaScript-стилизацию для div, ul, li и т. Д .:
#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;}
Я надеюсь, что это просто, но (а) он не загружается вообще в IE8 и (б) выравнивание списка в IE6 и 7 обрезает текст списка.
Любые предложения очень ценятся!
ура
Patrick