<UL> отображается неправильно - отлично работает во всех браузерах, кроме Firefox 2 (включая скриншоты) - PullRequest
0 голосов
/ 07 апреля 2010

Хорошо, вот скриншот того, как выглядит SUPPOSED :

ul отображается правильно http://i40.tinypic.com/2dqnd7d.png

А вот скриншот того, как это выглядит в Firefox 2 (как на Mac, так и на ПК) ...

ul отображается неправильно http://i43.tinypic.com/2mcfzgz.png

Любой другой браузер понимает это правильно (даже IE6 ?!).

Исходный код представляет собой неупорядоченный список с использованием спрайтов с эффектами наведения. Вот код для вас:

HTML:

<div id="votes">
    <ul id="voteOptions">
        <li id="labour"><a href="#">Labour</a></li>
        <li id="conservative"><a href="#">Conservative</a></li>
        <li id="libdem"><a href="#">Liberal Democrat</a></li>
    </ul>
</div>

CSS:

#votes {
 width:653px;
 position:relative;
 top:-440px;
 margin-left:auto;
 margin-right:auto;
}

ul#voteOptions li a{  
    height: 75px;  
    float: left;  
    text-indent: -9999px;  
    margin-bottom:50px;
}  

ul#voteOptions li#labour a{  
    width: 653px;  
    background: url('votes.png') no-repeat 0px -2px; 
}

ul#voteOptions li#labour a:hover{  
    background: url('votes.png') no-repeat 0px -77px;  
}

ul#voteOptions li#conservative a{  
    width: 653px;  
    background: url('votes.png') no-repeat 0px -152px;  
}
//...
//(etc. etc - code repeats for conservative and libdem, you get the idea).

Так что я делаю не так? Я перепробовал много вещей, но не могу заставить эту чертову штуку работать в FF2.

Jack

1 Ответ

1 голос
/ 07 апреля 2010

ul#voteOptions li { clear: both; } устраняет проблему?

...