I'm trying to figure out why my tabs look fine in webkit based browsers, and even IE7+. For some reason, they look wonky in Mozilla. Can anyone give me some tips to fix this?
Here is an example: http://jsbin.com/icomo4
Here is the css:
<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> The html:
<ul id="activity-tabs"> <li class="tab1"><a href="">Tab 1</a></li> <li class="tab2"><a href="">Tab 2</a></li> </ul> Any help would be greatly appreciated. Thanks!
</html>and that shows up in Safari too.