Javascript-форум - Странная интерпретация кода браузерами

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - Странная интерпретация кода браузерами (https://javascript.ru/forum/xhtml-html-css/15140-strannaya-interpretaciya-koda-brauzerami.html)

Shitbox2

14.02.2011 22:38

Странная интерпретация кода браузерами

Есть такой код:

<style>
P {
	position: relative;
}

.note {
	display: block;
	position: absolute;
	width: 100%;
	left: 100%;
	margin-top: -2.2em;
}
</style>

<table width="30%">
	<tr>
		<td>
		<P>Это непрерывный текст, а этому <b>месту</b><em class="note">
		<p>Примечание к месту</p>
		</em> в нем соответствует примечание</P>
		</td>
	</tr>
</table>

Если заменить в нем все прописные P, например, на div, то можно увидеть как он должен работать.

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

Почему так происходит и как добиться правильного отображения не заменяя P на div?

Gvozd

14.02.2011 22:54

Цитата:

Сообщение от Shitbox2

Есть такой код:

это на каком языке он написан?
точно не на HTML
в HTML тег P не может быть вложен.
почему вы использовали его, а не, к примеру тег <img> ?

Shitbox2

14.02.2011 23:37

Цитата:

в HTML тег P не может быть вложен.

Это почему еще? Куда он не может быть вложен, в ячейку таблицы?

Цитата:

почему вы использовали его, а не, к примеру тег <img>

При чем тут <img> если нет картинки. У меня один абзац это основной текст, другой абзац в блоке с примечанием em (который именно блок). Текстовые абзацы испокон веков обрамляются тегами <p>, что тут неверно?

Цитата:

цитата выше явно показывает что со знанием html проблемы.

Пожалуйста, поподробнее, что я упустил?

Gvozd

14.02.2011 23:48

Цитата:

Сообщение от Shitbox2

Это почему еще? Куда он не может быть вложен, в ячейку таблицы?

сам в себя.

Цитата:

Сообщение от Shitbox2

При чем тут <img> если нет картинки.

а при чем тут P, если вы не знаете как его надо использовать?

Shitbox2

15.02.2011 08:16

Цитата:

Сообщение от Gvozd (Сообщение 92510)

сам в себя.

а при чем тут P, если вы не знаете как его надо использовать?

Ну, объясните, объясните как его надо использовать. Хотя бы ссылочку дайте (только не на всю спецификацию).

B~Vladi

15.02.2011 08:53

Цитата:

Сообщение от Shitbox2

Ну, объясните, объясните как его надо использовать.

Тебе уже всё объяснили:

Цитата:

Сообщение от Gvozd

сам в себя.

Тем более, у тебя блочный узел (p) вложен в инлайновый (em).

Пожалуй, стоит начать с азов, либо выспаться.

Kolyaj

15.02.2011 10:13

Цитата:

Сообщение от Shitbox2

У меня один абзац это основной текст, другой абзац в блоке с примечанием em (который именно блок). Текстовые абзацы испокон веков обрамляются тегами <p>, что тут неверно?

Вы себе хотя бы логически представляете абзац в абзаце?

Shitbox2

15.02.2011 22:48

Цитата:

Сообщение от B~Vladi (Сообщение 92537)

Тем более, у тебя блочный узел (p) вложен в инлайновый (em).

em у меня сделан блочным, так что с этим все в порядке. А серьезно, где написано, что <p> нельзя вкладывать друг в друга? Понятно, что это не работает, но хочется самому почитать об этом.

Цитата:

Сообщение от Kolyaj (Сообщение 92549)

Вы себе хотя бы логически представляете абзац в абзаце?

Конечно представляю! Вся русская классика на таком построена.

...Он поспешно его распечатал и прочел следующее:

Государь ты наш, Владимир Андреевич, — я, твоя старая нянька, решилась тебе доложить о здоровьи папенькином! Он очень плох, иногда заговаривается, и весь день сидит как дитя глупое - а в животе и смерти бог волен. Приезжай ты к нам, соколик мой ясный мы тебе и лошадей вышлем на Песочное. Слышно, земский суд к нам едет отдать нас под начал Кирилу Петровичу Троекурову — потому что мы-дескать ихние, а мы искони Ваши, — и отроду того не слыхивали. Ты бы мог живя в Петербурге доложить о том царю-батюшке, а он бы не дал нас в обиду. — Остаюсь твоя верная раба, нянька Орина Егоровна Бузырева.

Посылаю мое материнское благословение Грише, хорошо ли он тебе служит? У нас дожди идут вот ужо друга неделя и пастух Родя помер около Миколина дня.

Владимир Дубровский несколько раз сряду перечитал сии довольно
бестолковые строки с необыкновенным волнением...

dmitriymar

15.02.2011 23:08

Цитата:

Сообщение от Shitbox2

Конечно представляю! Вся русская классика на таком построена.

...может ну его это веб программирование? может стоит задуматься о карьере литературоведа в серьёз ?хотя не стоит ,результат тот же что и в веб программировании...

Shitbox2

16.02.2011 20:02

Ну ладно заменю я <p> на <div>. Так правильно будет? Как бы вы сделали? Только без насмешек, пожалуйста.

dmitriymar

16.02.2011 20:57

да ,так будет правильно.<div>-это контейнер какой позволяет всебя вкладывать теги и теги абзацев <p> в том числе. в твоём случае достаточно одну пару заменить,а вторая будет вложенная в контейнер

Shitbox2

18.02.2011 17:04

dmitriymar, наверное так и сделаю. Только получится не очень красиво: все абзацы будут заключены в <p>, а абзац с примечанием в<div>.

dmitriymar

18.02.2011 17:17

глупость сказал. как раз примечание остаётся в теге абзаца. что мешает остальной текст в теги абзацев заключить?
почитай лучше сначала по html разметку

Shitbox2

19.02.2011 02:10

dmitriymar, как понять что мешает? Именно то мешает о чем я тему создал.
Может быть я как-то не так понял. Укажите, пожалуйста, что и как заменить в моем коде.

dmitriymar

19.02.2011 10:33

<head>
<style>
р {
    position: relative;
}
 
.note {
    display: block;
    position: absolute;
    width: 100%;
   
   
}
</style>
 </head>
<body>
<table width="30%">
    <tr>
        <td>
        <div>
  <p>Это непрерывный текст, а этому <em><b>месту</b></em></p>
        <p class="note">Примечание к месту</p>
          <p> в нем соответствует примечание  </p>
        </div>
        </td>
    </tr>
</table>
</body>

<head>
<style>
р {
    position: relative;
}
 
.note {
    display: block;
    position: absolute;
    width: 100%;
   
   
}
</style>
 </head>
<body>
<table width="30%">
    <tr>
        <td>
        
  <p>Это непрерывный текст, а этому <em><b>месту</b></em></p>
        <p class="note">Примечание к месту</p>
          <p> в нем соответствует примечание  </p>
        
        </td>
    </tr>
</table>
</body>

и стили свои посмотри не меньше намучено чем в тегах было

ksa	19.02.2011 13:34

Вроде бы автору требовалось нечто такое по виду...

<!DOCTYPE html>
<html>
<head>
<title>Пыточная</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
html,
body {
	width: 100%;
}
#container {
	position: relative;
	background-color: silver;
}
#right {
	float: right;
	width: 200px;
	position: relative;
}
#right > p {
	position: absolute;
	left: 3px;
	right: 0;
}
#left {
	margin-right: 200px;
	background-color: #ffffff;
}
.end {
	clear: both;
}
.line {
	position: absolute;
	right: 0;
	height: 3px;
	border-left: 1px solid ;
	border-bottom: 1px solid;
	border-color: red;
}
</style>
<script>
function SetPrm() {
	var o=document.getElementById('left')
	o=o.getElementsByTagName('b')
	var i
	for (i=0; i<o.length; i++) {
		document.getElementById('p'+i).style.top=o[i].offsetTop+'px'
		document.getElementById('b'+i).style.top=(o[i].offsetTop+15)+'px'
		document.getElementById('b'+i).style.left=o[i].offsetLeft+'px'
	}
}
</script>
</head>
<body onload='SetPrm()'>
<div id='container'>
	<div id='b0' class='line'></div>
	<div id='b1' class='line'></div>
	<div id='b2' class='line'></div>
	<div id='right'>
		<p id='p0'>Примечание для "количеству"</p>
		<p id='p1'>Примечание для "права"</p>
		<p id='p2'>Примечание для "Яндекс"</p>
	</div>
	<div id='left'>
		<p>Служба Яндекс.Рефераты предназначена для студентов и школьников, дизайнеров 
		и журналистов, создателей научных заявок и отчетов — для всех, кто относится к 
		тексту, как к <b>количеству</b> знаков.
		</p>
		<p>Нажав на кнопку «Написать реферат» вы лично создаете уникальный текст, 
		причем именно от вашего нажатия на кнопку зависит, какой именно текст получится — 
		таким образом, авторские <b>права</b> на реферат принадлежат только вам.
		</p>
		<p>Теперь никто не сможет обвинить вас в плагиате, ибо каждый текст <b>Яндекс</b>. Рефератов 
		неповторим. <br />Текстами рефератов можно пользоваться совершенно бесплатно, однако 
		при транслировании и предоставлении текстов в массовое пользование ссылка на 
		Яндекс.Рефераты обязательна.
		</p>
		<div class='end'></div>
	</div>
</div>
</body>
</html>

dmitriymar

19.02.2011 14:19

ksa,
он теги <p> в примере какой дал перекрестил

Shitbox2

19.02.2011 15:12

Ни один пример не работает.

Вот код (примерно то, что я выкладывал в начале):

<head>
<style>
div {
	position: relative;
	display: block;
}

p {
	display: block;
}
.note {
	display: block;
	position: absolute;
	width: 100%;
	left: 100%;
	margin-top: -2.2em;
}
</style>
</head>
<body>
<table width="30%">
	<tr>
		<td>
		<p>Первый абзац</p>
		<div>Второй абзац. А этому <b>месту</b><em class="note">
		<p>Примечание к месту</p>
		</em> в нем соответствует примечание</div>
		<p>Третий абзац</p>
		</td>
	</tr>
</table>
</body>

Он работает как надо. Нужно сделать так же, но чтобы второй абзац был заключен в <p>, а не в<div>

P.S. Привет, ksa :-)

ksa	19.02.2011 15:41

Цитата:

Сообщение от Shitbox2

Ни один пример не работает.

Мой последний вариант похож на твои картинки...

ksa	19.02.2011 15:48

Цитата:

Сообщение от Shitbox2

Он работает как надо.

Эта картинка таки отличается от тех, что ты выкладывал на sql.ru
Твоё "Примечание к тексту" совсем не на том уровне. Оно просто "вот в этом месте".

Shitbox2

19.02.2011 16:10

Цитата:

Сообщение от ksa (Сообщение 93177)

Хм. Проверил сейчас в основных браузерах: корректно отображается в Хроме и Файерфоксе. В Опере и Эксплорере примечание просто смещено вверх, но все равно работает как надо (двигается вслед за местом в тексте)

Часовой пояс GMT +3, время: 21:49.