CSS сломал мозг :(

(Ответов: 1, Просмотров: 413)
  1. Студент
    • Регистрация: 05.01.2011
    • Сообщений: 41
    • Репутация: 14
    Замутил класс CSS - цель сделать заголовок в белом цвете, жирным и заглавными буквами со ссылкой и чтобы ссылка не меняла цвет заголовка (ну типа в зависимости от посещения, ховера и т.п.) И всё как бы работает, но в сафари на MacOS (версии самые новые и того и другого) ссылка ведёт себя как ссылка, а не так как я ей задаю. Поначалу сделал так:

    .footer-block-title {
    border-bottom: 1px #fff solid;
    padding: 0 0 15px 0;
    margin: 0 0 15px 0;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 600;
    text-decoration:none;
    color: #ffff;

    }
    .footer-block-title a {
    color: #ffff;
    }

    и это работает везде корректно, кроме этого злобного сафари. Потом сделал так:

    .footer-block-title {
    border-bottom: 1px #fff solid;
    padding: 0 0 15px 0;
    margin: 0 0 15px 0;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 600;
    text-decoration:none;
    color: #ffff;
    }
    .footer-block-title a:link {
    color: #ffff;
    text-decoration:none;
    }
    .footer-block-title a:active {
    color: #ffff;
    text-decoration:none;
    }
    .footer-block-title a:visited {
    color: #ffff;
    text-decoration:none;
    }
    .footer-block-title a:hover {
    color: #ffff;
    text-decoration:none;
    }

    но стало ещё хуже. Причем эти конструкции a:hover, a:active и так далее, отлично работают непосредственно в HTML:

    <style type="text/css"> .myLinkClass:hover {text-decoration:none;color: #ffff; font-size: 18px; text-transform: uppercase; font-weight: 600;} .myLinkClass:link {text-decoration:none;color: #ffff; font-size: 18px; text-transform: uppercase; font-weight: 600;} .myLinkClass:active {text-decoration:none;color: #ffff; font-size: 18px; text-transform: uppercase; font-weight: 600;} .myLinkClass:visited {text-decoration:none;color: #ffff; font-size: 18px; text-transform: uppercase; font-weight: 600;} </style> <a href="/news/" class="myLinkClass">НОВОСТИ</a>

    И в том же Сафари всё отлично. А переношу это дело в общий класс и кирдык происходит. Просто не хочется мутить ещё один класс, ведь он же уже есть footer-block-title и нужно только добавить описание для a: hover и т.п. Если я тупо пишу:

    .footer-block-title a {
    color: #ffff;
    hover: text-decoration:none;

    }
    или так

    .footer-block-title a {
    color: #ffff;
    .hover: text-decoration:none;

    }

    то редактор ругается, что синтаксис неправильный

    а если делаю так:

    .footer-block-title a:link {
    color: #ffff;
    text-decoration:none;
    }
    .footer-block-title a:active {
    color: #ffff;
    text-decoration:none;
    }

    то и вовсе не работает всё. Что я тут делаю не так?
    • 0
  2. Дипломник Аватар для Unick
    • Регистрация: 12.02.2013
    • Сообщений: 142
    • Репутация: 45
    Выложите код лучше в песочницу (например jsfiddle.net)
    Так людям будет проще вам помочь
    редактировать подпись
    • -1

Похожие темы

Темы Раздел Ответов Последний пост
Веб мани парит мозг
Оффтоп и свободные темы 3 17.08.2013 18:48
На что способен наш мозг!
Оффтоп и свободные темы 10 24.01.2012 12:33
Я сломал Google
Оффтоп и свободные темы 20 20.07.2011 16:46
Путешествие в мозг посетителя блога
Дайджест блогосферы 0 26.01.2010 21:50

У кого попросить инвайт?

Вы можете попросить инвайт у любого модератора:

Информеры