>Форум Mozilla Россия http://forum.mozilla-russia.org/index.php >Проблемы с сайтами http://forum.mozilla-russia.org/viewforum.php?id=24 >любопытно, почему FF так позиционирует table-caption http://forum.mozilla-russia.org/viewtopic.php?id=9454 |
olden69 > 05-04-2006 20:28:33 |
CAPTION таблицы съезжает, если в CSS задать хотя сама таблица, заключенная в <DIV align="center">, позиционируется нормально у кого есть объяснение? |
Lynn > 06-04-2006 10:25:23 |
А полный пример можно? |
olden69 > 06-04-2006 13:17:59 |
Lynn пишет
Выделить код Код:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <META HTTP-EQUIV="Pragma" content="no-cache"> <META HTTP-EQUIV="Cache-Control" content="no-cache,must-revalidate,proxy-revalidate"> <META HTTP-EQUIV="Expires" content="Thu,06 Apr 2006 08:01:15"> <META HTTP-EQUIV="Last-Modified" content="Thu,06 Apr 2006 08:01:15"> <META HTTP-EQUIV="Content-Type" content="text/html; charset=windows-1251"> <title>test</title> <style> BODY { padding: 5px; margin: 0; } TABLE { margin-left: auto; margin-right: auto; /*margin: 0;*/ border: 1pt solid #000000; border-collapse: collapse; border-spacing: 0px font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; font-style: normal; font-size: 8pt; font-weight: normal; color: #000000; text-align: left; } CAPTION { caption-side: top; width: auto; margin: 0; padding: 5px; font-weight: bold; font-size: 10pt; text-align: center; } TH { margin: 0; border: #000000 1pt solid; padding-top: 1pt; padding-right: 2pt; padding-bottom: 1pt; padding-left: 2pt; font-weight: bold; text-align: center; } TD { margin: 0; border: #000000 1pt solid; padding-top: 1pt; padding-right: 2pt; padding-bottom: 1pt; padding-left: 2pt; white-space: nowrap; } #header { margin-left: 0px; color: #000; border-bottom: 1px solid #333; background-color:#d5d5d5; font-weight:bold; text-align: center; } #leftcol { position: absolute; left: 0; width: 120px; height: 100%; margin-left: 10px; margin-top: 0px; color: #000; padding: 3px; border-right: #555555 1pt solid; font-size: 10pt; } #leftcol P { margin-top: 5px; margin-bottom: 0px; } #content { margin: 0px 0px 0 135px; padding: 3px; } A.menuLeft { width: 120px; display:block; font-size: 11pt; text-decoration: none } A.menuLeft:link { color: #000000; } A.menuLeft:visited { color: #000000; } A.menuLeft:hover { color: #000000; background-color:#d5d5d5; } </style> </head> <body> <div id="leftcol"> <p><a href="g_money.php" class="menuLeft">Money</a></p> <p><a href="g_rates.php" class="menuLeft">Rates</a></p> </div> <div id="content"> <div id="header">Lines</div> <div align="center"> <br> <table> <caption>LINES</caption> <thead> <tr> <th>#</th> <th>code</th> <th>date</th> <th>active</th> <th>balance</th> <th>plan</th> <th>operation</th> </tr> </thead> <tbody> <form method="post"> <input type="hidden" name="id" value="1" /> <tr> <td align="right">1</td> <td align="center"><input type="text" name="line_code" value="001" size="10" /></td> <td>2006-03-31 10:18</td> <td align="center"><input type="checkbox" name="is_active" checked="checked" /></td> <td align="right"><b>0.00</b></td> <td align="center"> <select name="plan_id"> <option value="0">default</option> <option value="1" selected="selected">MAIN</option> </select> </td> <td align="center"><input type="submit" name="cmd_line_save" value="save" /></td> </tr> </form> </tbody> </table> </div> </div> </body> </html> |
Lynn > 06-04-2006 13:58:40 |
Достаточно просто добавить фон для caption, что б понять, что он имеет ту же ширину, что и таблица, но просто не отцентрирован. Добавьте для caption margin-left/right: auto и всё будет как надо. |
olden69 > 06-04-2006 14:30:34 |
фокус не удался (с марджинами для CAPTION) |