Каков наилучший способ определить источник проблемы CSS

Question

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

http://www.roccocammisola.com/proj/brunel/bgimage.html

У меня были проблемы с тенями по обе стороны от основной области содержимого. Конечно, это только проблема в IE. Как вы можете видеть, тень была обрезана примерно до 10% от ее фактической высоты.

С моей относительной неопытностью, как мне искать соответствующие исправления для этой проблемы.

Любая помощь будет принята с благодарностью.

Answer 1

Панель инструментов веб-разработчика IE Это не так хорошо, как firebug в целом, но помогает, когда у вас есть проблемы с IE.

Answer 2

FireBug , самый важный инструмент для отладки CSS, среди прочего.

получите это здесь

Answer 3

В дополнение к Firebug , проверка того, что ваш HTML верен, является бесценным инструментом и может минимизировать головные боли CSS. Иногда ваш CSS может работать неправильно, потому что в HTML есть ошибки. Разные браузеры по-разному справляются с неправильно написанным HTML, что иногда может показаться, что существует проблема с кросс-браузерным CSS. Валидатор может помочь вам найти ошибки в вашей разметке.

http://validator.w3.org/

Answer 4

Ваш CSS-класс .mainShadowRight задает минимальную высоту (которую IE6 не понимает, а IE7 не всегда на 100% правильно)

и, как указал Д.Ларсен, похоже, вам не хватает фонового изображения: url (); бит.

Answer 5

+ 1 для FireBug

В этом конкретном случае я бы просто предложил новый подход для ваших теней. В настоящее время они у вас есть в качестве предметов. Обычно вы хотите использовать фоновые изображения CSS для таких вещей.

.mainShadowRight {
*/ your other stuff */
url('images/mainShadowRight.gif');
}

Answer 6

Еще одна горячая рекомендация по отладке CSS - CSS Viewer .

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

Answer 7

Спасибо за все ваши ответы, похоже, сделали свое дело.

Я думаю, что я избавился от загрузки, так как я определенно должен был иметь там материал bg-image.

Эта панель инструментов для веб-разработчиков IE тоже выглядит неплохо, так как у меня есть Firebug и панель для веб-разработчиков для FF.