Conditional comments

для ИЕ так

<!--[if IE]>
здесь ссылка на ie.css
<![endif]-->

а как для лисы, оперы, или для ИЕ и лисы одновременно?

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

нормально я все делаю

задача такая, при наведении на ссылку должна появляться всплывающая подсказка, т.е. между тегами <a></a> есть невидимый span, который становится видимым при a:hover

а в опере это глючно работает, то неполность отобразится, то не в том месте

Харди, вероятне всего, прав: что-то не учтено.
Но если хочешь задать что-то сугубо для мозиллы и оперы, применяй

Код:

!important

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

или вечером пример выложу, вместе подумаем

Ты в принципе можешь раскидать стили по браузерам (каждому браузеру свой css файлик) но это геморой. Скорее всего ты что-то неправильно делаешь. Оперу вообще пидорасы делали. Твой случай как раз:
a span {display:none;}
a:hover span {display:block;}
И это не работает. В опере работает если дополнительно допишешь visiblity.

Ну если очень невмоготу то отдельно для оперы создай файлик, яваскриптом юзерагент выдерни:
document.write(navigator.userAgent);
Опера отдает строку что-то типа Opera/9.64 (Windows NT 5.1 бла-бла...
И уже потом для нее стили

if(window.opera) {
document.write('<link rel="stylesheet" type="text/css" href="для_оперы.css" />');
}

или если для определенной версии

if((detect.indexOf('Opera/нужная версия')) != -1) {
document.write('<link href="для_оперы.css" rel="stylesheet" type="text/css" />');
}

FXIX, я думал если на css легко получится, то можно, а яваскрипт нафиг

короче вот пример, может кто сделает, чтоб хотя б в мозилле и ИЕ правильно работало
http://www.porndiz.com/sample/

1. то что хотел получить ближе всего в ИЕ, но здесь глюк: при наведении на тумбу, блок тумб сдвигается влево на 1 пиксель, как выяснилось из-за "background: transparent", заданного для div.thumbs a:hover. Не нашел решения, кроме как не указывать для картинок "margin: 1px" (в этом случае не сдвигается)
2. в мозилле всплывающий блок всплывает не там где надо
не вверху а внизу, а в некоторых случаях (например первая тумба в 3 ряду) вообще где-то слева от блока тумб
3. в опере части всплывающего блока как бы обрезаются, отображается не там где надо, если пролистать вниз этот блок всплывающий вообще не работает

код css

Код:

div.thumbs {    width: 1000px;    padding: 2px 0 1px 0;    text-align: center;    } div.thumbs a {    background: #000000;    position: relative;    z-index: 0;    } div.thumbs a:hover {    background: transparent;    z-index: 50;    } div.thumbs a span {    visibility: hidden;    width: 230px;    height: 30px;    position: absolute;    top: -20px;    left: 0px;    padding: 5px;    color: #ffffff;    text-decoration: none;    background: #000000;    border: 1px solid #ffcc00;    } div.thumbs a:hover span {    visibility: visible;    cursor: hand;    } div.thumbs img {    width: 240px;    height: 180px;    margin: 1px;    border: 1px solid #ffffff;    background: #000000;    } div.thumbs a:hover img {    border: 1px solid #ffcc00;    }

Яваскрипта бояться не надо. Для оперы в принципе есть css-хаки, но кроме тебя (и кто будет после тебя) в хуйне такого вида:

Код:

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {   selector.class { property:value; } }

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

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

твой код

Код:

<a href="/"> <span>Text description </span> <img alt="" src="foto1.jpg"/> </a>

Код:

a { position:relative; z-index:0; } a span { height:30px; left:0; padding:5px; position:absolute; top:-20px; visibility:hidden; width:230px; } img { height:180px; margin:1px; width:240px; }

Дело в том что задав a {position:relative;} ты сделал из <a> стакан (не путать с граненым) относительно которого абсолютно затанцевал твой span {position:absolute;}. Затанцевал относительно левого верхнего угла тэга <a>. Но поскольку <a> у тебя строковый (и следовательно не имеет ни ширины ни высоты ни полей) то кривые браузеры начали его отображать как бог на душу послал. Вернее они то его как раз отображают правильно, а вот IE неправильно (но визуально как ты и хотел). Во-первых <a> делаем блоковым (в нем будет картинка. и твой ховер-блок всплывать), и зафлоачиваем его влево (float:left) (чтобы они были горизонтально).



Для span кстати можно не заморачиваться и задать ширину через (left:0; right:0) чтобы каждый раз ширину руками не менять (вдруг ширина тумб поменяется). Ну и семантики можно накатить, поскольку список тумб это список то

Код:

<ul> <li><a href="/"><span>Text description </span><img alt="" src="foto1.jpg"/></a></li> ... </ul>

Кстати с a {z-index:0;} я бы тоже резко не играл. Span у тебя итак выше всплывет, так как из потока вырван будет. z-индексы лишние в принципе. Просто часто вижу такие макеты где стопицот z-индексов нахуевертят разных и много, и потом сами же ищут где их блоки пропали, которые, как потом оказывается, всплывают за три пизды аж под фоном. Были случаи

FXIX: спасибо!

помню собирался с флоат:лефт попробывать, но чёто забыл )
твой вариант нормально в 3 браузерах работает, хотя в ИЕ ширина span через (left:0; right:0) не пашет (спан растягивается на всю ширину деска), но это пофиг, можно и фикс.ширину указать.

z-index я вообще первый раз использовал, т.к. без него мой вариант не работал

и ещё может подскажешь как очистить div.thumbs?
при использовании overflow: hidden, верхние всплывающие спаны (которые выходят за границы блока тумб) обрезаются

Ну для IE можно ширину указать, да.
div.thumbs себя правильно ведет при overflow:hidden;. Скрывает все что выходит за его границы. Просто добавь для него padding-top:20px, ну или на сколько там у тебя ховер-блок вверх вылазит.

При a {float:left;} в IE6 блоки поплывут лесенкой, для <img /> тоже float:left задай. (или наоборот если дочерние флоатишь то и родительские флоатить надо. для IE. не помню точно).