HTML+CSS+JavaScript

Вот такой обычный вариант создания таблицы с закругленными краями:

<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF"> <tbody><tr> <td align="left" valign="bottom" width="11" height="10"><img src="images/border_l_t.jpg" width="11" height="12"></td> <td height="10" valign="bottom" style="border-top:2px solid #ccc"></td> <td width="11" height="11" align="right" valign="bottom"><img src="images/border_r_t.jpg" width="11" height="12"></td> </tr> <tr> <td height="192" align="left" style="border-left:2px solid #ccc;">&nbsp;</td> <td valign="top"> Область применения: Применяется для отделки внутренних жилых помещений, таких как комнаты и коридоры, и административных, офисных помещений. Стены должны быть ровными и сухими. Первоначально поверхность покрывается грунтовкой Silkoat, затем краска наносится на предварительно высушенные стены Наносится практически на любую поверхность: бетон, гипсокартон, штукатурку, сухую смесь. </td> <td align="right" style="border-right:2px solid #ccc">&nbsp;</td> </tr> <tr> <td width="11" height="10" align="left" valign="bottom"><img src="images/border_b_l.jpg" width="11" height="12"></td> <td style="border-bottom:2px solid #ccc" height="10"></td> <td width="11" height="10" align="right" valign="bottom"><img src="images/border_b_r.jpg" width="11" height="12"></td> </tr> </tbody></table>

Во всех углах возникает отступ и картинки не прилегают к своей ячейке, в чем причина такого поведения?

Есть мнение, что картинка в данном случае ведет себя как строковой элемент, и размер ячейки в том числе определяется высотой lihe-height.

Вообще, было бы мило с вашей стороны приложить ссылку на рабочий вариант страницы, напомнить, какой Ваш любимый браузер, а также поместить в аттач снимок экрана, где этот глюк происходит.

Когда я эту таблицу в отрыве от контекста (без доктайпа и основных стилей) стал смотреть в файрфоксе, то у меня пропали верхняя и нижняя границы. Тогда я заменил эти строки:

<td height="10" valign="bottom" style="border-top:2px solid #ccc"></td>  на     <td style="border-top:2px solid #ccc"><div style="height:10px;"></div></td> и соответственно     <td style="border-bottom:2px solid #ccc" height="10"></td>  на      <td style="border-bottom:2px solid #ccc"><div style="height:10px;"></div></td>

После чего был вынужден для проверки нарисовать себе соответствующих картинок. Получил правильную табличку с круглыми углами.

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

<div id="mainmenu">     <ul id="nav">       <li><a href="">Меню 1</a>                           <ul>                       <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">   <tbody><tr>     <td align="left" valign="bottom" width="11" height="10"><img src="images/border_l_t.jpg" width="11" height="12"></td>     <td style="border-top:2px solid #ccc"><div style="height:10px;"></div></td>     <td width="11" height="11" align="right" valign="bottom"><img src="images/border_r_t.jpg" width="11" height="12"></td>   </tr>   <tr>     <td height="192" align="left" style="border-left:2px solid #ccc;">&nbsp;</td>     <td valign="top">      <li><a href="#">Item 1</a></li>           <li><a href="#">Item 2</a></li>           <li><a href="#">Item 3</a></li>     </td>     <td align="right" style="border-right:2px solid #ccc">&nbsp;</td>   </tr>   <tr>     <td width="11" height="10" align="left" valign="bottom"><img src="images/border_b_l.jpg" width="11" height="12"></td>     <td style="border-bottom:2px solid #ccc"><div style="height:10px;"></div></td     <td width="11" height="10" align="right" valign="bottom"><img src="images/border_b_r.jpg" width="11" height="12"></td>   </tr> </tbody></table>         </ul>                          </li>              <li><a href="">Меню 2</a>          <ul>            <li><a href="#">Item 1</a></li>            <li><a href="#">Item 2</a></li>          </ul>        </li>              <li><a href="">Меню 3</a>          <ul>            <li><a href="">Item 1</a></li>            <li><a href="">Item 2</a></li>            <li><a href="">Item 3</a></li>            <li><a href="">Item 4</a></li>          </ul>        </li>     </ul>  </div>

Стили css:

#mainmenu {     float:left; } #mainmenu ul {     margin: 0;     padding: 0;     list-style: none; } #mainmenu ul li {     position: relative;     float:left; } #mainmenu ul li ul, #mainmenu ul li ul li {     width:130px; } #mainmenu li ul {     position: absolute;     left: 0;     top: 29px;     display: none;     float:left;     background:#fff; } #mainmenu ul li a  {     float:left;     color: black;     width:130px;     font-size:16px;     padding: 0px 0 2px 0;     text-align:center;     background: #CCCCCC; } #mainmenu li ul li a {     padding:1px 0 1px 2px;     text-align:left;     font-size:12px;     width:120px;     background: #fff; } #mainmenu li ul li a:hover {     background: #152C36;     color:White; } * html #mainmenu ul li { float: left; height: 1%; } * html #mainmenu ul li a { heig } #mainmenu li:hover ul,  #mainmenu  li.over ul { display: block; }

<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF"> <tbody><tr> <td align="left" valign="bottom" width="11" height="10"><img src="images/border_l_t.jpg" width="11" height="12"></td> <td height="10" valign="bottom" style="border-top:2px solid #ccc"></td> <td width="11" height="11" align="right" valign="bottom"><img src="images/border_r_t.jpg" width="11" height="12"></td> </tr> <tr> <td height="192" align="left" style="border-left:2px solid #ccc;">&nbsp;</td> <td valign="top"> Область применения: Применяется для отделки внутренних жилых помещений, таких как комнаты и коридоры, и административных, офисных помещений. Стены должны быть ровными и сухими. Первоначально поверхность покрывается грунтовкой Silkoat, затем краска наносится на предварительно высушенные стены Наносится практически на любую поверхность: бетон, гипсокартон, штукатурку, сухую смесь. </td> <td align="right" style="border-right:2px solid #ccc">&nbsp;</td> </tr> <tr> <td width="11" height="10" align="left" valign="bottom"><img src="images/border_b_l.jpg" width="11" height="12"></td> <td style="border-bottom:2px solid #ccc" height="10"></td> <td width="11" height="10" align="right" valign="bottom"><img src="images/border_b_r.jpg" width="11" height="12"></td> </tr> </tbody></table>

Вы для начала все значения высоты ячеек и картинок к одному знаменателю приведите,а дальше видно будет.Ну и тут можно почитать http://htmlbook.ru/faq/kak-sdelat-ramku-so-skruglennymi-ugolkami

Да, грубая ошибка с высотой....но не сработато.....по ссылке просмотрел...

Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head>     <title></title>     <link rel="stylesheet" href="mmstyle.css" type="text/css" media="screen" />     <script type="text/javascript" src="drop_dow.js"></script> </head> <body> <div id="mainmenu">     <ul id="nav">       <li><a href="">Меню 1</a>                           <ul>                                   <div class="color_block">     <em class="bt"><b>&nbsp;</b></em>     <div class="block_content">     <li><a href="#">Item 1</a></li>           <li><a href="#">Item 2</a></li>           <li><a href="#">Item 3</a></li>     </div>     <em class="bb"><b>&nbsp;</b></em>    </div>         </ul>                          </li>              <li><a href="">Меню 2</a>          <ul>            <li><a href="#">Item 1</a></li>            <li><a href="#">Item 2</a></li>          </ul>        </li>              <li><a href="">Меню 3</a>          <ul>            <li><a href="">Item 1</a></li>            <li><a href="">Item 2</a></li>            <li><a href="">Item 3</a></li>            <li><a href="">Item 4</a></li>          </ul>        </li>     </ul>  </div> </body> </html>

Вот какой эффект:

стрикт то зачем юзать?

Можно проще?

Имеетс в виду вместо <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> ставить <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">