Css проблема с переключением изображений - не удается получить горизонтальную навигацию в IE - PullRequest
Новая
       6

Css проблема с переключением изображений - не удается получить горизонтальную навигацию в IE

0 голосов
/ 08 ноября 2010

Да, я нарисовал пробел на этом, и немного поиграв с ним, CSS не так аккуратен, как хотелось бы. Изображения навигации / прокрутки работают так, как я хочу в Firefox, но я не могу заставить их работать в IE. IE складывает ролловер ссылки друг на друга в основном. http://www.plumberkendal.co.uk <--- это загружено здесь, и вы можете видеть, что я имею в виду. </p>

1) дисплей: встроенный; /// похоже убивает ссылки как в IE, так и в FF.

2) дисплей: встроенный блок; /// Это то, что он теперь установлен, который, кажется, работает FF и Chrome, но не IE. Любая помощь с благодарностью!

CSS 

#nav_bar
{
margin-top: 10px;
float: right;
}

#navigation li, #navigation a
{
height:32px; display: inline-block;  
}

#navigation li 
{
margin:0; padding:0; 
list-style: none outside none; 
display: inline-block;
} 

#home li, #home a{width: 90px;}
#home{left: 0px; width: 90px;}
#home {background: url('../images/nav_bar.png') 0 0; }
#home a:hover {background: url('../images/nav_bar.png') 0 -39px; }

#portfolio li, #portfolio a {width: 128px; }
#portfolio {left: 91px; width: 128px; }
#portfolio {background: url('../images/nav_bar.png') -94px 0px;  }
#portfolio a:hover{background: url('../images/nav_bar.png') -94px -39px;}

#contact li, #contact a {width: 90px; }
#contact {left: 130px; width: 90px; }
#contact { background: url('../images/nav_bar.png') -306px 0px;  }
#contact a:hover {background: url('../images/nav_bar.png') -306px -39px;  }

HTML 

<div id="nav_bar">

<ul id="navigation">

<li id="home"><a href="index.php"><span>home</span></a></li>
<li id="portfolio"><a href="portfolio.php"><span>portfolio</span></a></li>
<li id="contact"><a href="contact.php"><span>contact</span></a></li> 
</ul>           

</div>

1 Ответ

2 голосов
/ 08 ноября 2010

Попробуйте с этим кодом (не проверял, но я думаю, что он должен работать): 

#nav_bar            { margin-top: 10px; float: right; }
#navigation         { overflow:hidden; }
#navigation li      { float:left; margin:0; padding:0; list-style: none outside none; background-image:url('../images/nav_bar.png'); }
#navigation a       { display:block; height:32px; }
#navigation a:hover { background-image:url('../images/nav_bar.png'); }

#home               { background-position:0 0; }
#home a             { width:90px; }
#home a:hover       { background-position:0 -39px; }

#portfolio          { background-position:-94px 0; }
#portfolio a        { width:128px; }
#portfolio a:hover  { background-position:-94px -39px; }

#contact            { background-position:-306px 0; }
#contact a          { width:90px; }
#contact a:hover    { background-position:-306px -39px; }
...