Проблема с горизонтальным меню Firefox, все остальные браузеры в порядке - PullRequest
Новая
       45

Проблема с горизонтальным меню Firefox, все остальные браузеры в порядке

0 голосов
/ 07 апреля 2011

Пожалуйста, посмотрите здесь: http://fastforwardacademy.com/, а затем посмотрите здесь: http://fastforwardacademy.com/index-page-irs-paid-registered-tax-preparer.htm.

В любом другом браузере ... IE, Opera, Safari и Chrome тамНет проблем, но Firefox не отображает меню правильно.Глядя на CSS, у кого-нибудь есть идеи, почему?

Ответы [ 2 ]

1 голос
/ 07 апреля 2011

Основная причина в том, что ваш HTML ужасно недействителен:

http://validator.w3.org/check?uri=http%3A%2F%2Ffastforwardacademy.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Конкретная ошибка, о которой идет речь, такова:

Строка 126, столбец 103: тип документа не разрешает элемент "LI" здесь

…decoration:none;"><li class="current1">HOME<br /><span>Fast Forward Academy</s…

Элемент, указанный выше, был найден в контекст, где это не разрешено. это может означать, что у вас неправильно вложенные элементы - такие как «стиль» элемент в разделе "тело" вместо внутри "головы" - или два элемента это перекрытие (что недопустимо).

Вы вкладываете элемент li в элемент a (также внутри элемента ul). Это недействительно и вызывает у Firefox, скажем так, рвоту?

Подходящий выбор слова, потому что рассматриваемая ошибка Firefox называется ..

Рвотная ошибка

Ваш исходный код выглядит так: 

<ul>
    <a href="index.php" name="Fast Forward Academy" style="text-decoration:none;">
        <li class="current1">HOME<br /><span>Fast Forward Academy</span></li>
    </a>
    ..
</ul>

Но Firefox (версия 3, это исправлено в Firefox 4) превращает его в (проверено с помощью Firebug) : 

<ul>
    <a style="text-decoration: none;" name="Fast Forward Academy" href="index.php"></a>
    <li class="current1">
        <a style="text-decoration: none;" name="Fast Forward Academy" href="index.php">HOME<br><span>Fast Forward Academy</span></a>
    </li>
..
</ul>

Итак, исправление заключается в размещении элементов a внутри элементов li, а не наоборот. Вам также придется переключаться на некоторые CSS.

На несвязанной ноте ..

Ваш доктайп такой: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Но следующая строка исходного кода выглядит так: 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

и вы используете <br />.

Вы возможно хотите изменить свой тип документа на этот; XHTML Переходный тип документа: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
0 голосов
/ 07 апреля 2011

Проблема в заполнении для .main_nav ul li a:hover, .main_nav ul li.current.Заполнение применяется один раз, когда вы нажимаете на клик, и второй раз при наведении, и это приводит к тому, что ссылка выходит из выравнивания.Вам не нужно набивать при наведении.

После .main_nav ul li a:hover, .main_nav ul li.current

Добавить 

.main_nav ul li a:hover{
 padding:0;
}
...