Я пытаюсь выяснить, почему мои вкладки выглядят хорошо в браузерах на основе webkit и даже в IE7 +.По какой-то причине они выглядят странно в Mozilla.Кто-нибудь может дать мне несколько советов, как это исправить?
Вот пример: http://jsbin.com/icomo4
Вот код:
<style type="text/css">
ul#activity-tabs {
text-align: right;
border-bottom: 1px solid #cccccc;
list-style-type: none;
padding: 3px 10px 3px 10px;
}
ul#activity-tabs li {
display: inline;
}
ul#activity-tabs li.tab1 {
background-color: #fff;
}
ul#activity-tabs li.tab1 a {
padding: 3px 4px;
border: 1px solid #cccccc;
background-color: #fff;
color: #333333;
position: relative;
top: 1px;
margin-right: 0px;
text-decoration: none;
border-bottom: none;
padding-top: 4px;
}
ul#activity-tabs li.tab1 a:hover {
background: #fff;
}
ul#activity-tabs li.tab2 {
background-color: #fff;
}
ul#activity-tabs li.tab2 a {
padding: 3px 4px;
background-color: #fff;
color: #333333;
margin-right: 0px;
text-decoration: none;
border-bottom: none;
padding-top: 4px;
}
ul#activity-tabs li.tab2 a:hover {
padding: 3px;
border-top: 1px solid #cccccc;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
}
</style>
HTML:
<ul id="activity-tabs">
<li class="tab1"><a href="">Tab 1</a></li>
<li class="tab2"><a href="">Tab 2</a></li>
</ul>
Любая помощь будет принята с благодарностью.Спасибо!