Перейти к содержимому

Сервис обмена электронных валют


CSS подчёркивание текста

#1 SeredinPlus

SeredinPlus
  • Пользователь
  • 235 сообщений
  • Репутация: 8
0

Отправлено 23 Июнь 2013 - 10:04

День добрый. Работаю над оформлением нового блога, заголовок которого намеренно сделан с подчёркиванием. В браузере файрфокс смотрится довольно неплохо, а вот в гугл хром подчёркивание выглядит очень убого, черта совсем маленькая. Можно ли как-то это исправить, установить определённую ширину черты для всех браузеров?
В лисе:
Изображение
Хром:
Изображение
Мой css код:
#logo {
position: absolute;
top: 23px;
left: 25px;
background: none;
height: 100%;
width: 100%;
}
#logo a {
text-decoration: underline;
font-size: 42px;
color: #547ac0;
line-height: 0.9em;
}
#logo span {
font-size: 16px;
display: block;
margin: 5px 0 0;
text-shadow: none;
line-height: 0.5em;
}
На этом форуме мне неоднократно помогали, надеюсь и на этот раз получить дельные советы.

 

 

  • 0

#2 oKeey

oKeey
  • Пользователь
  • 126 сообщений
  • Репутация: 7

Отправлено 23 Июнь 2013 - 10:08

Попрбуйте 3 варианта:
1

#logo {
position: absolute;
top: 23px;
left: 25px;
background: none;
height: 100%;
width: 100%;
}
#logo a {
text-decoration: underline;
font-size: 42px;
color: #547ac0;
line-height: 2em;
}
#logo span {
font-size: 16px;
display: block;
margin: 5px 0 0;
text-shadow: none;
line-height: 2em;
}

2.

#logo {
position: absolute;
top: 23px;
left: 25px;
background: none;
height: 100%;
width: 100%;
}
#logo a {
text-decoration: underline;
font-size: 42px;
color: #547ac0;
line-height: 0.9em;
}
#logo span {
font-size: 16px;
display: block;
margin: 5px 0 0;
text-shadow: none;
line-height: 2em;
}


3.

#logo {
position: absolute;
top: 23px;
left: 25px;
background: none;
height: 100%;
width: 100%;
}
#logo a {
text-decoration: underline;
font-size: 42px;
color: #547ac0;
line-height: 2em;
}
#logo span {
font-size: 16px;
display: block;
margin: 5px 0 0;
text-shadow: none;
line-height: 0.5em;
}

  • 0

#3 SeredinPlus

SeredinPlus
    Topic Starter
  • Пользователь
  • 235 сообщений
  • Репутация: 8

Отправлено 23 Июнь 2013 - 10:29

Спасибо большое. Опробую отпишусь. Если будут подходить несколько вариантов - какой приоритетнее выбирать?
  • 0

#4 oKeey

oKeey
  • Пользователь
  • 126 сообщений
  • Репутация: 7

Отправлено 23 Июнь 2013 - 10:32

я думаю второй, если будет подходить. Смотри все главное, чтоб что-нидуь не попортил
ну сам посмотришь

от + не откажусь


  • 1

#5 SeredinPlus

SeredinPlus
    Topic Starter
  • Пользователь
  • 235 сообщений
  • Репутация: 8

Отправлено 23 Июнь 2013 - 11:29

Поробовал второй способ - в гугл хром ничего не изменилось, только везде ещё и описание вниз отъехало, а этого не хотелось. Первым и третьим способами вообще всё поломалось( Вернул свой исходный код, решение проблемы не найдено.
  • 0

#6 isvetlichniy

isvetlichniy
  • Пользователь
  • 619 сообщений
  • Репутация: 93

Отправлено 23 Июнь 2013 - 12:22

все дело в высоте строчки line-height
пробуй вот это, должно работать

#logo {
position: absolute;
top: 23px;
left: 25px;
background: none;
height: 100%;
width: 100%;
}
#logo a {
text-decoration: underline;
font-size: 42px;
color: #547ac0;
line-height: 1.3;
}
#logo span {
font-size: 16px;
display: block;
margin: 5px 0 0;
text-shadow: none;
line-height: 1.3;
}

  • 0

#7 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 23 Июнь 2013 - 12:22

Как-то так:
#logo {
position: absolute;
top: 23px;
left: 25px;
background: none;
  overflow: hidden;
  zoom: 1;
}
#logo a {
  float: left;
  text-decoration: none;
font-size: 42px;
  line-height: 46px;
color: #547ac0;
  border-bottom: 3px solid #547ac0;
}
#logo span {
font-size: 16px;
display: block;
text-shadow: none;
}
Суть в замене подчеркивания на нижнюю границу нужной толщины.
  • 1

#8 isvetlichniy

isvetlichniy
  • Пользователь
  • 619 сообщений
  • Репутация: 93

Отправлено 23 Июнь 2013 - 12:22

поиграйся с line-height, значение не должно быть меньше еденицы
  • 1

#9 SeredinPlus

SeredinPlus
    Topic Starter
  • Пользователь
  • 235 сообщений
  • Репутация: 8

Отправлено 23 Июнь 2013 - 12:29

Спасибо огромное ВСЕМ ВСЕМ. Сейчас буду пробовать все способы, но плюсую в любом случае всех, которые желали помочь ;)

yury, Спасибо большое. Можете чуть подкорректировать, чтобы и заголовок и описание были поближе к этой черте?


  • 0

#10 oKeey

oKeey
  • Пользователь
  • 126 сообщений
  • Репутация: 7

Отправлено 23 Июнь 2013 - 12:31

Как вижу ты уже сделал молодец :)
  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru