Результаты поиска

Процент ширины дочернего элемента в абсолютно позиционированном родительском элементе на Internet Explorer 7

У меня есть абсолютно позиционированный div , содержащий несколько детей, один из которых является относительно позиционированным div . Когда я использую процентную ширину для дочернего элемента div , он сворачивается до '0' ширины на Internet Explorer 7, но не на Firefox или Safari.

Если я использую ширину пикселя, это работает. Если родитель расположен относительно, то процентная ширина дочернего элемента работает.

1. Может быть, я чего-то здесь не понимаю?
2. Есть ли простое исправление для этого помимо пиксельной ширины на экране ребенок?
3. Есть ли область спецификации CSS, которая охватывает это?

Как определить, какой из определенных шрифтов был использован на веб-странице?

Предположим, что у меня на странице есть следующее правило CSS:

body {
    font-family: Calibri, Trebuchet MS, Helvetica, sans-serif;
}

Как я могу определить, какой из определенных шрифтов был использован в браузере пользователя?

Редактирование для людей, которым интересно, почему я хочу сделать это: шрифт, который я обнаруживаю, содержит глифы, которые не доступны в других шрифтах, и когда у пользователя нет шрифта, я хочу отобразить ссылку с просьбой загрузить этот шрифт, чтобы они могли использовать мое веб-приложение с правильным шрифтом.

В настоящее время я показываю ссылку на шрифт загрузки для всех пользователей, я хочу показать это только для людей, у которых не установлен правильный шрифт.

Как разбить слово на тире?

Учитывая относительно простую CSS:

div {

  width: 150px;

}

<div>

  12333-2333-233-23339392-332332323

</div>

Как мне сделать так , чтобы строка оставалась ограниченной до width из 150, и просто переносилась в новую строку на дефисе?

Какие сайты предлагают бесплатные, качественные шаблоны дизайна веб-сайтов?

Давайте составим список бесплатных качественных шаблонов дизайна веб-сайтов. Есть миллион таких сайтов, но большинство из них повторяющиеся и скучные.

Я начну с freeCSStemplates.org

Я также думаю, что другие сайты должны следовать каким-то стандартам, например, вот стандарты freeCSStemplates

• Выпущен для FREE по лицензии Creative Commons Attribution 2.5
• Очень легкий с точки зрения изображений
• Столы-бесплатно (т. е. они не используют таблицы для целей компоновки)
• Стандарты W3C уступчивые и действительные (XHTML строгое)
• Предоставлено с фотографиями общественного достояния, щедро предоставленными PDPhoto.org и Wikimedia Commons

Перенос списков в столбцы

Я использую ColdFusion для заполнения шаблона, который включает в себя HTML списков ( <ul>'s).

Большинство из них не так уж и длинны, но некоторые имеют смехотворно длинные длины и действительно могут стоять в колонках 2-3.

Есть ли HTML, ColdFusion или, возможно, JavaScript (у меня есть jQuery` в наличии) способ сделать это легко? Это не стоит какого-то сверхсложного тяжеловесного решения, чтобы сэкономить немного прокрутки.

Установка высоты div в HTML с CSS

Я пытаюсь разложить страницу в виде таблицы с двумя столбцами. Я хочу, чтобы самый правый столбец был закреплен справа от страницы, и этот столбец должен иметь отчетливый цвет фона. Содержимое в правой части почти всегда будет меньше, чем в левой. Я хотел бы, чтобы div справа всегда был достаточно высоким, чтобы достичь разделителя для ряда ниже него. Как я могу сделать так, чтобы цвет фона заполнял это пространство?

.rightfloat {

  color: red;

  background-color: #BBBBBB;

  float: right;

  width: 200px;

}



.left {

  font-size: 20pt;

}



.separator {

  clear: both;

  width: 100%;

  border-top: 1px solid black;

}

<div class="separator">

  <div class="rightfloat">

    Some really short content.

  </div>

  <div class="left"> 

    Some really really really really really really

    really really really really big content

  </div>

</div>

<div class="separator">

  <div class="rightfloat">

    Some more short content.

  </div>

  <div class="left"> 

    Some really really really really really really

    really really really really big content

  </div>

</div>

---

Edit: я согласен, что этот пример очень похож на таблицу, и фактическая таблица была бы прекрасным выбором. Но моя страница "real" в конечном итоге будет менее табличной, и я просто хотел бы сначала освоить эту задачу!

Кроме того, по какой-то причине, когда я создаю/редактирую свои сообщения в IE7, код правильно отображается в режиме предварительного просмотра, но когда я действительно отправляю сообщение, форматирование удаляется. Редактирование моего поста в Firefox 2, похоже, сработало, FWIW.

---

Еще одно изменение: Да, я не принял ответ GateKiller. Это действительно хорошо работает на моей простой странице, но не на моей реальной более тяжелой странице. Я изучу некоторые связи, на которые вы мне указали.

Как настроить переключатель CSS

Я работаю над сайтом, который будет переключаться на новый стиль на определенную дату. Сайт построен в семантических HTML и CSS, поэтому изменение должно просто потребовать изменения ссылки CSS. Я работаю с дизайнером, которому нужно будет видеть, как он выглядит, а также с клиентом, которому нужно будет просматривать обновления контента в текущем виде, а также прогресс дизайна в новом виде.

Я планирую использовать значение magic querystring и / или ссылку javascript в нижнем колонтитуле, которая записывает cookie для выбора новой страницы CSS. Мы работаем в ASP.NET 3.5. Есть рекомендации?

Я должен упомянуть, что мы используем условные комментарии IE для поддержки IE8, 7 и 6. Я могу создать функцию, которая выполняет замену:

<link href="Style/<% GetCssRoot() %>.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 8]>
    <link type="text/css" href="Style/<% GetCssRoot() %>-ie8.css" rel="stylesheet" />
<![endif]-->
<!--[if lte IE 7]>
    <link type="text/css" href="Style/<% GetCssRoot() %>-ie7.css" rel="stylesheet" />
<![endif]-->
<!--[if lte IE 6]>
    <link type="text/css" href="Style/<% GetCssRoot() %>-ie6.css" rel="stylesheet" />
<![endif]-->

Есть ли бизнес-причина для стремления к чистому макету CSS?

Кажется, что каждый раз, когда я пытаюсь создать чистый макет CSS, мне требуется гораздо больше времени, чем если бы я использовал таблицу или две. Получение трех столбцов одинаковой длины с разными объемами данных, по-видимому, требует особых причудливых хаков, особенно при решении проблем кросс-браузера.

мой вопрос:

Кому могут навредить эти несколько столов?

Таблицы, кажется, работают особенно хорошо на табличных данных — почему они так оскорбляются в этот день и возраст? Google.com имеет таблицу в своем исходном коде, так же как и многие другие сайты (stackoverflow.com, кстати, не имеет).

Как создать полностью совместимый с браузером висячий стиль отступа в CSS в промежутке

Единственное, что я нашел, было:;

.hang {
    text-indent: -3em;
    margin-left: 3em;
} 

Единственный способ для этого-поместить текст в абзац, который вызывает эти ужасно неприглядные дополнительные строки. Я бы предпочел просто иметь их в <span class="hang"></span> -м типе вещей.

Я также ищу способ дальнейшего отступа, чем просто одноуровневое подвешивание. Использование абзацев для укладки отступов не работает.

IE7: заголовок над меню

У меня возникли проблемы с IE7. У меня есть заголовок, который является IMG. Под ним у меня есть div, который представляет собой меню, они должны быть прикреплены друг к другу без пространства между ними. Оба имеют ширину 1000 пикселей. В Opera и FireFox заголовок и меню аккуратно прикреплены друг к другу. Однако в IE7 существует небольшое пространство между меню DIV и IMG. Я попытался явно определить заполнение и маржу на IMG, однако это не работает. У меня была эта проблема раньше, так что это, кажется, причуда IE7.

Мой Код HTML:

<div id="middle">

  <img id="ctl00_headerHolder_headerImage" src="pictures/headers/header_home.jpg" style="border-width:0px;" />



  <div id="ctl00_menuPanel" class="menu">

    <a id="ctl00_home" href="Default.aspx" style="color:#FFCC33;">Home</a> |

    <a id="ctl00_leden" href="Leden.aspx">Leden</a> |

    <a id="ctl00_agenda" href="Agenda.aspx">Agenda</a> |

    <a id="ctl00_fotos" href="Fotos.aspx">Foto's</a> |

    <a id="ctl00_geschiedenis" href="Geschiedenis.aspx">Geschiedenis</a> |

    <a id="ctl00_gastenboek" href="Gastenboek.aspx">Gastenboek</a>

  </div>

</div>

IE7 HTML/CSS margin-нижняя ошибка

Вот такой сценарий:

У меня есть таблица с краем-дном 19px. Ниже у меня есть форма, которая содержит некоторые наборы полей. Один из них плывет прямо. Проблема в том, что маржинальное дно не получает полный 19px в IE7. Я прошел через все ошибки IE7 css/margin/float, которые я могу придумать, и попытался исправить их, но безуспешно. Я уже некоторое время гуглил и не могу найти ничего, что могло бы помочь.

Вот что я попробовал сделать.

1. Обертывание формы или набора полей в unstyled div. Никаких видимых изменений.
2. Nixing The margin-bottom on the table and instead wrapping that with a div and giving it a padding-bottom of 19px. Никаких видимых изменений.
3. Никсирование нижнего края таблицы и добавление div с фиксированной высотой 19px. Никаких видимых изменений.
4. Ставим клир между столом и полевым набором.

Я знаю, что есть еще некоторые вещи, которые я забываю, но это те вещи, которые я недавно опробовал. Это происходит с каждым набором полей.

---

Я использую таблицу стилей сброса и имею xhtml переходный doctype.

Edit: у меня также есть панель инструментов IE7 web developer и Firebug. Информация о стиле для обоих браузеров говорит, что у него есть нижний край: 19px; но это явно не для IE7.

CSS Выпадающем Меню - "Best"? Самый многофункциональный?

Я нахожусь в неудачном положении, когда мне приходится реализовывать выпадающее каскадное меню на сайте, который я создаю. Я ищу решение в стиле Suckerfish, которое в основном основано на CSS и работает на простом наборе вложенных ULs и LIs.

Son of Suckerfish кажется, что это путь, но мне не нравится, как он просто исчезает в ту же секунду, когда вы убираете мышь, так как пользователи с трудностями координации будут иметь кошмар навигации по сайту (или просто не беспокоить, но поскольку это корпоративный сайт, есть некоторые, кто, вероятно, придется использовать все, что я реализую).

Аккуратные функции, о которых я даже не думал, приветствуются, но два основных элемента, которые я ищу, - это:

1. Многоуровневое использование вложенной структуры UL / LI
2. Маленький (возможно, настраиваемый?) задержка перед исчезновением, когда меню "mouseout"-ed, даже если это предусмотрено некоторым дополнительным JavaScript.

Шрифты в Интернете

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

Обратите внимание, что ответственный веб-разработчик не использует шрифты, доступные только на Windows (и особенно те, которые доступны только на Vista), а также не использует технологию, которая не поддерживается по крайней мере большинством браузеров.

---

Обновление: как уже отмечали несколько человек, нет ничего плохого в том, чтобы предоставить список резервных шрифтов для людей, у которых нет конкретного шрифта, который вы используете. Я действительно всегда так делаю, и не хотел сказать, что это неправильно.

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

Существуют ли какие-либо инструменты для объединения CSS?

У меня есть пара файлов CSS с перекрывающимися селекторами CSS, которые я хотел бы программно объединить (например, не просто добавить один файл в конец другого). Есть ли какой-нибудь инструмент, чтобы сделать это онлайн? или, возможно, расширение Firefox?

Инструмент для создания скелета CSS?

Мой HTML весь помечен, готов к дождю CSS. Проблема в том, что я должен вернуться и узнать, что все мои id и имена классов, чтобы я мог начать работу. Мне нужен инструмент, который анализирует мой HTML и выплевывает таблицу стилей со всеми возможными элементами, готовыми к стилю (возможно, даже с некоторыми значениями по умолчанию). Существует ли такой инструмент?

iFrame Лучшие Практики

У меня есть большой, hi-def JavaScript-интенсивный графический баннер для сайта, который я разрабатываю. Каково мнение каждого об использовании iframes, чтобы вы взяли на себя время загрузки только один раз? Есть ли CSS альтернатива iframe?

Не стесняйтесь просматривать сайт .

Это очень большая незавершенная работа.

Лучший способ проверить наличие поддержки -moz-border-radius

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

Я думал, что попытаюсь сделать это с помощью javascript, а не CSS, чтобы свести запросы к файлам изображений к минимуму (да, я знаю, что можно объединить все необходимые закругленные угловые формы в одно изображение), и я также хотел иметь возможность изменять цвет фона практически на лету.

Я уже использую jQuery, поэтому я посмотрел на отличный плагин с закругленными углами , и он работал как шарм в каждом браузере, который я пробовал. Будучи разработчиком, однако, я заметил возможность сделать его немного более эффективным. Скрипт уже содержит код для определения того, поддерживает ли текущий браузер webkit скругленных угла (браузеры на основе safari). Если это так, то он использует raw CSS вместо создания слоев divs.

Я подумал, что было бы здорово, если бы такая же проверка могла быть выполнена, чтобы увидеть, поддерживает ли браузер специфические для гекконов свойства -moz-border-radius-* и если да, то использовать их.

Проверка поддержки webkit выглядит следующим образом:

var webkitAvailable = false;  
try {  
    webkitAvailable = (document.defaultView.getComputedStyle(this[0], null)['-webkit-border-radius'] != undefined);
} 
catch(err) {}

Это, однако, не сработало для -moz-border-radius , поэтому я начал проверять альтернативы.

Моим запасным решением, конечно,является использование обнаружения браузера, но это далеко не рекомендуемая практика.

Мое лучшее решение пока заключается в следующем.

var mozborderAvailable = false;
try {
    var o = jQuery('<div>').css('-moz-border-radius', '1px');
    mozborderAvailable = $(o).css('-moz-border-radius-topleft') == '1px';
    o = null;
} catch(err) {}

Он основан на теории, что геккон "expands" композит -moz-border-radius к четырем под-свойствам

• -moz-border-radius-topleft
• -moz-border-radius-topright
• -moz-border-radius-bottomleft
• -moz-border-radius-bottomright

Есть ли какой-нибудь javascript/CSS гуру, у которого есть лучшее решение?

(Запрос функции для этой страницы находится на http://plugins.jquery.com/node/3619 )

Можно ли установить или где находится корень локального документа?

При открытии файла с жесткого диска в браузере, где находится корень документа? Чтобы проиллюстрировать, учитывая следующий код HTML, если страница открыта с локального компьютера (file:///) , то где должен быть файл css для браузера, чтобы найти его?

<link href="/temp/test.css" rel="stylesheet" type="text/css" />

Лучший способ исправить выпадающее меню CSS/JS в IE7, когда страница включает карту Google

У меня есть страница, использующая списки <ul> для навигации (Javascript изменяет стиль для отображения или нет при наведении курсора мыши).

Это работает нормально для меня, за исключением IE6 и IE7, когда у меня есть карта Google на странице.

В этом случае выпадающий список просто не работает. Однако страница продолжает работать в FireFox 2.

Я провел небольшое исследование и обнаружил, что это может быть примером ошибки IE Select Box , но я не уверен, поскольку карта Google, похоже, использует <div>, а не <iframe> .

Кто-нибудь еще сталкивался с проблемой, подобной этой, и если да, то есть ли у них какие-либо рекомендации по наилучшему способу преодоления этой проблемы?

Каков наилучший способ перейти от макета Photoshop к семантическим HTML и CSS?

Я обычно использую ручной процесс:

1. Посмотрите на страницу, определите семантические элементы и постройте HTML
2. Нарежьте изображения, которые мне понадобятся
3. Начните писать CSS
4. Настройка и повторите различные шаги по мере необходимости

Есть лучший подход, или инструмент?

Лучший способ проверить наличие поддержки -moz-border-radius

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

Я думал, что попытаюсь сделать это с помощью javascript, а не CSS, чтобы свести запросы к файлам изображений к минимуму (да, я знаю, что можно объединить все необходимые закругленные угловые формы в одно изображение), и я также хотел иметь возможность изменять цвет фона практически на лету.

Я уже использую jQuery, поэтому я посмотрел на отличный плагин с закругленными углами , и он работал как шарм в каждом браузере, который я пробовал. Будучи разработчиком, однако, я заметил возможность сделать его немного более эффективным. Скрипт уже содержит код для определения того, поддерживает ли текущий браузер webkit скругленных угла (браузеры на основе safari). Если это так, то он использует raw CSS вместо создания слоев divs.

Я подумал, что было бы здорово, если бы такая же проверка могла быть выполнена, чтобы увидеть, поддерживает ли браузер специфические для гекконов свойства -moz-border-radius-* и если да, то использовать их.

Проверка поддержки webkit выглядит следующим образом:

var webkitAvailable = false;  
try {  
    webkitAvailable = (document.defaultView.getComputedStyle(this[0], null)['-webkit-border-radius'] != undefined);
} 
catch(err) {}

Это, однако, не сработало для -moz-border-radius , поэтому я начал проверять альтернативы.

Моим запасным решением, конечно,является использование обнаружения браузера, но это далеко не рекомендуемая практика.

Мое лучшее решение пока заключается в следующем.

var mozborderAvailable = false;
try {
    var o = jQuery('<div>').css('-moz-border-radius', '1px');
    mozborderAvailable = $(o).css('-moz-border-radius-topleft') == '1px';
    o = null;
} catch(err) {}

Он основан на теории, что геккон "expands" композит -moz-border-radius к четырем под-свойствам

• -moz-border-radius-topleft
• -moz-border-radius-topright
• -moz-border-radius-bottomleft
• -moz-border-radius-bottomright

Есть ли какой-нибудь javascript/CSS гуру, у которого есть лучшее решение?

(Запрос функции для этой страницы находится на http://plugins.jquery.com/node/3619 )

YUI сброс CSS делает это не работает

Эта строка в сбросе YUI CSS вызывает у меня проблемы:

address,caption,cite,code,dfn,em,strong,th,var {
    font-style: normal;
    font-weight: normal;
}

Это делает мой em не курсивным и мой strong не жирным шрифтом. И это нормально. Я знаю, как переопределить это в моей собственной таблице стилей.

strong, b 
{
  font-weight: bold;
}

em, i 
{
  font-style: italic;
}

Проблема возникает, когда у меня есть текст, который является одновременно em и strong .

<strong>This is bold, <em>and this is italic, but not bold</em></strong>

Мое правило для strong делает его смелым, но правило YUI для em снова делает его нормальным. Как мне это исправить?

Ячейки таблицы больше, чем они должны быть

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

Я сделал последнюю версию живой , так что вы можете точно увидеть, где находится проблема и источник. Проблема в том, что линия между верхними 2 плитками и нижними 2 плитками, я не могу понять, почему она ушла так, и любая помощь была бы оценена.

В источнике есть маркер под названием "stackoverflow", если вы ищете "stackoverflow" при просмотре источника, то он должен привести вас к рассматриваемой таблице.

Я также загрузил изображение этого вопроса .

Бесплатные темы ASP.Net и / или CSS

Где я могу получить некоторые прилично выглядящие бесплатные темы ASP.Net или CSS?

Высота пролета в Firefox

Используя CSS, я пытаюсь указать высоту тега SPAN в Firefox, но он просто не принимает его (IE делает это, как ни странно).

Firefox принимает высоту, если я использую DIV, но проблема с использованием DIV-это раздражающий разрыв строки после него, который я не могу иметь в данном конкретном случае.

Я попробовал установить атрибут стиля CSS из:

display: inline

для DIV, но Firefox, похоже, все равно возвращается к поведению SPAN и снова игнорирует атрибут height.

100% минимальная высота CSS макет

Как лучше всего сделать элемент минимальной высоты 100% в широком диапазоне браузеров ? В частности, если у вас есть макет с верхним и нижним колонтитулами фиксированной высоты, как сделать так, чтобы средняя часть содержимого заполняла 100% пространства между ними с нижним колонтитулом, закрепленным в нижней части ?

Абстрагирование от CSS

Позвольте мне кое-что совершенно понятно.

Ненавижу . CSS.

Это нескончаемый кошмар. Каждое незначительное изменение макета кажется взломом. Решения проблем, кажется, часто включают в себя дрожание чисел вокруг, как какой-то шеф-повар пытается решить, сколько именно мускатного ореха положить в его знаменитый рисовый пудинг. Затем возникает проблема с несколькими браузерами, проблемы с несколькими разрешениями.. ..

короче говоря, это боль. Питу, если хотите.

Многие фреймворки стремятся абстрагироваться от HTML (пользовательские теги, компонентная система JSFs), чтобы облегчить работу с этим конкретным чайником рыбы.

Есть ли что-нибудь, что вы, ребята, использовали, что имеет аналогичную концепцию применительно к CSS? Что-то, что делает кучу кросс-браузерной магии для вас, поддерживает такие переменные (почему мне нужно вводить #3c5c8d каждый раз, когда я хочу этот цвет), поддерживает вычисляемые поля (которые являются 'compiled' в CSS и JS) и т. д.

В качестве альтернативы, я даже думаю об этом правильно? Я пытаюсь протолкнуть очень квадратный блок через очень круглое отверстие?

Каков ваш лучший инструмент или методы для получения одного и того же дисплея на IE6/7 и Firefox?

Я не говорю об инструментах, которые позволяют просматривать страницу в комбинациях операционных систем и браузеров, таких как crossbrowsertesting.com, но при создании или выяснении фактического CSS.

должны ли веб-сайты расширяться при изменении размера окна?

Я задаю этот вопрос исключительно с точки зрения удобства использования: должен ли веб-сайт расширяться/растягиваться, чтобы заполнить область просмотра при изменении размера окна браузера?

Я точно знаю, что есть очевидные минусы:

• Широкие столбцы текста трудно читать
• Написание html/css с использованием процентов может быть болью
• Это делает вас уязвимым к тому, чтобы ваш дизайн растягивался за его пределы, если изображение слишком широкое, или добавляется блок текста, который слишком длинный. (смотрите, это боль, чтобы кодировать html/css)

Единственное, о чем я могу думать, это то, что пользователям, которые используют изменение размера шрифта, встроенное в их браузер, не придется иметь дело со столбцами длиной всего в несколько слов, с телом whitespace с обеих сторон. Тем не менее, я думаю, что это может быть проблемой браузера больше, чем что-либо еще (Firefox 3 позволяет вам масштабировать все , а не только текст, который все время пригодится)

edit: я заметил, что переполнение стека имеет фиксированную ширину, но кодирование ужаса изменяет размер. Похоже, у Джеффа нет сильного предпочтения в любом случае.

Есть ли библиотека для рендеринга основных блок-схем в Javascript/CSS?

На веб-странице Я хочу динамически отображать очень простые блок-схемы, т. е. несколько ящиков, соединенных линиями. В идеале пользователь может нажать на один из этих ящиков ( DIVs ?) и быть перенесенным на другую страницу. Обращение к Flash кажется излишним. Кто-нибудь знает о какой-либо стороне клиента (т. е. server agnostic ) Javascript или CSS library/technique , которые могут помочь достичь этого?

Есть ли простой способ сделать html textarea и тип ввода текста одинаково широкими?

Есть ли простой способ получить HTML textarea и входной тип="text" для рендеринга с (приблизительно) равной шириной (в пикселях), который работает в разных браузерах?

Решение CSS/HTML было бы блестящим. Я бы предпочел не использовать Javascript.

Спасибо /Erik

HTML выберите тег с черным фоном-выпадающий треугольник невидим в Firefox 3

У меня есть следующие HTML (обратите внимание, что CSS делает фон черным, а текст белым)

<html>
  <select id="opts" style="background-color: black; color: white;">
    <option>first</option>
    <option>second</option>
  </select> 
</html>

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

Другие браузеры в основном игнорируют CSS, поэтому они тоже хороши.

Firefox 3 однако применяет цвет фона, но оставляет треугольник черным, поэтому вы не можете его видеть, как это

Я не могу понять, как это исправить - кто-нибудь может помочь? Есть ли здесь -moz-select-triangle-color или что-то непонятное вроде этого?

Вёрстка. Как реализовать border внутри блока, а не на его границе? Пример в описании

Хочу избавиться от фона-картинки, градиент сделаю через box-shadow в css, но как сделать пунктирную линию?


Нужно обойтись одним тегом, чтобы потом это скормить jqueryui.com/demos/button/
Есть идеи?

Есть ли хорошие и полные руководства по HTML5 и CSS3 на русском языке?

Если уж мало или нет, но известны намного превосходящие по качеству английские — было бы хорошо и про них узнать. Требование одно: материал должен посвятить человека во все актуальные аспекты HTML5 и CSS3 «с ноля».

Как сверстать HTML таблицу из 3D-кирпичей?

Верстаю диаграмму про сервисно-ориентированную архитектуру:



Но хочется-то такую:



Подскажите, пожалуйста, как. Может, можно как-то применить box-shadow из CSS3? Или может кто-нибудь видел и подскажет ссылку, где уже успешно свёрстано, а я дальше разберусь и скопирую.

Opera 10.61 (Linux), jQuery и стилизованный файл-инпут [Решено]

CSS:
.button {
width: 193px; /* размеры кноки */
height: 62px;
margin: 14px 0px;
background: url(img/0309input.jpg);
overflow: hidden; /* поможет избежать выхода поля за границы кнопки */
position: relative; /* относительно этого блока будем позиционировать поле */
}
.button input {
height: 200px;
position: absolute; /* для более простого позиционирования поля */
top: 0; /* начальные координаты */
right: 0;
opacity: 0; /* само поле делаем прозрачным, чтобы показать фон кнопки */
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
cursor: pointer;
font-size: 200px;
z-index: 5;
}
#filename {
z-index: 3;
position: absolute;
top: 6px;
left: 6px;
width: 184px;
height: 19px;
overflow: hidden;
}


HTML:
Загрузить новое:
<div class="button">
<div id="filename"></div>
<input id="photo" type="file" name="photo" value=""/>
</div>


jQuery:
$(document).ready(function(){
$("#photo").change(function() {
$("#filename").text($("#photo").val());
});
});


Ubuntu 10.04

Результат в Opera 10.61



Результат в Chrome



Результат в Firefox



Собственно вопрос: ЧЯДНТ & WTF?

Что это еще за C:\fakepath и откуда он берется? При этом обычные, не стилизованные, файл-инпуты в Опере отображают правильный полный путь от корня…

UPD:
Только что проверила на компах с Win7, WinXP — то же самое.

UPD 2:
Сделала так:
function str_replace(search, replace, subject) {
return subject.split(search).join(replace);
}

$("#photo").change(function() {
var newpath = str_replace(«C:\\fakepath\\», "", $("#photo").val());
$("#filename").text(newpath);
});

Работает.
Однако шокирована наличием такой «секьюрити-приблуды», или же такого «средства совместимости», неважно. Я уже и не помню, на каком количестве сайтов использовала этот способ стилизации инпута… это теперь на них везде fakepath? Мда…

Как заставить webkit не переносить текст в select'е на вторую строку, а просто скрывать его?

Safari 5.0, Chrome 5.0.375.127

Кастомные выпадающие списки (select box) в Chrome и Opera

Моя задача — сделать кастомные селекты для сайта. Решение должно быть максимаьно универсальным, так как движек довольно громоздкий (moodle), и проверить работоспособность решения на всех возможных страницах проекта просто нереально. Большинство готовых решений сильно меняют изначальную верстку элемента и в большинстве своем подходят только для одного селекта на странице, а в moodle их может быть до 5.
Сходу написал такой вариант:

//jquery
$("select").wrap('<span class="sel_wrap"></span>').wrap('<span class="sel_wrap_inner"></span>');

/*Стили*/
.sel_wrap {
    background: url(images/bg_buttonwrap.png) left top no-repeat;
    height: 24px;
    display: inline-block;
    overflow: hidden;
}
.sel_wrap_inner {
    background: url(images/bg_button_drop.png) right top no-repeat;
    display: inline-block;
    height: 24px;
    overflow: hidden;
}
select {
    background: none;
    border: none;
    margin: 3px -24px 0 5px;
}

В итоге вышло вот что:

Мне даже понравилось, правда сам выпадающий список налезает частично на фон, но это не существенно в данном случае. Но такое отображение было только в fierfox и ie. В хроме и опере показывает так:

Вот этот белый фон убрать не могу никак. Есть идеи?

Отступ <textarea> в WebKit при Strict?

Непонятным образом ведут себя браузеры на движке WebKit (проверено в Chrome и Safari), при доктайпе Strict под тегом texarea появляется отступ в 5 пикселей. При доктайпе Transitional во всех браузерах отступа нет.


Подскажите, пожалуйста, как исправить это поведение?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
form, textarea, div {
	padding:0;
	margin:0;
}
-->
</style>
</head>

<body>
<form action="" method="get">
	<div style="background:#F00">
		<textarea name="textarea" cols="40" rows="5"></textarea>
	</div>
</form>
</body>
</html>

Как заставить webkit не переносить текст в select'е на вторую строку, а просто скрывать его?

Safari 5.0, Chrome 5.0.375.127

Кастомные выпадающие списки (select box) в Chrome и Opera

Моя задача — сделать кастомные селекты для сайта. Решение должно быть максимаьно универсальным, так как движек довольно громоздкий (moodle), и проверить работоспособность решения на всех возможных страницах проекта просто нереально. Большинство готовых решений сильно меняют изначальную верстку элемента и в большинстве своем подходят только для одного селекта на странице, а в moodle их может быть до 5.
Сходу написал такой вариант:

//jquery
$("select").wrap('<span class="sel_wrap"></span>').wrap('<span class="sel_wrap_inner"></span>');

/*Стили*/
.sel_wrap {
    background: url(images/bg_buttonwrap.png) left top no-repeat;
    height: 24px;
    display: inline-block;
    overflow: hidden;
}
.sel_wrap_inner {
    background: url(images/bg_button_drop.png) right top no-repeat;
    display: inline-block;
    height: 24px;
    overflow: hidden;
}
select {
    background: none;
    border: none;
    margin: 3px -24px 0 5px;
}

В итоге вышло вот что:

Мне даже понравилось, правда сам выпадающий список налезает частично на фон, но это не существенно в данном случае. Но такое отображение было только в fierfox и ie. В хроме и опере показывает так:

Вот этот белый фон убрать не могу никак. Есть идеи?

Отступ <textarea> в WebKit при Strict?

Непонятным образом ведут себя браузеры на движке WebKit (проверено в Chrome и Safari), при доктайпе Strict под тегом texarea появляется отступ в 5 пикселей. При доктайпе Transitional во всех браузерах отступа нет.


Подскажите, пожалуйста, как исправить это поведение?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
form, textarea, div {
	padding:0;
	margin:0;
}
-->
</style>
</head>

<body>
<form action="" method="get">
	<div style="background:#F00">
		<textarea name="textarea" cols="40" rows="5"></textarea>
	</div>
</form>
</body>
</html>

Выравнивание символа * в строке

Как видно, * располагается «прижатым к верху» в строке. Например 2*2.

Как можно изящно и незатейливо сделать * по середине строки по вертикали тем же шрифтом чтобы работало в списках, абзацах и т.п.?

Версия для печати?

Как убрать служебные пометки со страницы при печати? Дату, заголовок html-страницы, адрес страницы, номер страницы. И чтобы это работало в IE6+.

Индексируется ли поисковиками свойство CSS — content?

Собственно, всё в заголовке.

jQuery — выбрать элементы только с определенным набором классов

Возможно глупый вопрос, но я что-то не могу разобраться.
Есть 3 блока с классом .one и один блок с классом .one и .two

Как мне в jQuery выбрать только элемент у которого есть оба класса .one и .two?

CSS font-size для свойства text-overlflow?

Попробовал верстать под мобильные устройства, нужно чтобы слово, не помещающееся по ширине блока, не переносилось, а подгонялось по ширине(уменьшался размер шрифта). Может есть какие-то хитрости?

Баг вебкита при отрисовке бордеров?

Здравствуйте, никто не находил решения проблемы с неправильным накладыванием бордеров друг на друга в вебките?

То, о чем я говорю очень хорошо проявляется на полупрозрачных бордерах и показано на скриншоте.



Т.е. вебкит не совмещает граничащие бордеры, как все остальные браузеры, а накладывает их — один на другой.

Я перепробовал все доктайпы, перерыл весь гугл, как мне кажется, но ничего толкового не нашел. Надеюсь на коллективный хабраразум.

С чего начать изучение вёрстки?

В связи с изучением Python появилась потребность в изучении HTML/CSS. С чего начать, если есть только самые базовые знания? Интересуют книги, статьи, что угодно.

Можно ли самостоятельно обновлять версию Android OS?

Допустим, я купил телефон с некоторой версией Андроида. Могу ли я самостоятельно обновить ее до более новой? Или необходимо ждать, пока (если) производитель выпустит новую прошивку.
По топикам здесь сложилось впечатление, что самому не обновить, но хочу удостовериться.

Сглаживание шрифтов с помощью css?

Можно ли как-то сглаживание шрифтов сделать на сайте средствами css, например? Или ещё чем-то?

Как сделать, чтобы ширина div зависела от содержимого?

Пробовал float: left, но в данном случае это работает только в IE и Opera.

Как есть


Как хотелось бы — работает в IE и Opera с float: left


При размещении изображений если оно не помещается, то переносится на следующую строку, при этом в том месте, где изображение не поместилось образовывается пустота, блок остаётся растянутым на всю ширину.

Растягивание контейнера двумя блоками с float: left

Возникла интересная задача — необходимо сверстать блок с нефиксированной шириной (popup), включающий два других блока с всё той же неизвестной шириной, таким образом, чтобы внутренние блоки выстраивались друг рядом с другом в линеечку и растягивали основной блок. Проблема вот в чём: если указать обоим внутренним блокам float: left, то они выстроятся друг под другом. Собственно никакие числовые параметры всех трёх блоков неизвестны — поэтому как-то указать ширину у чего-либо невозможно.

Вот простейший пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

<head>

  <style type="text/css">

    div.popup {

      position: absolute;

    }



    div.popup > div {

      float: left;

      white-space: pre;

    }

    </style>

</head>

<body>

  ...

  <div class="popup">

    <div>Какое-то неизвестное содержимое</div>

    <div>Ещё какое-то неизвестное содержимое</div>

  </div>

  ...

</body>

</html>

В результате получим одну строчку под другой, а необходимо, чтобы они были в одну линию друг рядом с другом.

Изменение стиля при помощи javascript

Кто может подсказать как решить задачку

есть 5 блоков div у каждого свой id и стиль b-img

<div id="1" class="b-img" onclick="kodimg(id)">...</div>
<div id="2" class="b-img" onclick="kodimg(id)">...</div>
<div id="3" class="b-img" onclick="kodimg(id)">...</div>
<div id="4" class="b-img" onclick="kodimg(id)">...</div>
<div id="5" class="b-img" onclick="kodimg(id)">...</div>

при клике по нему ява скрипт меняет ему стиль на v-img

вот такой функцией

function kodimg(id)
{
 document.getElementById(id).className = 'v-img';
}

проблема в том, что у предыдущего нажатого div стиль остается v-img, а нужно чтоб он снова стал b-img

Как такое можно сделать?

Как растянуть изображение на канве *без* сглаживания (в webkit)

Надо увеличить изображение в 2, 3, 4 и т.д. раз, причём, чтоб сохранялась пикселизация.

Что пробовал:
1) через css увеличить размер канвы. +) быстро -) есть сглаживание
2) mozImageSmoothingEnabled=false; drawImage(...). +) бысто, без сглаживания -) gecko only
3) getImageData/putImageData и увеличение руками. +) без сглаживания -) очевидно, медленней чем нативные методы.

Использую способ №3, в моём случае (раз-loop-ленные циклы, update по регионам) работает мгновенно.
Но!

В последнее время много говорят о смерти флеша и о безоговорочной победе html5. Так вот, во flash можно выключить сглаживание, а как же великий и могучий html5? Неужели в этом гиганте, убивающем флэш наповал, нельзя сделать такой вот примитив (т.е. чтоб кроссбраузерно)?

p.s. в некоторых местах забыл расставить тэги sarcasm.

Как редактировать CSS в google calendar?

Господа и возможно дамы. Поставил на сайт календарь от гугл, пытаюсь причесать его красоту с помощью CSS. Но любые стили он игнорирует. Не помогают даже !important.

Каким образом изменить стиль? Возможно как то отключить его родные стили?

Есть ли способ заставить IE7 правильно расчитать ширину блока внутри абсолютно позиционированного контейнера?

Описание проблемы с тестами: brunildo.org/test/iew_shrink_lay.html
Я кроме использования expression ничего не могу придумать:
.child { width: expression(runtimeStyle.width = parentNode.offsetWidth + 'px') }

К кому из верстальщиков обратиться?

Не дают публиковать в вакансии (не более 1 в мес), пишу сюда:

Есть сайт Cottage.ru — www.cottage.ru

Cейчас нам фейслифтят логотип, а я немного набрасываю верстку в Photoshop'e (но я не специалист в этом)

Началось все с того, что мы решили открыть раздел «Строительство» который является очень важным и большим и никак не вписывается в сайт.

И я начал его рисовать, постепенно прийдя к тому, что нужна резиновая верстка и упрощение шапки

Но — я не спец в этом деле — не дизайнер и не веб-технолог.

Что нужно:

1) Резиновая верстка и инфо-дизайн раздела «Строительство»
(пример по ссылке — он еще не доработан, показано лишь направление движения)
http://www.cottage.ru/temp/cottage-stroitelstvo.png

2) Резиновая верстка и инфо-дизайн главной страницы Cottage.ru
(пример по ссылке — тоже не доработано, тоже — направление)
http://www.cottage.ru/temp/cottage-main.png

3) Верстку других страниц можно обсудить позже.

Единственное и обязательное требование — максимальное сохранение баннерных площадок портала.

Важно понимание и желание улучшить предложенные макеты и грамотно кроссбраузерно их сверстать.

Деньги и сроки обсуждаются.

Михаил Подрабинек
podrabinek@gmail.com

css и вертикальное выравнивание текста

собственно вопрос такой — верстаю меню, соответственно через ul и li. есть многострочные пункты, строки разделяются br'ами. проблема в том что высота пункта фиксированная, а текст допустим в 2 строки не по центру. порыскав в интернете нашел только про vertical-align и line-height, от первого эффекта ноль, второе не устроило. как сделать правильно?

Фоновое изображение для TR криво рендерится в Сафари?

Задал фон для строк таблицы таким образом:

table tr {<br/>
 background: url(derevo.png) bottom repeat-x;<br/>
}

Фаерфокс, Опера показывают нормально, фон у строки таблицы монолитен:



А Сафари c Хромом рендерят фон отдельно для каждой ячейки таблицы, отчего становятся видимыми стыки:



Видимо, это связано с ленью разработчиков движков — ведь ряды таблиц визуализируются редко и есть

соблазн уростить себе задачу, позаботившись лишь о рендеринге ячеек. Беглый поиск по гуглю показал, что проблема застарелая и широко известна, даже IE этим переболел или по крайней мере может выживать с небольшим и валидным костыльком.


Это можно забороть штатно или лучше поискать хитрые и кривые решения?

Как организовать у себя массовое скачивание файлов пользователями?

Господа, пожалуйста, помогите решить задачу.

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

Нужно организовать скачивание информации пользователями через интернет со следующими требованиями:

— информация — это видео/аудио/архивы размером от 1 до 8 Гб (в среднем — 2 Гб).

— одновременно её качать будут от 10 до 200 человек.

— сторонние файлообменники не подходят, т.к. каждому из скачивающих даётся уникальная ссылка после оплаты (связь с процессингом)

— достаточный уровень безопасности, чтобы информацию могли качать только купившие её люди.

— при этом обеспечить минимально возможные затраты.

Сам проект лежит на Amazon EC2.

Подойдёт ли этот сервис для данных целей? Или для этого нужен Amazon S3? Насколько мощных ресурсов потребует к примеру ситуация, когда одновременно качает 30 человек (в день 100 человек) файл размером 1 Гб.


Заранее благодарю за любую полезную помощь, советы и консультации по этой теме!

Что за означает иконка "замок" на хабре??

Вопрос про эту иконку —

Компьютерный стол с оптимизацией под "домашний pair programming". Ищется фото

Итак, исходные данные: максимально экономим место! Для чего ищется большой угловой стол. За которым можно свободно сидеть вдвоем и смотреть в здоровый экран плюс на несколько мелких (7-11").

По фотоссылке ниже был обнаружен довольно удачный стол (creative commons, между прочим), но вот проблема — в тех двух углах, которые в теории для него можно освободить, и которые уже промерены двумя креслами — предпочтительно как-то сэкономить этак с полметра по самой длинной стороне.



К сожалению, ни одной фотографии, на которой за угловым столом помещаются два человека — не стукаясь при этом креслами-локтями — найти не удалось.

Игры со Sketchup как-то не дают ощущения действительности. Разве что с картоном поэкспериментировать… :)

Идеи наподобие дополнительной откидной/выдвижной столешницы — отсмотрены, хороши, но — здесь малоприменимы. Хочется статический конфиг.

Как выдавать CSS стили пользователю?

Здравствуйте.
У меня большой проект.
Что лучше, сделать 20 CSS файлов которые будут грузится ТОЛЬКО там где надо или же 1 большой CSS который будет грузится везде

Ресайз панелей google docs

В интерфейсе google docs (в ff и google chrome) на экране навигации по документам, если увеличить левую панель, передвинув хэндлер (синий блок между панелью папок и документов) более чем на половину экрана — не удается восстановить прежние габариты панелей в состояние по-умолчанию.
Кто сталкивался или встречал решение?

Превьюшки в виде куска картинки

Есть ли программы, позволяющие в удобном виде сделать превьюшки для большого числа картинок?
Причем, важно, чтобы можно было в качестве «тумбы» вырезать часть изображения заданного размера, а не просто уменьшить оригинал.

что такое format=flowed и delsp=yes в заголовке Content-Type письма?

сабж

День радио

А знаете ли вы, что 16 ноября в Украине празднуется день работников радио, телевидения и связи?

Пользуясь случаем поздравляю их.

Патентные троли опять пугают

Оказывается запатентована модель объектно-реляционной базы данных.
www.opennet.ru/opennews/art.shtml?num=28639
Получается все кто юзает ОРБД должны $$$.

Как думаете кто победит троли или люди?

-webkit-transform не изменяет фактические размеры DOM-элемента

При повороте элемента на 90° с помощью -webkit-transform заметил такую аномалию, что фактические его размеры не изменяются и контейнер с нефиксированным размером никак не «реагирует».
Такой-вот код:
<style>
.c {
float: left;
overflow: visible;
background: blue;
}
.c div {
display: block;
background: #red;
-webkit-transform: rotate(-90deg);
}
</style>
<div class="c">
<div>12345</div>
</div>


генерирует следющий результат:


Можно ли как-то решить эту проблемму без жесткого указания размеров трансформируемого элемента?

Можно ли уже начинать использовать html5?

Очень понравился HTML5 Boilerplate и есть желание использовать его на практике. Поэтому сабж.

UPD. Можно и нужно :)

CSS хак, работающий в актуальных версиях Safari, причем только под Windows?

Приятного времени суток.

Столкнулся сo скверным поведением button в Safari под Windows.

(Проблемы с обнулением стилей по умолчанию, marging, padding etc.)

В резульате теряю нужный мне пиксель высоты.

Не то что бы это был конец света… но хочеться «что бы все».

Подскажите CSS хак, работающий в актуальных версиях Safari, причем только под Windows.

Какие "заготовки" вы используете при вёрстке нового проекта?

Надоело верстать с нуля, знаю что многие используют различные заготовки вроде oocss, html5 boilerplate, однако кроме этих двух я больше ничего не знаю.
Посмотрел oocss и понял что из его функционала ничего не нужно, а идея не так и интересна.
html5bloilerplate сломан, половина всего не работает, что-то работает не так, что-то даже в хроме не работает.
Может есть что-то ещё?

Border-radius + native gradients support in IE7, IE8?

Сейчас делаю сайт, на котором нужно реализовать динамическую настройку дизайна — в админке всякие колорпикеры и т.д. Дизайн использует скругленные углы и градиенты. Я реализовал все это дело с помощью CCS3 и PIE.htc для IE, ну а для старых версий Firefox и Opera просто используется стандартный скин построенный на картинках. И вот мне клиент запостил новый тикет — мол, при загрузке страницы (IE) вначале показывается стандартный скин (1-2 секунды) и потом загружается текущий скин.

У меня 2 варианта как с этим бороться:

1. Плохой. Показывать Loading… с оверлеем пока страница не прогрузится

2. Хороший. Реализовать градиенты через фильтры, который подгружаются сразу с CSS


filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#000000',endColorstr='#ffffff');

-ms-filter: «progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#000000', endColorstr='#ffffff')»;


НО! PIE теперь отказывается скруглять углы. DD_roundies скругляет но убивает бекграунд. Помогите плз!


Здесь можно постить ссылку на проект-сабж?

Возможно ли растягивать контейнер с абсолютно-позиционированными div'ами внутри по высоте на максимум средствами css?

Всем привет.
Есть некий html-шаблон с контейнером и абсолютно спозиционированными дивами в нем:
<html>
<body>
 <div id="container">
   <div id="first"></div>
   <div id="second"></div>
 </div>
</body>
</html>


div#first и div#second имеют position:absolute, с жестко указанными left и top. (ну например, top:2000px).
Возможно ли средствами css (не javscript'ом) растягивать контейнер на максимальную высоту?
Я понимаю, что div с position:absolute в теории должен быть невидимым для контейнера, и тем не менее, при описанной выше конструкции высота самой страницы растягивается, и появляется скроллбар.

И так, еще раз вкратце: возможно ли растянуть контейнер с абсолютно позиционированными дивами внутри на максимальную высоту (что бы в нем умещались все дивы) средствами css?

Возможно ли в код вставить символ 0x8 (backspace)?

Сегодня полдня потерял, выясняя ошибку, почему не работает правило в CSS-файле.

Оказалось, что перед этим правилом (через пару табов даже и переносов строк) находился невидимый (при отключённой опции «Показывать невидимые символы» редактора) символ backspace (ASCII 0x08).


Как вообще возможно в код вставить этот символ непреднамеренно?


У кого-нибудь бывали такие случаи?

Странный рендеринг шрифтов в IE9 beta

Попутно работая над своим проектом, столкнулся со странной «отрисовкой» шрифтов в Internet Explorer 9.

Тень пала именно на работу браузера, так в остальных интернет-обозревателях, будь то Хром, Опера, либо даже восьмой Интернет Эксплорер — все выглядит отлично. Вот, наглядно в сравнении:





Мало того, при детальном рассмотрении проблемы, оказалось, что IE9 beta вдобавок своевольно сжал шрифт по ширине.








Также видим, что и сам фильтр сглаживания стал работать несколько иначе, если сравнивать с предыдущими версиями браузера.

А теперь, собственно, к вопросу то :-)

Да, понятно, что это бета, есть шанс что все еще поправится-исправится, но мало ли.

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

И все-таки… Если кто-то уже сталкивался с подобной проблемой и, вдруг внезапно, знает ее решение — не поделитесь ответом?

_{И даже если знаете, что решения нет, то это тоже будет большой подмогой :-)}

Верстка: скролл-контент в резиновом блоке с width 100%?

Добрый день!


Необходимо сделать резиновый блок со скроллом так, чтобы при любом размере окна он по ширине был равен родительскому элементу и содержал больший по размеру контент. Просмотр этого контента — с помощью скролла.




Знаю, что можно повесить js-обработчик на onResize, но я думаю есть и css-путь…


Подскажите пожалуйста как можно так сделать?

Как выровнять td по центру в таблице

Имеется таблица в шапке сайта:

<code class="html">
    <table>
        <tr>
            <td></td>
            <td>Тра ля ля</td>
            <td></td>
        </tr>
    </table>
</code>

Таблица растянута на всю страницу.
Левая ячейка залита одним цветом, а правая другим (+ они резиновые).
Средняя имеет картинку где происходит визуальное соединение цветов и распологается надпись (ширина 960px).

Очень надо, чтобы средняя ячейка была в центре (независимо от тина браузера).

Css3 box-shadow?

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

Подключение CSS

Условие:

Задача:

Комментарий:

Проблема с font-weight у ссылки :visited

Проблема встречается в chrome и в новом FF 4 тоже

Код CSS:
a { font-weight:bold }
a:visited { font-weight:normal;}


Код HTML:
<a href="http://habrahabr.ru/post/222/">Ссылка</a>


В IE7, 8, FF3, Opera 11 посещенная ссылка перестает быть жирной.
В FF4 и Chrome font-weight:normal для посещенной ссылки не срабатывает, она так и остается жирной

Как же заставить её стать нормальной в этих браузерах и из-за чего вообще возникает такая проблема?
Никак не могу разобраться

Сертификация по фронт-энд технологиям?

Всем привет.


Есть возможность получить какие-то дипломы, аттестаты, сертификаты и прочие «корочки» по html\css\js\ проектированию интерфейсов и так далее?

В Украине ничего такого не видел.


Спасибо.

CSS: Вертикальное выравнивание текстов в двух последовательных DIV'ах по единому baseline

Возникла задача, которая медленно, но уверенно выносит мне мозг.

Сразу дам ссылку на пример в песочнице

Есть контейнер, в котором расположены 3 DIV'а (float: left/left/right), в которых находятся по несколько inline'овых элементов (span, label, select, a). Пока кегль шрифта у всех элементов одинаковый, они прекрасно позиционируются вертикально относительно друг друга. Но если где-нибудь увеличить кегль, то они начинают разваливаться вертикально, так как теряется общая baseline.


Всякие ухищрения с line-height, vertical align не дают ощутимого результата. Я вижу несколько решений, но ни одно из них не блещет красотой:
— абсолютное позиционирование по вертикали, — получается очень хрупкая конструкция, которая разваливается при изменнии любых шрифтовых параметров (кегль, гарнитура, ...), а так-же подвержена настройкам системы и браузера;
— подбор численных значений в vertical-align, — аналогичные проблеммы;
— отказ от 3-х DIV'ов внутри контейнера, — четко найдется baseline, но будут проблеммы с горизонтальным позиционированием блоков и расширяемостью (интерфейс предусматривает возможность скиннизации).

На повестке 2 вопроса:
1. Можно ли в данном случае, не меняя структуры, «подсказать» браузеру общий baseline для этих 3-х DIV'ов?
2. Как можно решить задачу с максимальной поддержкой семантичности и минимальными потерями дальнейшей расширяемости и кастомизации?

Верстка, position:relative создает пустое место

Код здесь
Вопрос в том, что под главным блоком (#page) почему-то остается много пустого места, кажется это из-за position:relative в левого меню.

Как с этим бороться?

Верстка ul/li в несколько колонок?

Здравствуйте!


Появилась задача — разбить большой (ок. 100 элементов) список ul/li на несколько колонок. Но задача этим не заканчивается…

Нужно сделать не так:

1 2 3

4 5 6

7 8 9

А так:

1 4 7

2 5 8

3 6 9


Гугл не выдает секретов реализации того, что мне нужно — только первый вариант…

Подскажите, пожалуйста, реализацию.