Изменения шрифта и "|" (вертикальные полосы) исчезают под изображениями

Question

У меня проблемы с текстом под изображениями на веб-сайте, который я создаю:

1) «Назад на домашнюю страницу» изменится со шрифта, установленного в (Грузия, 0,9em), на шрифт Firefox по умолчанию. Это не делается в Safari (http://ink -12.web5test.terc.edu / img / modelofinteractionfull.cfm ).

2) Перед добавлением изображений нижний колонтитул выглядел нормально (http://ink -12.web5test.terc.edu / index.cfm ). После того, как я добавил изображения (внутри div class = .submenu), снова, шрифт, который я установил (Грузия, 0,9em), изменился на Firefox по умолчанию (http://ink -12.web5test.terc.edu / aboutus / index). .cfm ).

Другая проблема, которая появляется после того, как я вставил изображения:

1) Вертикальные полосы нижнего колонтитула (|) исчезли между ссылками в Firefox и Safari. Вы можете видеть, что полосы на самом деле все еще там, когда вы выделяете текст, но по какой-то причине они больше не отображаются белым, поэтому они не видны (http://ink -12.web5test.terc.edu / ABOUTUS / index.cfm ). Но вы можете увидеть, как это должно выглядеть на домашней странице (http://ink -12.web5test.terc.edu / index.cfm ).

Я хотел скопировать код ниже, но у меня проблемы с пониманием того, как правильно отформатировать его на этом сайте, поэтому я над этим поработаю. А пока какие мысли ?? Заранее большое спасибо за помощь!

Answer 1

Например, что касается вопроса 1, единственное правило CSS, которое устанавливает семейство шрифтов, это

 h1,h2,p,p2,li{ /*group codes for many styles*/
   font-family:"georgia";
 }

Это не влияет на ссылку, так как она не находится ни в одном из этих элементов. Аналогичные соображения применимы к вопросу 2. И вертикальные полосы есть, они просто черные на черном.

Используйте средство проверки разметки, например http://validator.w3.org, чтобы найти синтаксические ошибки HTML, исправить их, а затем обработать синтаксические ошибки CSS с помощью http://jigsaw.w3.org/css-validator/ и затем проанализировать логические проблемы. Использование Firefox с Firebug - хорошая идея, с тех пор вы можете щелкнуть по любому элементу и посмотреть, какие, если таковые имеются, правила CSS применяются к нему.

Answer 2

Извините, это было такое простое исправление!Я очень новичок в кодировании (как я уверен, вы могли бы сказать по смешному количеству разметки, которую я имел в моих таблицах стилей). Я не знал, что ссылки могут иметь все свое семейство шрифтов, и подумал, что еслиВы держали его между тегом заголовка или абзаца, чтобы он просто взял это на себя. Но теперь я понял, спасибо!

Answer 3

Для "|" вопрос добавить следующий

skeleton.css line # 161

.footerlinks {
    padding-top: 0.5em;
    color: #fff;
}

Что касается проблемы со ссылкой, мне кажется, что шрифт становится жирным, когда вы наводите курсор мыши. Вам просто нужно определить ваше состояние при наведении ...

fonts.css line # 4

a:hover {
   font-weight: normal;
}

Answer 4

Я не уверен, поможет ли это вам, но я предлагаю убедиться, что «Грузия» пишется с большой буквы, когда вы объявляете это. Возможно, я ошибаюсь, но подозреваю, что некоторые браузеры не могут подобрать название, потому что оно не соответствует имени шрифта.

Сравнение каналов (символы вертикальной черты '|') между вашими примерами показывает небольшой недостаток в CSS. Трубы не находятся внутри тегов <a>, поэтому даже если вы установите все свои <a> s на белые, трубы никогда не изменятся. В одном примере (http://ink -12.web5test.terc.edu / index.cfm ) каналы содержатся в теге <p2>, который не был действительным тегом HTML в последний раз, когда я проверял, но это помимо сути. <p2> имеет белый цвет, что делает трубы внутри него белыми. В другом примере (http://ink -12.web5test.terc.edu / aboutus / index.cfm ) трубы содержатся в <div>, чей цвет установлен на черный, что делает трубы черными , но <a> s установлены на белый. Поскольку ваш фон также черный, трубы исчезают.