Различные CSS для разных браузеров

[vilyaban]

1. Какие есть способы указывать различные CSS для разных браузеров?

Для IE - самый простой - условные комментарии

<!--[if IE]><link href='/styleie.css' rel='stylesheet' type='text/css'><![endif]-->
<![if !IE]><link href='/style.css' rel='stylesheet' type='text/css'><![endif]>

2. Проблема возникла с отображением списков <li> - в каждом из браузеров (Firefox, IE, Opera) отображается по разному.

 

[Eihwaz]

Допустим, ul у нас имеет класс "list".:

.list {
    width: 200px;
}
/* Для Firefox */
head:first-child+body .list{
    width: 180px;
}

---
Блин, я, кажется, два ваших вопроса воспринял как один.
Ну, вобщем: можно сделать отдельные css для IE и остальных браузеров. Т.е., две таблицы стилей.
Обычно делают именно так, и в той, что под все остальные браузеры пользуются хаками (вроде того, что я привел выше), чтобы получить одинаковую работу под всеми бразуерами.
А по поводу списков можно подробнее?
---
В css почему-то не отобразился комментарий: Первое правило — для всех, второе только для Firefox.

 

[vilyaban]

Я использую margin. Опера margin похоже не воспринимает.

.list {
	margin-left:25px;
}
.sublist {
	margin-left:40px;
}

и почему-то во всех браузерах отступы получаются разные.

я так понял этот хак для Firefox?

head:first-child+body

А только для оперы хаков нет?

 

[Eihwaz]

Странно, не помню, чтобы сталкивался с такой проблемой. Вы обнулили margin'ы в начале css?

я так понял этот хак для Firefox?

Да, что-то не отобразился комментарий, да, именно для него.

А только для оперы хаков нет?

В принципе, если совсем никак не обойтись, можно использовать отдельный css:

<link rel="stylesheet" href="style_opera.css" type="opera/css" media="screen" />

(обратите внимание на type)
Но представьте, как это все поддерживать неудобно будет...

 

[vilyaban]

Да, обнулил

body,table,td,th {
	padding: 0px;
	margin: 0px;
	border-collapse:collapse;
}

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

Добавлено через 18 минут
И еще:

в IE и Опере - текст, при переносе на следующую строку, начинается с маркера, а мне нужно, чтобы текст был на одном уровне. - понял из-за чего: я не использую UL

 

[whitewolff]

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

<style type="text/css">
ul{margin: 0; padding: 0; list-style: none;}
li{background: url('marker.jpg') no-repeat left top;}
</style>

 

[vilyaban]

условные комментарии возможны только для IE.

для остальных делаются пометки в CSS

 

[The Finn]

для остальных делаются пометки в CSS

Пометки в CSS могут делаться и для IE, для этого перед стилем ставиться *.
А также, чтобы добиться кроссбраузерности некоторых элементов стилей, в свойствах ставиться значение !important

 

[Eihwaz]

The Finn
Не совсем так:
* работает для IE 6 и более ранних версий.
!important тоже не делает элементы кроссбраузерными какой-то магической силой, используется лазейка: нормальные браузеры не позволяют переназначать свойство, если у него указано !important.
Т.е.,

#container {
    width: 980px !important;
    width: 960px;
}

При таком css нормальные браузеры отобразят #container, шириной в 980 пикселей. Говнобраузер (IE6 и ниже) отобразят его шириной в 960 пикселей.
Для IE7 это уже не работает.

 

[The Finn]

Eihwaz, собственно по поводу !important я и имел ввиду то, что вы сказали, только сформулировал не так, как надо. Для IE 7 в таком случае нужно использовать условные комментарии.