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;" - фф съедает верхний и левый бордюры.

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

psywalker · 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
Или токо я его вижу? При чем тут ваша спецификация и то что ФФ рисует бордер вокруг таблицы?

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

TonKhaO · September 24, 2009

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

немного странно, я прерасно знаю английский и это фраза звучит как "В ШИРИНУ ТАБЛИЦЫ ВКЛЮЧАЕТСЯ ПОЛОВИНА ШИРИНЫ БОРДЕРА"

то есть мы же все русские и прекрасно понятно из этого предложения вывод такой - по примеру: ширина таблицы (оранжевая часть) должна быть не 95 а 105. Тогда пардон по английски они должны были написать the width of the table takes half the table border

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

и по цссу у нас таблица 100 пикселей по идее должна быть (с учетом рамки) а так как у нас border-collapse: collapse то к ширине прибавляется еще 5 пикселей ) ыыы )))

Edited September 24, 2009 by TonKhaO

Semreg · September 24, 2009

s0rr0w, я понял что Вы хотите до меня донести.

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

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

Второй вывод заключается в том, что какая бы не была спецификация, но использование таблицы с свойством border-collapse: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">

.t1 { border: 20px solid red;background: #fc3;}
.t2 { border-collapse:collapse; border: 20px solid black;background: #fc3}

</style>
</head>
<body>

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

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

</body>
</html>

Слудовательно, возвращаясь к обозначенной мною задаче в самом начале топика я решил полностью отказаться от использования border-collapse: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">

body { margin: 0; padding: 0;}

.t1 {background: #fc3;
  border-right: 1px solid red;
  border-bottom: 1px solid red;
}

td {
  width: 100px; 
  border-left: 1px solid red;
  border-top: 1px solid red;
}

</style>
</head>
<body>

<table class="t1" cellspacing="0">
  <tr>
	<td>1</td>
	<td>2</td>
	<td>3</td>
  </tr>
  <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>

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

Edited September 24, 2009 by Semreg

s0rr0w · September 24, 2009

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

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

Вот код на изучение.

	.div2 { width: 100px }
	.div2 span { border-bottom: 1.2em solid red }

	<div class="div2">
		<span>text text text text text text text</span>
	</div>

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

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

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

немного странно, я прерасно знаю английский и это фраза звучит как "В ШИРИНУ ТАБЛИЦЫ ВКЛЮЧАЕТСЯ ПОЛОВИНА ШИРИНЫ БОРДЕРА"

Там выше по тексту приведена формула рассчета ширины таблицы. Приведенное мной предложение является всего лишь словесным итогом к ней.

psywalker · September 25, 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">
*{ margin: 0; padding: 0;}
	table { border-collapse: collapse; width: 100%;}
	td { border: 1px solid red; border-width: 0px 1px 1px 0px;}

		div { border: 1px solid red; border-width: 1px 0 0 1px; width: 500px; }

</style>

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

Semreg · September 26, 2009

Хороший вариант. И кода мало и cellspacing нету.

psywalker, дык ты меня оказывается обманывал в своем #3 сообщении

psywalker · September 26, 2009

Хороший вариант. И кода мало и cellspacing нету.
psywalker, дык ты меня оказывается обманывал в своем #3 сообщении

Да неее, там я имел ввиду, что с помощью одной таблицы такое не сделать, а тут я же таблицу ещё и в див обернул, думаю это самое простое решение в данной ситуации

Sign In

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

Question

Semreg

Link to comment

Share on other sites

32 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

TonKhaO

Link to comment

Share on other sites

Semreg

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Semreg

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information