Проблемы с IE7 CSS (отлично работает IE8) - PullRequest
Новая
       10

Проблемы с IE7 CSS (отлично работает IE8)

0 голосов
/ 25 июля 2011

Я пытаюсь создать список учеников, который можно будет расширять при нажатии на имя ученика.Я создал этот проект на своем домашнем компьютере с IE8, и сегодня утром, когда я привел его в работу, проверить его не удалось.Мой рабочий компьютер использует IE7, и я думаю, что скрывает вещи, это мой CSS, используемый в моем JQuery.

В чем проблема, я хочу, чтобы все div'ы начали с hide (), и когда пользователь нажимает наПодразделение расширяется, чтобы показать результаты тестов студентов.Ну, что происходит, это только первый div div hides (), а первый div - это единственный div, который будет раскрываться и сворачиваться при нажатии.Остальные не функционируют вообще, и они показывают расширенный.Надеюсь, я достаточно хорошо объяснил свою проблему:)

Примечание: Точно так же, как большинство здесь, я пытаюсь изучить лучшие практики для моего кодирования, пожалуйста, сообщите мне, что не так или как я могу улучшить то, что имеюкодированный.

style.css 

#wrapper
{
    width:100%;
}
#main-container
{
    width: 800px;
    margin-left:auto;
    margin-right:auto;
    font-family: Verdana;
    font-size: 12px;
}
#header
{
    border: 1px solid #999;
    border-bottom: none;
    background-color: #ccc;
    font-weight: bold;
}
#header ul
{
    display: inline;
}
#header ul li
{
    float: left;
    padding-left: 10px;
    list-style: none;
    display: inline;
    width: 200px;
}
#footer
{
    margin-left: auto;
    margin-right: auto;
    width: 800px;
    font-size: 9px;
}
#footer a
{
    float: right;
    text-decoration: none;
    color: #666;
    font-size: 9px;
}
#footer a:hover
{
    text-decoration: underline;
    color: blue;
}
.student
{
    border: 1px solid #999;
    border-bottom: none;
    cursor: default;
}
.student:hover
{
    background-color: #f6f6f6;
}
.student ul
{
    display: inline;
}
.student ul li
{
    float: left;
    padding-left: 10px;
    list-style: none;
    display: inline;
    width: 200px;
}
.student-scores
{
    height: 206px;

}
.student-scores ul
{
    display: inline;
}
.student-scores ul li
{
    padding-left: 100px;
    width: 699px;
    list-style: none;
    display: inline;
    border-top: 1px dotted #999;
}
.student-scores ul li:hover
{
    background-color: #FFCC66;
}
.lesson
{
     font-size: 12px;
}
.date
{

    font-size: 10px;
    margin-left: 50px;
}
.score
{

    font-size: 10px;
    margin-left: 50px;
}

jquery.js 

$(document).ready(function()
{
    $('.students div:last-child').css("border-bottom","1px solid #999");

    $('div.student-scores').css("border-bottom","none");

    $('div.student-scores').hide();

    $('div.student').click(function()
    {
            $(this).find('.student-scores').slideToggle();
    });
});

index.php 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>JSON Testing</title>
<script type="text/javascript" src="library/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="library/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="library/style.css" />
</head>

<body>
<div id="wrapper">
    <div id="main-container">
        <div id="header">
            <ul>
                <li>Employee ID</li>
                <li>Last Name</li>
                <li>First Name</li>
            </ul>
         </div>
         <div id="students">
             <div class="student">
                 <ul>
                     <li class="id">0425655</li>
                     <li class="lname">Doe</li>
                     <li class="fname">John</li>
                 </ul>
                 <div class="student-scores">
                     <ul>
                         <li><span class="lesson">Lesson <strong>01</strong></span><span class="date">Submission Date: <strong>Not completed</strong></span></li>
                         <li><span class="lesson">Lesson <strong>02</strong></span><span class="date">Submission Date: <strong>04/26/2011</strong></span><span class="score">Score: <strong>98</strong></span></li>
                         <li><span class="lesson">Lesson <strong>03</strong></span><span class="date">Submission Date: <strong>04/27/2011</strong></span><span class="score">Score: <strong>78</strong></span></li>
                         <li><span class="lesson">Lesson <strong>04</strong></span><span class="date">Submission Date: <strong>04/28/2011</strong></span><span class="score">Score: <strong>62</strong></span></li>
                         <li><span class="lesson">Lesson <strong>05</strong></span><span class="date">Submission Date: <strong>04/29/2011</strong></span><span class="score">Score: <strong>100</strong></span></li>
                         <li><span class="lesson">Lesson <strong>06</strong></span><span class="date">Submission Date: <strong>Not completed</strong></span></li>
                         <li><span class="lesson">Lesson <strong>07</strong></span><span class="date">Submission Date: <strong>04/31/2011</strong></span><span class="score">Score: <strong>73</strong></span></li>
                         <li><span class="lesson">Lesson <strong>08</strong></span><span class="date">Submission Date: <strong>04/32/2011</strong></span><span class="score">Score: <strong>88</strong></span></li>
                         <li><span class="lesson">Lesson <strong>09</strong></span><span class="date">Submission Date: <strong>04/33/2011</strong></span><span class="score">Score: <strong>81</strong></span></li>
                         <li><span class="lesson">Lesson <strong>10</strong></span><span class="date">Submission Date: <strong>04/34/2011</strong></span><span class="score">Score: <strong>60</strong></span></li>
                         <li><span class="lesson">Lesson <strong>11</strong></span><span class="date">Submission Date: <strong>04/35/2011</strong></span><span class="score">Score: <strong>76</strong></span></li>
                         <li>need to add <strong>[average][not completed counter][percentage complete counter]</strong></li>
                     </ul>
                 </div>
             </div>
             <div class="student">
                 <ul>
                     <li class="id">442326</li>
                     <li class="lname">Smith</li>
                     <li class="fname">Jane</li>
                 </ul>
                 <div class="student-scores">
                     <ul>
                         <li><span class="lesson">Lesson <strong>01</strong></span><span class="date">Submission Date: <strong>02/25/2011</strong></span><span class="score">Score: <strong>1</strong></span></li>
                         <li><span class="lesson">Lesson <strong>02</strong></span><span class="date">Submission Date: <strong>04/26/2011</strong></span><span class="score">Score: <strong>2</strong></span></li>
                         <li><span class="lesson">Lesson <strong>03</strong></span><span class="date">Submission Date: <strong>04/27/2011</strong></span><span class="score">Score: <strong>3</strong></span></li>
                         <li><span class="lesson">Lesson <strong>04</strong></span><span class="date">Submission Date: <strong>04/28/2011</strong></span><span class="score">Score: <strong>4</strong></span></li>
                         <li><span class="lesson">Lesson <strong>05</strong></span><span class="date">Submission Date: <strong>04/29/2011</strong></span><span class="score">Score: <strong>5</strong></span></li>
                         <li><span class="lesson">Lesson <strong>06</strong></span><span class="date">Submission Date: <strong>04/30/2011</strong></span><span class="score">Score: <strong>6</strong></span></li>
                         <li><span class="lesson">Lesson <strong>07</strong></span><span class="date">Submission Date: <strong>04/31/2011</strong></span><span class="score">Score: <strong>7</strong></span></li>
                         <li><span class="lesson">Lesson <strong>08</strong></span><span class="date">Submission Date: <strong>04/32/2011</strong></span><span class="score">Score: <strong>8</strong></span></li>
                         <li><span class="lesson">Lesson <strong>09</strong></span><span class="date">Submission Date: <strong>04/33/2011</strong></span><span class="score">Score: <strong>9</strong></span></li>
                         <li><span class="lesson">Lesson <strong>10</strong></span><span class="date">Submission Date: <strong>04/34/2011</strong></span><span class="score">Score: <strong>10</strong></span></li>
                         <li><span class="lesson">Lesson <strong>11</strong></span><span class="date">Submission Date: <strong>04/35/2011</strong></span><span class="score">Score: <strong>11</strong></span></li>
                         <li>need to add <strong>[average][not completed counter][percentage complete counter]</strong></li>
                     </ul>
                 </div>
             </div>
             <div class="student">
                 <ul>
                     <li class="id">456356</li>
                     <li class="lname">Jones</li>
                     <li class="fname">Mike</li>
                 </ul>
                 <div class="student-scores">
                     <ul>
                         <li><span class="lesson">Lesson <strong>01</strong></span><span class="date">Submission Date: <strong>03/25/2011</strong></span><span class="score">Score: <strong>1</strong></span></li>
                         <li><span class="lesson">Lesson <strong>02</strong></span><span class="date">Submission Date: <strong>04/26/2011</strong></span><span class="score">Score: <strong>2</strong></span></li>
                         <li><span class="lesson">Lesson <strong>03</strong></span><span class="date">Submission Date: <strong>04/27/2011</strong></span><span class="score">Score: <strong>3</strong></span></li>
                         <li><span class="lesson">Lesson <strong>04</strong></span><span class="date">Submission Date: <strong>04/28/2011</strong></span><span class="score">Score: <strong>4</strong></span></li>
                         <li><span class="lesson">Lesson <strong>05</strong></span><span class="date">Submission Date: <strong>04/29/2011</strong></span><span class="score">Score: <strong>5</strong></span></li>
                         <li><span class="lesson">Lesson <strong>06</strong></span><span class="date">Submission Date: <strong>04/30/2011</strong></span><span class="score">Score: <strong>6</strong></span></li>
                         <li><span class="lesson">Lesson <strong>07</strong></span><span class="date">Submission Date: <strong>04/31/2011</strong></span><span class="score">Score: <strong>7</strong></span></li>
                         <li><span class="lesson">Lesson <strong>08</strong></span><span class="date">Submission Date: <strong>04/32/2011</strong></span><span class="score">Score: <strong>8</strong></span></li>
                         <li><span class="lesson">Lesson <strong>09</strong></span><span class="date">Submission Date: <strong>04/33/2011</strong></span><span class="score">Score: <strong>9</strong></span></li>
                         <li><span class="lesson">Lesson <strong>10</strong></span><span class="date">Submission Date: <strong>04/34/2011</strong></span><span class="score">Score: <strong>10</strong></span></li>
                         <li><span class="lesson">Lesson <strong>11</strong></span><span class="date">Submission Date: <strong>04/35/2011</strong></span><span class="score">Score: <strong>11</strong></span></li>
                         <li>need to add <strong>[average][not completed counter][percentage complete counter]</strong></li>
                     </ul>
                 </div>
             </div>
         </div>
     </div>
<div id="footer">Signal Electrical Fundamentals Tracker System<a href="upload.php" title="Login required">UPLOADER</a></div>
</div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...