Tabs in IE cascade and show bullets

Tabs in IE cascade and show bullets

I know there has been a lot of problems with tabs in IE, but I can't seem to find a fix based on what I've searched on.  It obviously works fine in other browsers, but in IE the tabs cascade down instead of displaying side by side and the bullets are shown to the right in a jumbled up fashion.  I can't seem to figure out why.
  1. <script type="text/javascript">
                jQuery(document).ready(function() {

                jQuery('.tabs a').click(function(){
                        switch_tabs(jQuery(this));
                });

                switch_tabs(jQuery('.defaulttab'));

                });

                function switch_tabs(obj)
                {
                        jQuery('.tab-content').hide();
                        jQuery('.tabs a').removeClass("selected");
                        var id = obj.attr("rel");

                        jQuery('#'+id).show();
                        obj.addClass("selected");
                }
            </script>



















Html

  1. <div id="wrapper">
                <ul class="tabs">
                    <li><a href="#" class="defaulttab" rel="tabs1">Year/Make/Model</a></li>
                    <li><a href="#" rel="tabs2">Required/Recommended/Replacement</a></li>
                    <li><a href="#" rel="tabs3">General</a></li>
                    <li><a href="#" rel="tabs4">Images</a></li>
                </ul>
            <!--Tab Content -->
                <div class="tab-content" id="tabs1"></div> //








CSS
  1. #wrapper {
        margin: .5in;
    }

  2. ul.tabs {
        width:9in;
        float: left;
        margin:auto;
        padding:2px;
    }
    ul.tabs li {
        display:block;
        padding:0 5px;
    }
    ul.tabs li a {
        display:block;
        padding:7px;
        float: left;
        font-size:0.8em;
        font-family: verdana;
        background-color:#FFF;
        border: 1px solid #FFF;
        color:#4591AD;
        text-decoration:none;
        margin: 2px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    .selected {
        text-shadow: 0px 1px 1px #4d4d4d;
    }
    .tab-content {
        clear:both;
        border-top: 2px solid #FFF;
        background:#37B6CE;
        height: auto;
        width: 100%;
        padding:10px;
        text-align: left;
    }