Xpoint
   [напомнить пароль]

Ненужные отступы в BUTTON - как бороть?

Метки: [без меток]
2007-05-18 14:30:58 [обр] Дворнов Роман(0/109)[досье]

Имеем код

<?xml version="1.0" encoding="windows-1251"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="ru" xml:lang="ru">

<head>
  <meta http-equiv="Content-type" content="text/html; charset=windows-1251" />
  <title>button</title>
  <style type="text/css">
    BUTTON.w1_button
    {
      border: none;
      margin: 0;
      padding: 0;
      background: none;
      cursor: pointer;
      border: 1px solid red;
    }
    BUTTON.w1_button SPAN.button_border
    {
      display: block;
      border: 1px solid #494949;

    }
    BUTTON.w1_button SPAN.button_content
    {
      white-space: nowrap;
      display: block;
      border: 1px solid #A0A0A0;
      background-color: black;
      color: white;
      padding: 1px .4em 2px;
    }

  </style>
</head>
<body>
<button class="w1_button"><span class="button_border"><span class="button_content">just a test</span></span></button>
</body>

</html>

Наблюдаем ненужные отступы внутри BUTTON (FireFox, IE 5.0-7.0) и внутри SPAN.button_content (в IE 5.0-7.0). В опере, как ни странно, но все отлично. Кто-нибудь знает как это бороть? Отказываться от использования BUTTON не хочется по ряду причин.

спустя 29 минут [обр] Александр Носов(0/9)[досье]

В свое время мне пришлось поизвращаться с этой проблемой.
Посмотрите как я реализовал стили для кнопок здесь: http://www.igolf.com/buttons.html
Там часть кнопок сделана тегом <a></a>, а часть <button></button>
Но выглядят они совершенно одинаково и принцип построения их совершенно одинаков.

P.S. Обратите внимание на фичу - кнопка меняет свои размеры в зависимости от длины надписи, но при этом всегда для нее используются одни и те-же два рисунка!

спустя 5 минут [обр] Александр Носов(0/9)[досье]
И еще одна фича там есть - кнопки можно собирать в группы, а затем эти группы выравнивать: влево, по центру или вправо.
спустя 1 час [обр] Дворнов Роман(0/109)[досье]
Ну да... отключаем картинки радуемся жизни. А если прописать дефолтовый фоновый цвет, то он будет вылазить из под картинки. О чем, собственно, и речь :(
Совершенно случайно обнаружил что баг IE (отступы которые добавляет слева/вправа кнопка) лечится добавлением overflow: visible; в правило BUTTON.w1_button (кто бы мог подумать). Отступы в BUTTON внутри IE/FF так и остались :(
спустя 17 часов [обр] Александр Носов(0/9)[досье]

Дворнов Роман[досье]
Там не было цели оставить рабочими эти кнопки при отключенных рисунках. IMHO, этим анахронизмом уже никто не пользуется - Интернет дешевеет с каждым днем, а скорость его растет. Там была задача сделать красивые кнопки на основе какого-то изображения, но так чтобы не рисовать под каждую кнопку отдельный рисунок, а одну пару рисунков для создания кнопок с различными надписями.

Как я понимаю у Вас задача использовать тэг <button> как активный элемент формы, а дизайн этой кнопки задать при помощи тегов содержащихся внутри <button> - правильно?

У меня задача была подобная. Но решал я ее несколько иначе. Я боролся в основном только с IE - с тем что кнопка там гораздо шире чем в остальных браузерах. Я использовал float чтобы "вывести контент за пределы кнопки", а затем уже раздельно задавать ширину для самой кнопки и для контента.
Ваше предложение использовать overflow: visible; выглядит конечно более изящно. Правда у Вас в IE все равно остаются по одному пикселу по краям кнопки, а у меня их нет в IE. Но моя метода тоже не позволяла убрать те три пиксела, что возникают по краям кнопки в FF.

Мое мнение - не стоит обращать внимание на эти три пиксела. Никто не зметит, что курсор остается в форме пальчика за небольшой зоной вне кнопки. При условии, конечно что Вы уберете border и оставите прозрачным background у тега <button>.

Если же Вам надо пододвинуть какие-то другие элементы вплотную к это кнопке - используйте отрицательные margin. Правда Вам прийдется задавать разные стили для FF и других браузеров. Но тут я могу Вам только посоветовать воспользоваться методом описанным здесь: Кросс-браузерный CSS без хака!

спустя 3 дня [обр] Дворнов Роман(0/109)[досье]
Александр Носов[досье] То что интернет дешевеет еще не означает, что нужно писать (верстать) так как работает у Вас. Картинки могут и не загрузиться вовсе из-за различных причин. Во вторых альтернативные браузеры зарубают фоновые изображения, а у некоторых пользователей они вообще отключены - и дело тут не в скорости и стоимости канала. При выводе на печать часто фоновые изображения так же опускаются. Кнопка это элемент управления и он должен быть доступен всегда, даже если у вас нет картинок или не подгрузился css и т.п.
Решение с overflow, конечно более "изящно" так как не портит layout кнопки. Но мне кажется весьма странным это решение. Хотя с другой стороны не важно как - главное работает, как всегда это было с IE.
Насчет верстки в курсе. Читал и топик, и мне кажется это не удачное решение. Нужно верстать так чтобы работало везде, без всяких "если браузер такой, делаем так, а если такой - так". Это реально. Проблемы с IE решаются с помощью кондишен коментс, и то если делать устойчивую верстку правила в таких секциях сводятся к минимуму (не более десяти).
Еще по вашему решению хочется заметить: что оно не устойчиво, в случае если менять размер шрифта - то есть картинки у вас фиксированной высоты, а ширина недостаточная, потому при изменении шрифта в большую сторону все начинает ползти, а в меньшую выглядит не очень.
спустя 1 день 17 часов [обр] Александр Носов(0/9)[досье]

Дворнов Роман[досье] Не любую задачу можно решать стандартными средствами. Можно подогнать эти кнопки под все те требования что Вы описываете. Можно кнопку сформировать не из двух, а из четырех картинок и тогда она не будет зависеть от размера шрифта. Можно сделать подложку под картинку, на случай если она не загрузится. Но все это привело-бы к существенному усложнению html-кода и css. Я не спорю что все это имело-бы смысл на каком-то сайте с широким кругом посетителей.
Но зачем мне это здесь? Я знаю что на этот сайт заходят 90-95% юзеров с IE6-IE7, а остальные используют FireFox. Ни о каких альтернативных браузерах там нет и речи. Я неоднократно смотрел там статистику.

Решение с overflow мне не кажется сильно странным. Я на подобные ситуации натыкался. Здесь элемент button не является обычным блочным элементом, что доказывает появление этого топика. И завая overflow вы "заставляете" IE формировать паддинги по стандартным правилам. Хотя я не могу согласится что все это правильно! Тем более что FF не удается заставить работать по правилам (надеюсь, что они этот баг скоро пофиксят).

Нужно верстать так чтобы работало везде, без всяких "если браузер такой, делаем так, а если такой - так". Это реально.

Видать вам мало приходилось заниматься сложной версткой под разные браузеры, если так считаете... Все эти "хаки" не от хорошей жизни появились.
Я же хочу уйти от бессистемных "кривых хаков" к построению css-таблиц по определенным правилам, облегчающим их построение и редактирование.

Powered by POEM™ Engine Copyright © 2002-2005