CODEWITHSUNDEEP
htmlcssfirefoxtabsmozilla
pkr
pkr

Reputation: 1

CSS Tab issue in Mozilla

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!

Upvotes: 0

Views: 261

Answers (1)

ᴍᴇʜᴏᴠ
ᴍᴇʜᴏᴠ

Reputation: 5256

That's how they look in my Firefox 3.6.10

Upvotes: 1

Related Questions