тег <p> в диве

Softlink · April 28, 2011

Приветствую!

Сегодня столкнулся с необычной для себя проблемой.

Страница сверстана с контентом в центре.

Разбита на 4 блока дивами. В двух блоках находятся ссылки в столбик. Так вот в чем суть. Если я в верхнем блоке ставлю ссылки в тег <p> то при разрешении 1024 появляется 1 пиксель справа от контента. Т.е. сам контент не разъезжается, а появляется именно отступ справа.

В нижнем блоке применение этого же тега проходит без проблем. хотя блоки одинаковы.

В разных браузерах отображается по разному.

У меня во всех, кроме Оперы лезет этот пиксель, в Опере нормально. У кого-то и в ФФ все ок. Я даже не знаю в каком направлении думать уже.

Код прилагается.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-ru" lang="ru-ru"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=Windows-1251" />
</head>
_____________________________________________________________________

в таком виде лезет пиксель

			
<div id="string">
				<div id="stolb1">
					<div id="zagolovki">Регистрация</div>
					<p><a href="#" class="ssylki">Как скачать музыку с Вконтакте</a></p>
					<p><a href="#" class="ssylki">Как сделать новую аватарку</a></p>
					<p><a href="#" class="ssylki">Как установить приложение на страницу</a></p>
					<div id="more"> <a href="#" class="more">Все статьи</a></div>
				</div>
				<div id="stolb2">
					<div id="zagolovki">Аудио</div>
					<p><a href="#" class="ssylki">Как скачать музыку с Вконтакте</a></p>
					<p><a href="#" class="ssylki">Как сделать новую аватарку</a></p>
					<p><a href="#" class="ssylki">Как установить приложение на страницу</a></p>
					<div id="more"> <a href="#" class="more">Все статьи</a></div>
				</div>
				<div id="stolb3">
					<div id="zagolovki">Видео</div>
					<p><a href="#" class="ssylki">Как скачать музыку с Вконтакте</a></p>
					<p><a href="#" class="ssylki">Как сделать новую аватарку</a></p>
					<p><a href="#" class="ssylki">Как установить приложение на страницу</a></p>
					<div id="more"> <a href="#" class="more">Все статьи</a></div>
				</div>
			</div>

в таком не лезет



			<div id="footer">
				<div id="string">
					<div id="footer-stolb">
					<div id="zagolovki">Самые полезные</div>
					<p><img src="images/favicon.ico" alt="ikonka"/><a href="#" class="ssylki">Как скачать музыку с Вконтакте</a></p>
					<p><img src="images/favicon.ico" alt="ikonka"/><a href="#" class="ssylki">Как сделать новую аватарку</a></p>
					<p><img src="images/favicon.ico" alt="ikonka"/><a href="#" class="ssylki">Как установить приложение на страницу</a></p>
					<p><img src="images/favicon.ico" alt="ikonka"/><a href="#" class="ssylki">Как установить приложение на страницу</a></p>
					</div>
					<div id="footer-stolb">
					<div id="zagolovki">Самые популярные</div>
					<p><img src="images/favicon.ico" alt="ikonka"/><a href="#" class="ssylki">Как скачать музыку с Вконтакте</a></p>
					<p><img src="images/favicon.ico" alt="ikonka"/><a href="#" class="ssylki">Как сделать новую аватарку</a></p>
					<p><img src="images/favicon.ico" alt="ikonka"/><a href="#" class="ssylki">Как установить приложение на страницу</a></p>
					<p><img src="images/favicon.ico" alt="ikonka"/><a href="#" class="ssylki">Как установить приложение на страницу</a></p>
					</div>
					<div id="footer-stolb">
					<div id="zagolovki">Самые новые</div>
					<p><img src="images/favicon.ico" alt="ikonka"/><a href="#" class="ssylki">Как скачать музыку с Вконтакте</a></p>
					<p><img src="images/favicon.ico" alt="ikonka"/><a href="#" class="ssylki">Как сделать новую аватарку</a></p>
					<p><img src="images/favicon.ico" alt="ikonka"/><a href="#" class="ssylki">Как установить приложение на страницу</a></p>
					<p><img src="images/favicon.ico" alt="ikonka"/><a href="#" class="ssylki">Как установить приложение на страницу</a></p>
					</div>
				</div>

				<div id="line"></div>
				<div id="copyright">копирайт</div>
			</div>

блоки идут друг за другом


#string{
padding-left:20px;
overflow:hidden;
}
#stolb1{
float:left;
width:30%;
margin-top:10px;
padding:15px;
border:1px solid #ffffff;
}

#stolb1:hover{
float:left;
width:30%;
margin-top:10px;
padding:15px;
border:1px solid #888888;
}

#footer{
height:100%;
border:0px solid #000000;
}

#footer-stolb{
float:left;
width:33%;
margin-top:20px;
}

дело точно не в ширине столбцов и паддингах. Потому как если убрать <p> и заменить его просто дивом, все прекрасно работает. Методом перебора и манипуляций с тегами пришел к такому выводу.

Может подскажете чем?

Могу всю верстку скинуть. Мы сегодня втроем ломали голову, но так и не поняли в чем может быть дело. Может у <p> есть какие-то специфические свойства? Сегодня нашел статью, что была подобная проблема (<p> в диве)у ие6, также появлялся отступ. У Лебедева в техногрете почитал примерно об этом же.

tt48 · April 28, 2011

Вероятно, это проблемы округления процентов.)

Softlink · April 28, 2011

Вероятно, это проблемы округления процентов.)

неа, уже пробовал))

Более того. Можно посмотреть еще больше чудес, если заменить

<div id="zagolovki">Регистрация</div>

на <p>Регистрация</p>, то ничего не поедет))

А любую другую строчку ниже если затолкать в <p>, то пошла свистопляска.

Temiks · April 28, 2011

наверное из за того что не надо было в ховер писать бордер 1рх

Softlink · April 28, 2011

наверное из за того что не надо было в ховер писать бордер 1рх

и опять мимо)) Во-первых бордер есть не только в ховере, а и изначально в диве. Можно совсем бордеры убрать, толку не будет - уже пробовал.

Я уже чего только не перебрал, и доктайпы менял и ширину и пэддинги перебрал. Ничего не выходит.

Еще любопытно, что в одних и тех же браузерах на разных компьютерах отступа может не быть. Сегодня проверили на ФФ. У меня есть отступ, на другой машине нет.

В Опере, я так понял, отступа совсем нигде не видно.

p.s. проблему можно решить заталкиванием строчки в обычный див и все прекрасно работает. Также работают теги <br/>. Но меня просто уже зацепила такая ситуация. С чего бы вдруг так получалось?

Может есть энтузиасты? Могу весь код скинуть, попробуйте покопать. Не расценивайте это как "сделайте мне задачку за бесплатно, а то у меня не получается", сайт уже работает)) Просто у меня в-первые такая ситуация. Захотелось докопаться до истины

tt48 · April 28, 2011

мгммм...


<div id="zagolovki">Регистрация</div>
<div id="zagolovki">Аудио</div>

А кто это тут у нас id вместо классов использует?

Разницы не понимаем? - в гугл.

Более того. Можно посмотреть еще больше чудес, если заменить
<div id="zagolovki">Регистрация</div>
на <p>Регистрация</p>, то ничего не поедет))

<p> как раз без "неуникального id".

Прогоните еще через валидатор - явно не делалась проверка.

Edited April 28, 2011 by tt48

psywalker · April 28, 2011

Дружище, а дай-ка ссылку на страницу с примером. И сделай скрины того, как должно быть и как не должно быть.

И почему айди повторяются?

Softlink · April 28, 2011

мгммм...
<div id="zagolovki">Регистрация</div>
<div id="zagolovki">Аудио</div>
А кто это тут у нас id вместо классов использует?
Разницы не понимаем? - в гугл.
Более того. Можно посмотреть еще больше чудес, если заменить
<div id="zagolovki">Регистрация</div>
на <p>Регистрация</p>, то ничего не поедет))
<p> как раз без "неуникального id".
Прогоните еще через валидатор - явно не делалась проверка.

Каюсь, грешен. Но ситуация не поменяется. Пробовал Ребят, много чего уже перебрал.

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

завтра закину на хост.

PanSoul · April 29, 2011

Не знаю, у меня во всех браузерах, кроме ИЕ всё норм...(ну по крайней мере с тем кодом, что Вы выложили...А выложили Вы явно не всё! - Я про css)

Edited April 29, 2011 by PanSoul

Softlink · April 29, 2011

сегодня проблема несколько эволюционировала.

вот ссылка на страницу http://www.aletika.ru/socfaq/index1.html

Теперь конкретнее.

Чтобы понять как должно быть, уберите блок <div id="string1">

останется одна строка и пиксель исчезает.

Однако, проблема тега <p> не пропала. Если убрать второй блок и пикселя как ни бывало, то стоит в первый добавить <p>, как он тут же появляется.

Резюме:

1) пиксель появляется если в блоках string и\или string1 есть тег <p>

2) если убрать все <p>, но поставить один под другим блоки string и string1, то он снова появляется.

3) блоки идентичны

4) id назначил разные

Softlink · April 29, 2011

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

Если честно, то я не думал, что в этом причина. Тем более в одних и тех же браузерах на разных машинах верстка отображалась по разному.

psywalker · April 29, 2011

Чё то я не могу понять, в чём косяк. Сделай две разных страницы, с косяком и без. Чтобы люди могли видеть.

Softlink · April 29, 2011

без косяка http://www.aletika.ru/socfaq/

с косяком http://www.aletika.ru/socfaq/index1.html

psywalker · April 29, 2011

без косяка http://www.aletika.ru/socfaq/
с косяком http://www.aletika.ru/socfaq/index1.html

Так, и в чём проблема? Я смотрю например в верхнем блоке паддинг стоит 15пк.

Softlink · April 29, 2011

без косяка http://www.aletika.ru/socfaq/
с косяком http://www.aletika.ru/socfaq/index1.html
Так, и в чём проблема? Я смотрю например в верхнем блоке паддинг стоит 15пк.

#main{
margin:0 auto;
padding-top:20px;
width:1007px;
height:100%;
border:0px solid #000000;
overflow:hidden;
}

паддинг не при чем.

Поправил ширину страницы. Была 1008px, сделал 1007px.

Почему так происходит - я понять не могу. Почему тег или дублирование блока прибавляет пиксель? Браузеры? Их версии? Больше объяснений не могу найти.

psywalker · April 29, 2011

Извини дружище, а ты не мог бы на скриншоте показать, где проблема?

Кто же сочетает % с пк? В плане ширины? Это же неправильно, отсюда и все проблемы. Вёрстка сделана с неправильным подходом.

Softlink · April 29, 2011

Извини дружище, а ты не мог бы на скриншоте показать, где проблема?

Кто же сочетает % с пк? В плане ширины? Это же неправильно, отсюда и все проблемы. Вёрстка сделана с неправильным подходом.

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

Edited April 29, 2011 by Softlink

Great Rash · April 29, 2011

У меня к вам вопрос на засыпку: зачем оборачивать каждую ссылку в <p> (или в <div>)?

Softlink · April 29, 2011

У меня к вам вопрос на засыпку: зачем оборачивать каждую ссылку в <p> (или в <div>)?

предлагаете line-height -ом увеличивать интервал между строчками или по 2 <br/> использовать?

Great Rash · April 29, 2011

Предлагаю ссылкам сказать display: block; или display: inline-block; и проставить паддинг или маргин.

psywalker · April 29, 2011

У меня к вам вопрос на засыпку: зачем оборачивать каждую ссылку в <p> (или в <div>)?
предлагаете line-height -ом увеличивать интервал между строчками или по 2 <br/> использовать?

А для чего он ещё нужен? Чтобы использовать <br />?

Softlink · April 29, 2011

Предлагаю ссылкам сказать display: block; или display: inline-block; и проставить паддинг или маргин.

вполне вариант. Но уже как-то привык так делать. На будущее буду иметь ввиду, спасибо

Но тем не мене важен сам прецедент.

Great Rash · April 29, 2011

Верните назад <p>, а то у вас там дивы. Или отдельную страницу замутите. Ща позырим что так к чему.

Softlink · April 29, 2011

Верните назад <p>, а то у вас там дивы. Или отдельную страницу замутите. Ща позырим что так к чему.

http://www.aletika.ru/socfaq/ здесь все в <p>, чтобы воспроизвести проблему, поставьте в

#main{
margin:0 auto;
padding-top:20px;
width:1007px;
height:100%;
border:0px solid #000000;
overflow:hidden;
}

ширину 1008px и балуйтесь на здоровье))

psywalker · April 29, 2011

Верните назад <p>, а то у вас там дивы. Или отдельную страницу замутите. Ща позырим что так к чему.
http://www.aletika.ru/socfaq/ здесь все в <p>, чтобы воспроизвести проблему, поставьте в
#main{
margin:0 auto;
padding-top:20px;
width:1007px;
height:100%;
border:0px solid #000000;
overflow:hidden;
}
ширину 1008px и балуйтесь на здоровье))

Я ставлю и ничего не меняется. ФФ4

Softlink

Кстати, я бы на твоём месте сделал всё в UL-LI, почему не посмотрел в эту сторону?

Softlink · April 29, 2011

Верните назад <p>, а то у вас там дивы. Или отдельную страницу замутите. Ща позырим что так к чему.
http://www.aletika.ru/socfaq/ здесь все в <p>, чтобы воспроизвести проблему, поставьте в
#main{
margin:0 auto;
padding-top:20px;
width:1007px;
height:100%;
border:0px solid #000000;
overflow:hidden;
}
ширину 1008px и балуйтесь на здоровье))
Я ставлю и ничего не меняется. ФФ4
Softlink
Кстати, я бы на твоём месте сделал всё в UL-LI, почему не посмотрел в эту сторону?

+1 к тем, у кого ничего не меняется))) В самом начале я писал, что в одинаковых браузерах, но на разных компах может выглядеть по разному.

Скрин я же вам показал. Делал в хроме.

Не очень жалую списки. Об этом варианте знал, но не рассматривал даже.

Edited April 29, 2011 by Softlink

Sign In

тег <p> в диве

Question

Link to comment

Share on other sites

41 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