Softlink

Всем спасибо за советы)), но внятного ответа так никто и не дал. Какая бы верстка "ужасной" ни была, из-за тега <p> не должен ехать сайт на 1 пиксель. Причем в каком браузере разъехаться - страничка выбирает сама, вопреки логике. Думаю, тему можно закрывать.

дайте пожалуйста ссылку на сайт с хорошей версткой, чтобы понять что такое хорошо и что такое плохо. Про id взял на заметку. Спасибо

к тому же там стили для еще 4-х страниц. Разве там много всего? Меня просто зацепило выражение с "ужасной версткой" . Вложенность минимальна, в html нет никаких вставок типа "style=..", стили для текста прописаны в одном месте, всяких извращений с паддингами нет, валидатор особо не ругается, разве что на одинаковые id, так с этим разберусь. Что же там такого ужасного и что бы вы сделали кардинально по другому? Вот интересно. И вообще - это моя 3-я верстка на дивах

так-то да, а если еще и таблицами наверстать, то поди вообще проблем не будет)))

Вот об этом то я и говорил. Вёрстку нужно с умом делать и будет всё нормально тогда. Ребят, эти float и асболют, сейчас там от меню, которое я пытаюсь приделать и уже создал тему. На момент самой проблемы их не было))) А по стилям - да, там много ненужного, т.к. еще не поудалял все от моих экспериментов в борьбе за пиксель, так что вот) p.s. если сомневаетесь, уберите вообще блок id="menu". И поставьте всю ту же ширину в 1008px. Проблема останется.

Проблема с выпадающим меню. Сам список прячется под следующим блоком. Вот так это все выглядит. <div id="menu" style="z-index: 10; position: relative;"> <ul id="nav"> <li><a href="#">Главная</a></li> <li><a href="#">Услуги</a></li> <li><a href="#">Продукты</a></li> <li><a href="#">Контакт</a> <ul> <li><a href="#">Часы работы</a></li> <li><a href="#">Местоположение</a></li> <li><a href="#">Часы работы</a></li> <li><a href="#">Местоположение</a></li> <li><a href="#">Часы работы</a></li> <li><a href="#">Местоположение</a></li> <li><a href="#">Часы работы</a></li> <li><a href="#">Местоположение</a></li> <li><a href="#">Часы работы</a></li> <li><a href="#">Местоположение</a></li> <li><a href="#">Часы работы</a></li> <li><a href="#">Местоположение</a></li> </ul> </li> </ul> </div> Если поставить absolute, то меню отображается нормально, но у меня нет возможности прицепить его к определенному месту. Пробовал поставить z-index следующим блокам меньше, тоже не сработало. Может подскажете чего?

Новый вопрос - новая тема. Создавайте новую тему с подробным описанием проблемы.

А вот и зря. а может быть. В менюшках - пожалуйста, а в таких случаях не очень люблю их применять.

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 к тем, у кого ничего не меняется))) В самом начале я писал, что в одинаковых браузерах, но на разных компах может выглядеть по разному. Скрин я же вам показал. Делал в хроме. Не очень жалую списки. Об этом варианте знал, но не рассматривал даже.

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

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

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

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

Так, и в чём проблема? Я смотрю например в верхнем блоке паддинг стоит 15пк. #main{ margin:0 auto; padding-top:20px; width:1007px; height:100%; border:0px solid #000000; overflow:hidden; } паддинг не при чем. Поправил ширину страницы. Была 1008px, сделал 1007px. Почему так происходит - я понять не могу. Почему тег или дублирование блока прибавляет пиксель? Браузеры? Их версии? Больше объяснений не могу найти.

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

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

сегодня проблема несколько эволюционировала. вот ссылка на страницу http://www.aletika.ru/socfaq/index1.html Теперь конкретнее. Чтобы понять как должно быть, уберите блок <div id="string1"> останется одна строка и пиксель исчезает. Однако, проблема тега <p> не пропала. Если убрать второй блок и пикселя как ни бывало, то стоит в первый добавить <p>, как он тут же появляется. Резюме: 1) пиксель появляется если в блоках string и\или string1 есть тег <p> 2) если убрать все <p>, но поставить один под другим блоки string и string1, то он снова появляется. 3) блоки идентичны 4) id назначил разные

А кто это тут у нас id вместо классов использует? Разницы не понимаем? - в гугл. <p> как раз без "неуникального id". Прогоните еще через валидатор - явно не делалась проверка. Каюсь, грешен. Но ситуация не поменяется. Пробовал Ребят, много чего уже перебрал. завтра закину на хост.

и опять мимо)) Во-первых бордер есть не только в ховере, а и изначально в диве. Можно совсем бордеры убрать, толку не будет - уже пробовал. Я уже чего только не перебрал, и доктайпы менял и ширину и пэддинги перебрал. Ничего не выходит. Еще любопытно, что в одних и тех же браузерах на разных компьютерах отступа может не быть. Сегодня проверили на ФФ. У меня есть отступ, на другой машине нет. В Опере, я так понял, отступа совсем нигде не видно. p.s. проблему можно решить заталкиванием строчки в обычный див и все прекрасно работает. Также работают теги <br/>. Но меня просто уже зацепила такая ситуация. С чего бы вдруг так получалось? Может есть энтузиасты? Могу весь код скинуть, попробуйте покопать. Не расценивайте это как "сделайте мне задачку за бесплатно, а то у меня не получается", сайт уже работает)) Просто у меня в-первые такая ситуация. Захотелось докопаться до истины

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

Приветствую! Сегодня столкнулся с необычной для себя проблемой. Страница сверстана с контентом в центре. Разбита на 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, также появлялся отступ. У Лебедева в техногрете почитал примерно об этом же.