Здравствуйте. Есть таблица 2х2. В разных браузерах отображается по разному высота в FF сейчас высота 535 px, а в IE высота 582 px. Стили для таблицы следующие: table { width:100%; border-left:1px solid #cdd5fc; border-bottom:1px solid #cdd5fc; font:10px Arial; color:#333333; } table td { height:15px; border:1px solid #cdd5fc; border-left:0px; border-bottom:0px; line-height:12px; } Таже для таблицы установлены свойста cellpadding="3" cellspacing="0" border="0"
cellpadding - убрать cellspacing - убрать все отступы задавать через padding через css добавить для table {border-collapse:collapse}
Применил для таблицы следующие стили: #table { width:100%; border-left:1px solid #cdd5fc; border-bottom:1px solid #cdd5fc; font:10px Arial; color:#333333; border-collapse:collapse; } #table td { height:18px; border:1px solid #cdd5fc; border-left:0px; border-bottom:0px; padding:0px; margin:0px; line-height:12px; } Так же убрал свойства cellpadding и cellspacing и border Теперь в FF высота одной ячейки 17px в IE 18px. Как сделать, чтобы они были одинаковыми?
HTML: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>test</title> <style type="text/css" media="screen" id="test"> #table { width:100%; border-left:1px solid #cdd5fc; border-bottom:1px solid #cdd5fc; font:10px Arial; color:#333333; border-collapse:collapse; } #table td { height:18px; border:1px solid #cdd5fc; border-left:0px; border-bottom:0px; padding:0px; margin:0px; line-height:12px; } </style> </head> <body> <table cellpadding="0" cellspacing="0" id="table"> <tr><td>1</td><td>2</td></tr> <tr><td>3 </td><td>4</td> </tr> </table> </body> </html> да вроде равные
Доктайп стоит вот такой: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//RU" "http://www.w3.org/TR/html4/loose.dtd"> Поубирал весь текст с таблиц, высота ячеек выровнялась во свех браузерах. Как только ставлю текст, высота в IE увеличивается на 1px
pr0n1x, извини, но твой доктайп - гавно. он говорит: "каждый из браузеров - отображайте код как хотите!" я не зря про именно тот сказал - и все будет замечательно
Вот создал новую страничку, вырезал от тудава все лишнее и оставил только таблицу: HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Young Profi Plus</title> <meta name="Description" content="Young Profi Plus"> <meta name="Keywords" content="Young Profi Plus"> <link rel="canonical" href="http://localhost/autobaby.org.ua/html/recaro-young-profi-plus-p-2.html?osCsid=afe0945c9aff2311f8ebd0bb5b993d5a"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <script language="javascript" type="text/javascript" src="includes/jquery.js"></script> <script language="javascript" type="text/javascript" src="includes/global.js"></script> <script language="javascript" type="text/javascript" src="includes/dhtmlxCombo/codebase/dhtmlxcommon.js"></script> <script language="javascript" type="text/javascript" src="includes/dhtmlxCombo/codebase/dhtmlxcombo.js"></script> <script language="javascript" type="text/javascript" src="includes/dhtmlxCombo/codebase/ext/dhtmlxcombo_extra.js"></script> <base href="http://localhost/autobaby.org.ua/html/"> <link rel="stylesheet" type="text/css" href="includes/dhtmlxCombo/codebase/dhtmlxcombo.css"> <link rel="stylesheet" type="text/css" href="stylesheet.css"> <style> body {padding:10px;} #small_charc { width:100%; font:10px Arial; color:#333333; border-collapse:collapse; } #small_charc td { height:30px; border:1px solid #cdd5fc; padding:0px; margin:0px; line-height:15px; } </style> </head> <body> <table id="small_charc" cellpadding="0" cellspacing="0"> <tr><td><span style="border:1px solid red;">1</span></td><td>2</td></tr> <tr><td>3</td><td>4</td></tr> </table> </body> </html> Все равно в FF 3.0.11 высота ячейки 29 px, а в IE 7 высота ячейки 30px...........Проверьте кто нибудь у себя, а то я целый день на это убил, так и не могу понять в чем дело.
TheShock а для Google Chrome есть условные комментарии? потому что задолбался я уже с этой таблицей, сделал условные комментарии для IE, все стало на свои места......только что посмотрел в Google Chrome таже самая фигня ячейка на 1px больше чем в FF и Opera
Нашел следующий выход: для таблицы нужно применить следующие стили: [css] #table { width:100%; font:10px Arial; color:#333333; border-collapse:collapse; } #table td { /* height:19px; */ border:1px solid #cdd5fc; padding:0px; padding-left:2px; padding-right:2px; margin:0px; line-height:19px; } [/css] Дело в том, что IE и Google Chrome как то не прально определяю высоту ячейки постоянно ее увеличивая на 1px, по этому нужно убрать свойство height и вместо него назначить высоту строки line-height, тогда все браузеры отображают высоту ячейки одинаково.