2009-02-12 3 views
8

Я отрываю свои волосы от этого. Какие инструменты используют люди для отладки проблем форматирования с помощью css? У меня есть относительно простое форматирование для навигации с помощью CSS, который выглядит следующим образом:Какие существуют инструменты для отладки css?

/* sub navigation */ 
.sidenav { 
    float: right; 
    width: 218px; 
} 
.sidenav h1 { 
    background: #BCB39F url(img/sidenavh1.gif) repeat-x; 
    border-bottom: 1px solid #999; 
    border-top: 1px solid #CCC; 
    color: #4A4A44; 
    font-size: 1.2em; 
    height: 22px; 
    margin: 0; 
    padding-left: 12px; 
} 
.sidenav h1 a { 
    color: #554; 
    text-decoration: none; 
    display: block; 
} 
.sidenav h1 a:hover { 
    background: #D6CCB9; 

    color: #654; 
} 

Я тогда этот код на моей странице:

<div class="sidenav"> 
<a href="ceremony">Wedding Ceremony</a> 
<a href="reception">Wedding Reception</a> 
<div class="clearer"></div> 
</div> 

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

Какие-либо предложения?


Ответ найден благодаря firebug.

Форматирование не применяется, так как форматирование для ссылок применяются только к ссылкам в <h1> элементе - т.е. HTML должен быть:

<div class="sidenav"> 
<h1><a href="ceremony">Wedding Ceremony</a></h1> 
<h1><a href=reception">Wedding Reception</a></h1> 
<div class="clearer"></div> 
</div> 

ответ

28

firebug. Существует также чистая версия javascript, которая работает в IE, называется firebug lite.

Позволяет вам отключить или изменить любые CSS, которые вы хотите на лету.

+0

Благодаря Марк, я знал, что поджигатель будет иметь ответ где-то, я hadnt понял, как вы могли бы посмотреть на различные стили, связанные с ним. –

15

Чтобы ответить на фактический заголовок вопроса: Я использую FireBug!

3

У Firebug plugin для Firefox есть несколько отличных инструментов для отладки CSS.

3

Firebug действительно ваш друг здесь!

Щелкните правой кнопкой мыши на своей странице, выберите «Осмотреть элемент», и он расскажет вам все стили, применяемые к этому элементу. Вытесненные вычеркнуты, поэтому вы можете точно видеть, где вы поступили неправильно.

2

Magilla Gorilla подозревает отсутствие «:

<a href=reception">Wedding Reception</a> 
+0

Спасибо. Хорошее место, однако, к сожалению, моя ошибка ctrl-V при написании вопроса (я опубликовал только фрагмент из чего-то большего). –

5

Расширение Web Developer делает некоторые интересные вещи тоже

+0

Должна иметь ссылку здесь: https://addons.mozilla.org/en-US/firefox/addon/60 –

3

Вы также можете использовать W3C CSS validator, если у вас нет доступа к Firebug.. это, как правило, быть в состоянии указать на ошибки синтаксиса.

+0

Этот валидатор легко доступен через панель инструментов веб-разработчиков: https://addons.mozilla.org/en-US/firefox/addon/60 –

Смежные вопросы