лишний пиксель снизу в IE

[dangler]

Здравствуйте!

вот,сверстал недавно сайтик - http://atahanov.ru/ (не посчитайте за рекламу, пожалуйста, просто лень выкладывать отдельно код и принтскрин, но, если все-таки надо будет, то сделаю..)

вроде все просто - верстка таблицами, css только для текста и ссылок, никакаго флеша.. в файрфоксе все отлично отображается, в сафари тоже, а вот ИЕ, гад почему-то вставляет снизу полоску и из-за этого картинки не прилегают вплотную к дну браузера, весь вид портится..

как только не бился - вроде все обнулено в таблицах, все целпадинги и целспейсинеги и тд, а вот полоска не пропадает и все тут..

кто знает, подскажите, пожалуйста, как это исправить?

заранее благодарю!

p.s. - если время будет - посмотрите, в остальном все нормально в коде? буду рад любому замечанию (весь код писал сам в блокноте

[Vlad]

Смотрел в IE6, IE7, не заметил никакого отступа лишнего.

[dangler]

толи лыжи не едут, то ли я...

и причем и дома смотрел и на работе - одно и то же...

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

Edited November 5, 2008 by dangler

[klierik]

в ИЕ7 есть отступ.

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

[rus]

у тега body лучше сделать такую запись:

margin:0;

padding:0;

и запись вида:

cellspacing "0" cellpadding "0"

в css записать как: border-collapse:collapse;

А еще лучше все ваши стили вынести в отдельный файл

[dangler]

сделал, как вы сказали, только теперь и в файфоксе появился отступ...

похоже, целпадинг и целспейсинг все-таки нужно обнулять в теге <table> в хтмл.. хотя не знаю уж, как нужно..

а все стили в отдельном документе есть: http://atahanov.ru/atahanov.css

как же быть все-таки?

[dangler]

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

border-collapse: collapse; - добавляй, не добавляй это в цсс - ничего не происходит, по крайней мере, я не заметил..

border="0" который я везде вписал в тегах <table> в коде, в надежде, что он исправит проблему тоже, судя по всему не нужен, по крайней, когда я удалил его везде из html и css ничего не изменилось..

при этом зато можно вписать в css border: solid; и рамочка появляется, причем черная в фф и серая в ие..

и когда я сделал эту рамку и при этом в тегах <table> везде сделал cellspacing="0" cellpadding="0" увидел, что проблема, про которую я начал тему, вроде где-то тут: в фф картинки вплотную прилегают к рамке, а рамка - вплотную к краю браузера. а вот в ие как раз не соблюдается первый пункт, из-за чего и возникает пробема. смотри картинки:

вот... это вроде хорошо, но вот как решить эту проблему, я пока так и не понял..

может, кто-нибудь поймет?

Edited November 5, 2008 by dangler

[klierik]

то что вы не видите разницы в использование бордер-колапс это не значит что ее нет.

просто проблема в другом.

* { margin: 0; padding: 0; }

[dangler]

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

ааа.. а вы не подскажите, что это значит, что вы выложили? так и вставлять, со звездочкой? у меня ведь то, что у вас в звездочке прописано в body.. или это куда-то еще прописать?

[klierik]

просто вставьте это после body

[dangler]

вставил так:

body * { margin: 0; padding: 0; }

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

[klierik]

не не так. ладно забейте.

вот вставьте этот код:

img { display: block; }

у меня на тесте он исправил ситуацию в данном случае.

хотя я бы не рекомендовал прописывать столь глобальное правило.

В вообще автору рекомендую попробовать переписать данную страничку (сайт) на основе блочной верстки. у вас много лишнего кода (((

[Victor Ananiev]

надо было изначально прописывать все отступы, а стандартные обнулить. кстати звездочка пишется отдельно, так вот:

*
{
margin:0; //обнуляем отступы от елементов
padding:0; //обнуляем отступы в элементах(внутренние)
}

По скольку вы этого не сделали, все надо дописать, в крайнем случае еще отступ для html обнулить, а звездочку убрать)

html
{
margin:0; //обнуляем отступы от елементов
padding:0; //обнуляем отступы в элементах(внутренние)
}

[dangler]

Да, спасибо, вроде помогло. В ие теперь нет полоски снизу. Правда, почему-то появилась сбоку полоса прокрутки, хотя там прокручивать-то нечего, все помещается.. но это не так страшно )

а как все-таки сделать, как вы говорили? или у вас времени нет сейчас объяснять? просто не хочется абивать, хочется понять, а просто копировать код.. )

[klierik]

вот тут почитайте по поводу блочной верстки внизу

[dangler]

to Vindex10:

попробовал написать

 * { margin: 0; padding: 0; }

- в фф отступы по краям исчезли, но также намного уменьшилось вертикальное расстояние между ссылками на главной странице, как я уже описывал klierik у. при этом в злополучном ие верикальное расстояние также исчезло, однако отступ снизу остался!

после этого стёр звездочку, вместо нее вписал html - со ссылками в обоих браузерах стало все хорошо, вертикальное расстояние нормализовалось, с отступами в ие все осталось без изменений - отступ снизу, а вот в файфоксе все стало хуже появились большие, где-то по 6 пикселей отступы и снизу, и по краям..

после этого я убрал вообще эту отдельную запись, а код margin: 0; padding: 0; дописал в body - вертикальное расстояние между ссылками осталось нормальным, а в файфоксе исчезли отступы снизу и по бокам. в ие отступ снизу как был, так и остался.. )

интересно, его можно вообще как-нибудь обнулить?

ну вот klierik подсказал код img { display: block; } он работает, но это, как я понимаю, довольно-таки обходной способ, я бы даже не догадался, что он тут сработает, хотя внимательно прочитал описание свойства "display"..

а почему все-таки этот отступ через margin и padding в этом поганом ie не обнуляется?

[klierik]

все обновляется.

это рисунок в ИЕ создает псевдо отступ

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

свойством display: block; рисунок делается блочным и на него не влияют строчные правила.

[dangler]

о как все сложно.. ну спасибо, что объяснили, теперь более-менее понятно.. ) так и оставлю, по крайней мере, пока..

вот только.. а почему, например, у лебедева на страничке ( http://tema.ru/main.html ) нет такого кода в цсс - http://tema.ru/main.css

но при этом у него не появляется этого отступа под картинкой в ие?

извините, если уже надоел с распросами..

[klierik]

подозреваю из за того что у него страница отображается в режиме QuirksMode

[dangler]

хм, хм.. спасибо за информацию к размышлению.. )

нашел по этому поводу статейку http://neveragainblog.com.ua/archives/70 - надо почитать будет..

кстати, как верно тут написано, когда я попробовал добавить в свой документ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

то все, извиняюсь, звездой пошло.. а вообще, он сильно нужен, этот доктайп?

[klierik]

да важен. подробнее прочитайте тут: http://htmlbook.ru/content/?id=1

Вам надо выбрать удобный для Вас доктайп и писать на нем =)