jquery tabs not working in ie 7

Question

I am trying to use Jquery Tabs in a website and have styled them up a bit... I have asked a friend to check how it looks in ie 7 and it goes bad... all the tabs

elements are coming out as an unordered list....

Here is what they should look like and do in all current browsers:

And here is what they look like in ie 7

another issue is that the elements contained within the non-selected tabs should remain hidden while the contents of the selected tab should display below it... The whole system is broken in ie and just displays the contents of all the non selected tabs as well

the CODE:

<div class = 'midContentContainer'>
                <div id = 'buttonAddBlog'>
                    <a href = '#tabs-3'></a>
                </div>
                <div id="tabs">
                  <ul>
                    <li><a id = 'tab1'href="#tabs-1">Questions</a></li>
                    <li><a id = 'tab2'href="#tabs-2">Blogs</a></li>
                    <li><a id = 'tab3'href="#tabs-3">Create Your Own <span style = 'color:#0499ff'> NEW! </span></a></li>
                  </ul>

                  <div id="tabs-1">
                    <p style = 'font-size: 14px; font-family: "Helvetica Neue",sans-serif; color: #444;'> Ask any academic question and our Quick GPA team and active community will respond in a timely manner. Whether it's tips on school, math equations, or even philosophical studies, we are there to make sure you get the answer you need. </p>

                    <br/>
                    <div class = 'createYourOwnText' style = 'background-color: #fefefe; padding: 10px; border: 1px dashed #1585b8;'>
                        <strong> Ask your own question by clicking the 'create your own' link above! </strong>
                        </div>
                    <h3 id = 'questionsHeader'> Questions </h3>


                   <?php
                            $allPostsArray = retrieveAllPosts();
                            displayAllPostsFrom($allPostsArray);
                        ?>
                        <div class = 'dialog'>
                        </div>
                  </div>
                  <div id="tabs-2">
                    <p style = 'font-size: 14px; font-family: "Helvetica Neue",sans-serif; color: #444;'> Read our wide variety of blogs, written by both the Quick GPA Team and our active community. These cover all spectrums of academics. Now, you can create your own blog to be posted on our site. </p>

                    <br/>
                    <div class = 'createYourOwnText' style = 'background-color: #fefefe; padding: 10px; border: 1px dashed #1585b8;'>
                        <strong> Create your own article by clicking the 'create your own' link above! </strong>
                        </div>
                    <h3 id = 'questionHeader'> Articles </h3>
                    <?php
                        $allPostsArray = retrieveAllArticles();
                        displayAllArticlesFrom($allPostsArray);
                    ?>

                  </div>
                  <div id="tabs-3">
                    <div id = 'tabs2'>
                        <ul style = 'text-transform: uppercase;'>
                            <li><a id = 'tab1'href="#tabs-4">Ask a Question</a></li>
                            <li><a id = 'tab2'href="#tabs-5">Write a Blog</a></li>
                          </ul>
                            <div id = 'tabs-4' style = 'height: 460px;'>
                            <form action = "insertBlog.php" id = 'questionInsertForm' method = 'post'>
                                    <span style = 'font-size: 15px; font-weight: bold; font-family: "Helvetica Neue";'>Question</span><br/><br/>
                                    <input placeholder = 'title of your question? be specific...'style = 'border: 1px solid #bbb; width: 250px;'type = 'text' name = 'subject' ><br/><br/>
                                    <span style = 'font-size: 15px;font-weight: bold; font-family: "Helvetica Neue";'>More Detail (Optional)</span><br/><br/>
                                    <textarea name = 'body' style = 'width: 85%; height: 120px;'></textarea>
                                    <br/><br/>

                                    <input type = 'text' style= 'width: 400px; font-size: 12px;'name = 'tags' placeholder = "what's your question category"><br/><br/>
                                    <input type = 'text' style = 'width: 400px;' id = 'email2'name = 'user' placeholder = 'Your email...'> 
                                    <span id = 'questionError' style = 'font-size: 12px; color: red;font-family: "Helvetica Neue";'>
                                        <br/>
                                        Your Email information is completely hidden to users and will be used only to notify you when you get a response.
                                        <br/>
                                    </span>
                                    <br/>
                                    <button id = 'questionButton' class = 'btn blue'> Create </button>
                                </form>
                            </div>
                            <div id = 'tabs-5' style = 'height: 460px;'>
                                <form action = "insertArticle.php" id = 'articleInsertForm' method = 'post'>
                                    <span style = 'font-size: 15px; font-weight: bold; font-family: "Helvetica Neue";'>Title</span><br/><br/>
                                    <input placeholder = 'Title of your article, be specific...'style = 'border: 1px solid #bbb; width: 250px;'type = 'text' name = 'subject' ><br/><br/>
                                    <span style = 'font-size: 15px;font-weight: bold; font-family: "Helvetica Neue";'>Post</span><br/><br/>
                                    <textarea name = 'body' style = 'width: 85%; height: 120px;'></textarea><br/><br/>

                                    <input type = 'text' style= 'width: 400px; font-size: 12px;'name = 'tags' placeholder = "what's your post category"><br/><br/>
                                    <input type = 'text' style= 'width: 400px; font-size: 12px;' id = 'email' name = 'user' placeholder = 'Your email...'> 
                                    <span id = 'emailError' style = 'font-size: 12px; color: red;font-family: "Helvetica Neue";'>
                                        <br/>
                                        Your Email information is completely hidden to users and will be used only to notify you when you get a response.
                                        <br/>
                                    </span> 
                                    <br/>
                                    <button id = 'submitArticle' class = 'btn blue'> Create </button>
                                </form>
                            </div>
                        </div>
                  </div>
                </div>

                <?php include_once('includes/activeSideBar.php'); ?>

            </div>

            <?php include_once('includes/footer.php'); ?>
        </div>
    </div>
    <?php require_once('includes/facebookShareFooter.php'); ?>
</div>

and the STYLESHEETS:

#tabs{
    width: 68%;
    float: left;
    margin-top: 20px;
    background: transparent; 
    border: none; 
}
#tabs ul{
    list-style: none;
}
#tabs .ui-widget-header { 
    background: transparent; 
    border: none; 
    border-bottom: 1px solid #c0c0c0; 
    -moz-border-radius: 0px; 
    -webkit-border-radius: 0px; 
    border-radius: 0px; 
} 
#tabs .ui-tabs-nav .ui-state-default { 
    background: transparent; 
    border: none; 
} 
#tabs .ui-tabs-nav .ui-state-active { 
    background: transparent url(arrow2.png) no-repeat bottom center; 
    border: none; 
} 
#tabs .ui-tabs-nav .ui-state-default a { 
    color: #c0c0c0; 
    outline: none;
} 
#tabs .ui-tabs-nav .ui-state-active a { 
    color: #459e00; 
    outline: none;
}

Upvotes: 0

Views: 370

Answer 1

If its not working do it using Jquery,

<ul>
    <li class="nav_li"><a id = 'tab1'href="#tabs-1">Questions</a></li>
    <li class="nav_li"><a id = 'tab2'href="#tabs-2">Blogs</a></li>
    <li class="nav_li"><a id = 'tab3'href="#tabs-3">Create Your/li>
</ul>

$(function(){
   $(".nav_li").css("float","left"); 
})

I have updated code , try this