Firefox - пожиратель рам! Как отучить ФФ есть бордюры?

Semreg · September 23, 2009

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<style type="text/css">

body { margin: 0; padding: 0; font-family: Verdana; color: #A1A1A1; font-size: 11px;}

.main-table {border: 1px solid red; border-collapse:collapse;}

.main-table-td1, .main-table-td2, .main-table-td3 {border: 1px solid red;}

.main-table-td1 {width: 322px;}
.main-table-td2 {width: 50px;}
.main-table-td3 {width: 77px;}

</style>

</head>

<body>

<div>
<table class="main-table">
  <tr>
	<td class="main-table-td1">1</td>
	<td class="main-table-td2">2</td>
	<td class="main-table-td3">3</td>
  </tr>
  <tr>
	<td class="main-table-td1">1</td>
	<td class="main-table-td2">2</td>
	<td class="main-table-td3">3</td>
  </tr>
</table>
</div>

</body>
</html>

Нужна таблица с бордюром в 1н px для ячеек.

Как только использую "border-collapse:collapse;" - фф съедает верхний и левый бордюры.

Научите кросбраузерно лечить бордюр для ФФ.

Semreg · September 23, 2009

может быть я куцо выразился.

Я понимаю, что рамка фактически есть, но ФФ рисует ее снаружи объекта, не сдвигая объект. Ие тоже рисует рамку снаружи таблицы, но при этом сдвигает сам объект. Таким образом в ФФ фактические координаты верхнего левого угла слоя с рамкой относительно родителя получаются - (минус) 1px в высоту и длину.

Именно от этого я и хочу избавиться.

psywalker · September 23, 2009

походу безнадёга ваще, будем решения вместе ждать :blink:

Edited September 23, 2009 by psywalker

Semreg · September 23, 2009

Волкер, спаси, помоги!

Караул!!! Весь день голову над этой байдой ломаю :blink:

ZoNT · September 23, 2009

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<style type="text/css">

body { margin: 0; padding: 0; font-family: Verdana; color: #A1A1A1; font-size: 11px;}

.main-table {border-collapse:collapse;}
@-moz-document url-prefix() {
	.main-table {margin: 1px 0 0 1px;}
}



.main-table td {border: 1px solid red;}

.main-table-td1 {width: 322px;}
.main-table-td2 {width: 50px;}
.main-table-td3 {width: 77px;}

</style>

</head>

<body>

<div>
<table class="main-table">
  <tr>
	<td class="main-table-td1">1</td>
	<td class="main-table-td2">2</td>
	<td class="main-table-td3">3</td>
  </tr>
  <tr>
	<td class="main-table-td1">1</td>
	<td class="main-table-td2">2</td>
	<td class="main-table-td3">3</td>
  </tr>
</table>
</div>

</body>
</html>

Ну или просто не ставь таблицу в левый верхний угол при пустом документе и убранных марджинах...

psywalker · September 23, 2009

Волкер, спаси, помоги!
Караул!!! Весь день голову над этой байдой ломаю

Да нее, я просто чувствую что это в порядке вещей всё, просто ФФ интепритирует таблицы именно таким образом и тут ничего не попишешь. Так что не парься ты так, оно не стоит того :blink:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<style type="text/css">
*{ margin: 0; padding: 0;}
	table {border-collapse: collapse; width: 500px; border: 1px solid red; }
		td { border: 1px solid red; }
</style>

</head>
<body>
<table>
  <tr>
	<td>1</td>
	<td>2</td>
	<td>3</td>
  </tr>
  <tr>
	<td>1</td>
	<td>2</td>
	<td>3</td>
  </tr>
</table>
</body>
</html>

Justnewone · September 23, 2009

Не обязательно у таблиц, он вообще бордеры по своему видит

Semreg · September 23, 2009

@-moz-document url-prefix() {
	.main-table {margin: 1px 0 0 1px;}
}

Уряяя!!!

ZoNT, дядька, спасибище тебе большое! Век тебя не забуду! То что доктор прописал!

Теперь бордюр до безобразия кросбраузерный

Так что не парься ты так, оно не стоит того smile.gif

Амиго, не получается у меня не париться. Хочется чтобы красиво все выглядело :blink:

s0rr0w · September 23, 2009

Не обязательно у таблиц, он вообще бордеры по своему видит

В соответствии со спецификацией. Остальные рендерят их неправильно. Я не шучу.

TonKhaO · September 23, 2009

@-moz-document url-prefix() {
	.main-table {margin: 1px 0 0 1px;}
}

О! ребят впервые вижу такое ваще ))) @-moz-document url-prefix() это всегда так стили для мозиллы обозначаются? :blink:

psywalker · September 23, 2009

А я чё то не понял юмора, а разве это валидное средство? А потом у меня Дримвивер почему-то на последнюю закрывающуюся скобочку ругается, это нормально? :blink:

Сейчас проверил, нихрена не валидно, так что использовать его в работе считаю неправильным, во первых из-за Невалидности, а во вторых из-за того, что всё же ФФ правильно рендерит таблицы как сказал s0rr0w

Edited September 23, 2009 by psywalker

TonKhaO · September 23, 2009

Вот что я нашел на эту тему! изучаю

ZoNT · September 23, 2009

ага, это просто хак для ФФ...

TonKhaO · September 23, 2009

ага, это просто хак для ФФ...

который к сожалению не валиден НО думаю что ради того чтобы все везде выглядело правильно можно пожертвовать валидностью цсс так как это же не наша вина ))))))))

Semreg · September 23, 2009

Сейчас проверил, нихрена не валидно, так что использовать его в работе считаю неправильным, во первых из-за Невалидности, а во вторых из-за того, что всё же ФФ правильно рендерит таблицы как сказал s0rr0w

То что не валидно - конечно не есть гуд, но пока никто валидного средства не предложил :blink:

А смещение таблицы с бордюром в ФФ на 1н пиксель влево и вверх относительно остальных блоков меня напрягает.

Поэтому пока буду использовать то что предложил Зонт.

s0rr0w · September 23, 2009

Сейчас проверил, нихрена не валидно, так что использовать его в работе считаю неправильным, во первых из-за Невалидности, а во вторых из-за того, что всё же ФФ правильно рендерит таблицы как сказал s0rr0w
То что не валидно - конечно не есть гуд, но пока никто валидного средства не предложил
А смещение таблицы с бордюром в ФФ на 1н пиксель влево и вверх относительно остальных блоков меня напрягает.
Поэтому пока буду использовать то что предложил Зонт.

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

Semreg · September 23, 2009

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

Да ФФ и сейчас нормально дивы и таблицы рендерит, а именно смещая таблицу с бордером как положено на 1н пх вниз и вправо, если не используется border-collapse:collapse;

Как только ФФ видет для таблицы border-collapse:collapse; он ее перестает сдвигать как положено и рисует бордер вокруг.

Вы считаете нормальным, что таблица с бордером, но без border-collapse:collapse; позицианируется иначе, чем таблица с бордером, но с использованием border-collapse:collapse;?

Имхо - это глюк именно Файрфокса.

Посмотрите на визуал 2х таблиц в Файрфоксе:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

 <style type="text/css">

 .t1 {border:1px solid black;}

 .t2 {border:1px solid black; border-collapse:collapse;}


 </style>
 </head>
 <body>

 <table class="t1">
   <tr>
	 <td>1</td>
   </tr>
 </table>

 <table class="t2">
   <tr>
	 <td>1</td>
   </tr>
 </table>

 </body>
 </html>

Edited September 23, 2009 by Semreg

psywalker · September 23, 2009

Сейчас проверил, нихрена не валидно, так что использовать его в работе считаю неправильным, во первых из-за Невалидности, а во вторых из-за того, что всё же ФФ правильно рендерит таблицы как сказал s0rr0w
То что не валидно - конечно не есть гуд, но пока никто валидного средства не предложил
А смещение таблицы с бордюром в ФФ на 1н пиксель влево и вверх относительно остальных блоков меня напрягает.
Поэтому пока буду использовать то что предложил Зонт.

Вот с таким подходом к делу ты становишься "ещё одним" верстальщиком

Semreg · September 23, 2009

Вот с таким подходом к делу ты становишься "ещё одним" верстальщиком

Дык, хто учил? Хто заложил любов к css? :blink:

psywalker · September 23, 2009

Дык, хто учил? Хто заложил любов к css?

Я тебя разве учил закладывать грязь в код, как раз наоборот я тебя учил делать всё чисто, валидно и с наименьшим количеством элементов

Semreg · September 23, 2009

Ну а если не получается валидно сделать - как быть? )

s0rr0w · September 23, 2009

Вы считаете нормальным, что таблица с бордером, но без border-collapse:collapse; позицианируется иначе, чем таблица с бордером, но с использованием border-collapse:collapse;?
Имхо - это глюк именно Файрфокса.

Оставьте свое имхо при себе, и больше не позорьтесь так.

Внимательно изучите спецификацию.

И особенно советую изучить вот эту картинку

И особенно советую обратить внимание на вот это предложение

Note that in this model, the width of the table includes half the table border.

Edited September 23, 2009 by s0rr0w

Semreg · September 23, 2009

s0rr0w, уважаемый, а каким образом приведенная Вами картинка касается заданного мною в теме вопроса?

Будьте любезны, уделите внимание, перечитайте посты в теме.

Не обобщайте ширину таблицы с учетом бордюров с фактическим ее позиционированием.

В настоящий момент Вы мне советуете "внимательно изучить спецификацию" на английском языке, в то время, когда сами не изучили внимательно о чем идет речь на русском.

Edited September 23, 2009 by Semreg

psywalker · September 23, 2009

Semreg

s0rr0w, уважаемый, а каким образом приведенная Вами картинка касается заданного мною в теме вопроса?
Будьте любезны, уделите внимание, перечитайте посты в теме.

Я тебе отвечу за него. Картинка s0rr0w касается твоего вопроса в самом прямом смысле, и внимание надо уделять тебе спецификации Css2.1 а не нам - твоим постам.

s0rr0w имеет ввиду, что спецификация CSS2.1 диктует нам, что Внешние рамки должны выступать за границу таблицы и это не странность, а факт. Причина в том, что половина ширины рамки таблицы включена в ширину таблицы, а другая половина выступает за пределы этого расстояния. Вот именно так определён принцип работы таблицы и ФФ между прочим единственный браузер, который следует спецификации CSS2.1 в полной мере, за что ему надо отдать должное.

В настоящий момент Вы мне советуете "внимательно изучить спецификацию" на английском языке, в то время, когда сами не изучили внимательно о чем идет речь на русском.

Отличный совет, только пока ранний, до спецификации тебе ещё далеко, до неё ещё должжно быть мноого бессонных ночей, зубрения, вникания и понимания многих вещей

Semreg · September 23, 2009

Волкер, не тупи, защитник всех обиженных. При чем тут бордюры, спецификации и т.п?

Я не претендую на лидерство среди отцов css. Спуститесь с небес на землю.

Говорю доходчиво: Файрфокс по разному позиционирует таблицу без border-collapse:collapse; и с (!) border-collapse:collapse;

Смотрим внимательно пример тут: http://forum.htmlbook.ru/index.php?s=&...st&p=115340

Яж вам не про то что ФФ раму не внутри таблицы рисует а снаружи втолковываю. Дебилу понятно, что ФФ рисует раму снаружи.

Я говорю про то, что таблица при использовании border-collapse:collapse; имеет отличные фактические координаты от таблицы без border-collapse:collapse;.

Не будите во мне зверя, отцы css!

Я ща сам бордюр съем вместо файрфокса.

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

Но фактическое положении таблицы разное.

Хорош меня новичка в лужу носом сувать. Нашлись млин отцы - вам влом въехать в суть проблемы.

Видите смещение во 2й таблице на 1н пиксель влево?

http://forum.htmlbook.ru/index.php?showtop...mp;#entry115340

Или токо я его вижу? При чем тут ваша спецификация и то что ФФ рисует бордер вокруг таблицы?

Edited September 23, 2009 by Semreg

s0rr0w · September 23, 2009

Или токо я его вижу? При чем тут ваша спецификация и то что ФФ рисует бордер вокруг таблицы?

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

Управляется все это свойством border-collapse.

Так вот, в режиме коллапсированных ячеек отображение бордюра идет по совершенно другому принципу.

Таблица в данном режиме представляет собой сетку ячеек. На приведенном мной рисунке показано розовой пунктирной линией эту сетку. Бордюры у ячеек рисуются относительно этой сетки.

Ширина таблицы будет браться по пунктирной линии, а не по бордюру. Так как бордюр имеет толщину всего один пиксель, и его нельзя разделить на два целых числа, то он рисуется с одних сторон внутрь, с других - наружу. Если точнее, то сверху и справа внутрь, а снизу и слева - наружу.

Вот вам пример, который наглядно показывает отличие

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<style type="text/css">


.t2 { border-collapse:collapse; width: 100px; background: #fc3; border-right: 10px solid red; }
.div1 { border-right: 10px solid black; background: #fc3; width: 100px; }

</style>
</head>
<body>

<div class="div1">
	test
</div>
<table class="t2">
   <tr>
	 <td>1</td>
   </tr>
</table>

</body>
</html>

Обратите внимание на то, что бордюр у таблицы справа ближе на 5 пикселей, чем у div. Это правильное отображение, 1 к 1 как в спецификации.

Все остальные браузеры рендерят этот код неправильно (хоть и проходят тест ACID 3 на 100%).

Еще вопросы будут?

В настоящий момент Вы мне советуете "внимательно изучить спецификацию" на английском языке, в то время, когда сами не изучили внимательно о чем идет речь на русском.

Речь на русском языке идет про то, что я вам советовал прочитать в спецификации на английском. И если вы не владеете достаточным объемом знаний, то это не значит, что я вам что-то не то посоветовал. Учите матчасть

Sign In

Firefox - пожиратель рам! Как отучить ФФ есть бордюры?

Question

Link to comment

Share on other sites

32 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information