CSS, проблема с border

Тема в разделе "CSS, HTML, Web 2.0, верстка по web-стандартам", создана пользователем Lusena, 20.02.2008.

  1. Lusena
    Offline

    Lusena Недавно здесь

    Регистрация:
    20.12.2007
    Сообщения:
    20
    Симпатии:
    0
    Пол:
    Женский
    Помогите пожалуйста...ничего не могу понять...для нескольких элементов таблицы использую аналогичные классы, в т.ч. обрамление рамкой, и почему-то в части оно работает, а в части нет (а именно - в последних ячейках таблицы)

    Вот кусок html-кода:
    Код (html):
    1. <table style="text-align: left; width: 100%;" border="0" cellpadding="0" cellspacing="0">
    2.  
    3.   <tbody>
    4.  
    5. <tr>
    6.  
    7.              <td valign="top" width="160">
    8.  
    9.  
    10. <table cellpadding="0" cellspacing="0" width="160">
    11.  <tr>
    12. <td class="topblock">
    13. SOMETEXT
    14. </td>
    15. </tr>
    16. <tr>
    17. <td class="bodyblock">
    18. SOMETEXT
    19. </td>
    20. </tr>
    21. <tr>
    22. <td class="endblock" ><!--тут нет текста--></td>
    23. </tr>
    24. </table>
    25.      
    26.                 </td>
    27.  
    28.                 <td valign="top" width="100%">
    29.       <table cellpadding="0" cellspacing="0" width="100%">
    30. <tr>
    31. <td class="topblock2">
    32. <div class="titleblock">SOMETEXT</div>
    33. </td>
    34. </tr>
    35.  <tr>
    36. <td class="bodyblock2">SOMETEXT
    37. </td>
    38.  </tr>
    39. <tr>
    40. <td class="endblock2"><!--тут нет текста-->
    41. </td>
    42. </tr>
    43. </tbody>
    44. </table>
    45.                               </td>
    46.                         <td valign="top" width="160" >
    47.                  
    48. <table cellpadding="0" cellspacing="0" width="160">
    49.  <tr>
    50. <td class="topblock">
    51. SOMETEXT
    52. </td>
    53. </tr>
    54. <tr>
    55. <td class="bodyblock">
    56. SOMETEXT
    57. </td>
    58. </tr>
    59. <tr>
    60. <td class="endblock" ><!--тут нет текста--></td>
    61. </tr>
    62. </table>
    63.  
    64.                    </td>
    65.                    </tr>
    66. </tbody>
    67. </table>
    68.  
    69. </body>
    70. </html>


    Вот CSS

    Код (CODE):
    1. tr.endblock2, td.endblock2 {
    2.     background-color: #E09BFF;
    3.     color: #0000CD;
    4.     border: 1px solid #0000CD;
    5.     height: 25px;
    6.     margin: 0px 0px 0px 0px;
    7.     vertical-align: top;
    8. }
    9. tr.endblock, td.endblock {
    10.     background-color: #b4f8fc;
    11.     background-image: url(images/end.gif);
    12.     width: 160px;
    13.     height: 25px;
    14.     background-position: center;
    15.     background-repeat: no-repeat;
    16.     margin: 0px 0px 0px 0px;
    17.     vertical-align: top;
    18.     border: 1px solid #006400;
    19. }
    20. .titleblock, .titleblock2 {
    21.     color: White;
    22.     font-size: 14px;
    23.     font-weight: bold;
    24. }
    25. tr.topblock2, td.topblock2 {
    26.     background-color: #E09BFF;
    27.     color: #0000CD;
    28.     border: 1px solid #0000CD;
    29.     height: 25px;
    30.     margin: 0px 0px 0px 0px;
    31.     vertical-align: top;
    32. }
    33. tr.bodyblock2, td.bodyblock2{
    34.     background-color: #FFFFF2;
    35.     border-left-style: solid;
    36.     border-left-width: 1px;
    37.     border-left-color: #0000CD;
    38.     border-right-style: solid;
    39.     border-right-width: 1px;
    40.     border-right-color: #0000CD;   
    41.     margin: 0px 0px 0px 0px;
    42.     vertical-align: top;
    43. }


    И в общем проблема в том, что ячейки с классом endblock, endblock2 рамкой не очерчиваются, хотя всё другое заданное форматирование для них работает, ячейки других классов для которых задан border - обрамляются как надо...

    :( чё-то ничего не могу понять, почему так....:'(
     
  2.  
  3. AmmiAk
    Offline

    AmmiAk Укротитель браузеров

    Регистрация:
    25.07.2007
    Сообщения:
    633
    Симпатии:
    34
    Пол:
    Мужской
    Ответ: CSS, проблема с border

    Игра "Угадай-ка!", найди 10 отличий в куске HTML-кода:
    Код (html):
    1. <table width="100%">
    2.     <tr>
    3.         <td width="160" valign="top">
    4.             <table width="100%">
    5.                 <tr>
    6.                     <td class="topblock">SOMETEXT</td>
    7.                 </tr>
    8.                 <tr>
    9.                     <td class="bodyblock">SOMETEXT</td>
    10.                 </tr>
    11.                 <tr>
    12.                     <td class="endblock"><!--тут нет текста--></td>
    13.                 </tr>
    14.             </table>
    15.         </td>
    16.         <td valign="top">
    17.             <table width="100%">
    18.                 <tr>
    19.                     <td class="topblock2">
    20.                         <div class="titleblock">SOMETEXT</div>
    21.                     </td>
    22.                 </tr>
    23.                 <tr>
    24.                     <td class="bodyblock2">SOMETEXT</td>
    25.                 </tr>
    26.                 <tr>
    27.                     <td class="endblock2"><!--тут нет текста--></td>
    28.                 </tr>
    29.             </table>
    30.         </td>
    31.         <td width="160" valign="top">
    32.             <table width="100%">
    33.                 <tr>
    34.                     <td class="topblock">SOMETEXT</td>
    35.                 </tr>
    36.                 <tr>
    37.                     <td class="bodyblock">SOMETEXT</td>
    38.                 </tr>
    39.                 <tr>
    40.                     <td class="endblock"><!--тут нет текста--></td>
    41.                 </tr>
    42.             </table>
    43.         </td>
    44.     </tr>
    45. </table>

    и коде CSS:
    Код (CODE):
    1. table {
    2.   border-collapse: collapse;
    3. }
    4.  
    5. td {
    6.   margin: 0;
    7.   padding: 0;
    8. }
    9.  
    10. td.topblock, td.topblock2 {
    11.   height: 25px;
    12.   background: #e09bff;
    13.   border: 1px solid #0000cd;
    14.   vertical-align: top;
    15.   color: #0000cd;
    16. }
    17.  
    18. td.bodyblock, td.bodyblock2 {
    19.   background: #fffff2;
    20.   border-right: 1px solid #0000cd;
    21.   border-left: 1px solid #0000cd;
    22.   vertical-align: top;
    23. }
    24.  
    25. td.endblock {
    26.   height: 25px;
    27.   background: #b4f8fc url(images/end.gif) no-repeat center top;
    28.   border: 1px solid #006400;
    29. }
    30.  
    31. td.endblock2 {
    32.   height: 25px;
    33.   background: #e09bff;
    34.   border: 1px solid #0000cd;
    35.   color: #0000cd;
    36. }
    37.  
    38. div.titleblock {
    39.   font-size: 14px;
    40.   font-weight: bold;
    41.   color: white;
    42. }
     

Поделиться этой страницей

Загрузка...