Интересно, сможет ли кто-нибудь помочь?Я пытался и пытался найти решение самостоятельно, но, похоже, ничего не работает.
У меня есть горизонтальный список, и когда пользователь нажимает на одну из этих ссылок, скрытый div появляется сразу под списком, заполняяширина всего контейнера (950 пикселей).
Это работает абсолютно идеально в Firefox, Safari и IE8, но, похоже, не работает в IE7 (и, возможно, меньше, я не смог проверить).
В IE7, div вызывает разрыв списка, помещая последний элемент списка на дополнительную строку и (в результате, я полагаю?), Продвигая div дальше вниз по странице, поэтому он не заполняетсянижняя часть списка.На самом деле, он появляется прямо под div с идентификатором «lightsbar ».
Вот соответствующий код - я буду вечно благодарен за любые предложения, которые кто-либо может иметь!
Выможно увидеть эту проблему «в действии» на http://www.totalbackpacker.co.uk. (Интересно, что если я проведу быстрый тест только с соответствующими битами кода на http://www.martinjefferies.co.uk/test.html,, проблема не в этом. Я не уверенесли это помогает или нет?!)
Спасибо,
Мартин
HTML:
<div id="outer">
<div id="wrapper">
<div id="header">
</div>
<div id="navbar">
<ul>
<li class="left"><a href="#" title="Home"><img src="<?php bloginfo('template_url'); ?>/images/navbar/home.png" alt="Home" /></a></li>
<li><a href="#" title="Explore by country" onClick="toggle('submenu')"><img src="<?php bloginfo('template_url'); ?>/images/navbar/explorebycountry.png" alt="Explore by country" /></a></li>
<li><a href="#" title="Search"><img src="<?php bloginfo('template_url'); ?>/images/navbar/search.png" alt="Search" /></a></li>
<li><a href="#" title="Contact"><img src="<?php bloginfo('template_url'); ?>/images/navbar/contact.png" alt="Contact" /></a></li>
<li class="right"><a href="#" title="About"><img src="<?php bloginfo('template_url'); ?>/images/navbar/about.png" alt="About" /></a></li>
<div id="submenu" style="display: none; z-index:500;">
<div id="submenu-inner">
<?php
$categories = get_categories('child_of=7');
$count = 1; ?>
<div class="left">
Left hand links go here
</div>
<div class="right">
Right hand links go here
</div>
<div class="clearer"></div>
<br /><a href="#" title="Close menu" onClick="toggle('submenu')">Close menu</a>
</div>
</div>
</ul>
<div class="clearer"></div>
<div id="highlightsbar">
<span class="title">Promotion:</span> Promotion info goes here.
</div><!--highlightsbar-->
</div><!--navbar-->
<div id="content">
</div>
</div>
</div>
CSS:
#outer {
margin:0 auto;
background:#E2E2E2;
width:100%;
}
#wrapper {
text-align:left;
width:950px;
margin-left:auto;
margin-right:auto;
background:#FFFFFF;
padding:0 0 50px 0;
}
#header {
background:#be023a;
height:100px;
width:950px;
margin:0;
padding:0;
}
#navbar {
background:#cc0000 url('http://www.totalbackpacker.co.uk/wp-content/themes/totalbackpacker/images/navbar.jpg') repeat-x;
height:70px;
width:950px;
}
#navbar ul {
float:left;
list-style:none;
margin:7px 0 0 10px;
padding:0;
height:40px;
}
#navbar li {
float:left;
}
#navbar li a {
display:block;
padding:3px 10px;
margin:0;
border-right:1px solid #ffffff;
font-family:Helvetica,Arial,sans-serif;
font-size:15px;
line-height:15px;
color:#ffffff;
text-decoration:none;
text-transform:uppercase;
font-weight:normal;
}
#navbar li a:hover {
background:#cc0000;
}
#navbar img {
border:0;
}
#highlightsbar {
padding:0;
margin:3px 0 0 20px;
font-family:Helvetica,Arial,sans-serif;
font-size:12px;
line-height:12px;
color:#666666;
text-decoration:none;
}
#highlightsbar .title {
text-transform:uppercase;
float:left;
font-weight:bold;
}
#highlightsbar .textwidget {
float:left;
padding:0;
margin:0 0 0 5px;
}
.clearer {
clear:both;
}
#submenu {
background:url('../images/submenushadow.png') left bottom repeat-x;
margin:30px 0 0 -10px;
padding:0 0 50px 0;
z-index:5000;
position:relative;
width:950px;
display:block;
}
#submenu-inner {
background:#ffffff;
border-left:5px solid #be023a;
border-bottom:5px solid #be023a;
border-right:5px solid #be023a;
padding:20px;
}
#submenu-inner .right {
float:left;
width:140px;
padding:0;
margin:0;
}
#submenu-inner .left {
float:left;
width:140px;
padding:0;
margin:0;
}
JavaScript:
<script type="text/javascript" language="javascript">
function toggle(id)
{
el = document.getElementById(id);
var display = el.style.display ? '' : 'none';
el.style.display = display;
}
window.onload=function()
{document.getElementById('submenu').style.display='none';}
</script>