Разница в отступах между FF и IE

[Walk]

Всем доброго времени суток.

Не могу найти причину разного отступа между элементами <p> <img> в браузерах FF (в опере тоже все нормально) и IE (сайт)

В FF и Opera отступы такие, какие и нужно, в IE очень большие:

HTML пример кода:

	<p class="new_menu">» <a href="/diablo1/" title="Diablo 1 Описание" class="news_menu">Описание</a></p>
	<img src="/images/line-666.gif" width="159" height="1" class="line-666" alt="">
	<p class="new_menu">» <a href="/download/" title="Diablo 1 Скачать" class="news_menu">Скачать</a></p>
	<img src="/images/line-666.gif" width="159" height="1" class="line-666" alt="">
	<p class="new_menu">» <a href="/game/" title="Diablo 1 База знаний" class="news_menu">База знаний</a></p>
	<img src="/images/line-666.gif" width="159" height="1" class="line-666" alt="">

Стили:

p.new_menu {
	font-family:verdana;
	font-size:11px;
	color:#bea982;
	margin:0;
	margin-left:10px;
	margin-right:10px;
}

a.news_menu {
	color:#bea982;
	text-decoration:none;
}

a.news_menu:hover {
	color:red;
	text-decoration:underline;
}

img.line-666 {
	margin:3px;
	margin-left:8px;
}

На сайте подгружается 3 файла css, но нигде наложений нет. Помогите найти причину.

[psywalker]

zoom:1; пробуй для ссылок, а потом если что, и для LI

[Walk]

Извиняюсь, а что такое zoom:1?

А LI то тут при чем?

[viv]

А если попробовать к картинкам применить класс vertical-align: top; У меня была похожая проблема, ие6 отступал в 2раза больше от верхней картинки, когда в др.браузерах все ок. Мне помогло.

[psywalker]

Извиняюсь, а что такое zoom:1?

А LI то тут при чем?

Сначала узнай, что такое zoom:1; и браузер IE в частности, а потом будешь задавать и второй вопрос.

[photograf]

Психоход (или как правильно на русский перевести?) говорит о присвоении свойства hasLayout

Которое есть в Ie ранних версий (ниже 8-й).

Говорят попробуй - значит попробуй.

[psywalker]

Психоход (или как правильно на русский перевести?)

Лучше просто по имени. Макс.

[photograf]

Хорошо, Макс

[psywalker]

Хорошо, Макс

[Walk]

Извиняюсь, а что такое zoom:1?

А LI то тут при чем?

Сначала узнай, что такое zoom:1; и браузер IE в частности, а потом будешь задавать и второй вопрос.

Попробовал - так же

[amelice]

Извиняюсь, а что такое zoom:1?

А LI то тут при чем?

Сначала узнай, что такое zoom:1; и браузер IE в частности, а потом будешь задавать и второй вопрос.

Попробовал - так же

Есть два решения:

1.

img.line-666 {
        margin:3px;
        margin-left:8px;
        display:block;     /*делаем блочным элементом*/
}

И забыть все проблемы связанные с вертикальным размещением строково-замещаемых элементов. Я проверяла, работает в вашей задаче.

2.Сделать img бекграундом абзаца. Так будет более оптимизировано.

p.new_menu {
        font-family:verdana;
        font-size:11px;
        color:#bea982;
        margin:3px 0 0;
        padding:0 10px 3px;
        background:url(images/line-666.gif) no-repeat left bottom;     /* бекграундим абзаца */
}

В этом случае вместо горизонтальных маргин, нужно использовать горизонтальный паддинг. Так же не забыть о 3-х пиксельном маргине картинки.

Edited July 21, 2011 by cheburek

[Walk]

Есть два решения:

1.

img.line-666 {
        margin:3px;
        margin-left:8px;
        display:block;     /*делаем блочным элементом*/
}

И забыть все проблемы связанные с вертикальным размещением строково-замещаемых элементов. Я проверяла, работает в вашей задаче.

Спасибо! Помогло!

Edited October 8, 2011 by Walk

[amelice]

Спасибо! Помогло!

Пожалуйста.