CSS работает в IE, но не в FF / Chrome

Question

Я чувствую, что это очень простой вопрос CSS:

Кажется, в моем CSS есть скрытая "граница сверху", которая отображается в FF и Chrome, но не в IE. Это страница: adambailin.com / projects

Я хочу, чтобы название проекта совпадало с изображением. Каждый проект находится в #project div (тонкая белая рамка сверху). CSS для изображения

#project_image
{

 float: left;
 width: 150px;
 height: auto;
 padding: 2px;
 border: solid 1px #7E8AA2;
}

И CSS для части описания

#project_desc
{
 float: right;
 width:425px;
}

Любые идеи очень ценятся!

Answer 1

Вы правы. Все браузеры по умолчанию добавляют поля для всего. По умолчанию IE равен 0. FF, а остальные находятся в диапазоне 5 - 10. Обнулите поля в div вашего контента и почти все, что вы хотите, чтобы оно было равно нулю, как p и h1 Это позволит избежать такого рода вещей каждый раз.

Добавьте margin:0px к вашим идентификаторам, и это должно сработать.

Soapbox: Люди всегда говорят, что FF всегда прав; это IE делает это неправильно. О да, дефолтные поля для чего-то другого, кроме нуля, делают это правильно? Думаю, нет. Честно говоря, оба браузера имеют недостатки, и оба имеют свои достоинства.

Answer 2

Вы используете тег H4 с собственным полем.

#project_desc h4 { margin-top:0 }

Answer 3

просто используйте это в CSS

h4 {margin-top:0;}

Answer 4

#project_desc h4
{
margin-top:0;
}

может помочь, попробуйте установить firebug в firefox, это лучший друг веб-разработчиков.

Answer 5

Лучший план ... используйте таблицу стилей css reset для решения этой проблемы ... каждый браузер запускается с различными базовыми стилями.

Смотрите эту ссылку