CSS "ИЕ vs ФФ"

Oscar · 13 дек 2005, 19:53

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>test</title>
<style type="text/css">

body {
	margin: 0;
	padding: 0;
	width: 100%;
	text-align: center;
}

.content {
	margin: 0;
	padding: 0;
	width: 100%;
	border: 1px solid #FF0000;
	text-align: center;
}

.box {
	margin: 0;
	padding: 0;
	width: 200px;
	border: 1px solid #000000;
	text-align: center;
}

</style>
</head>
<body>

<div class="content">

<div class="box">
this is a box
</div>

</div>

</body>
</html>

Код проходит через HTML и CSS валидаторы,
ИЕ показывает "box" по центру,
а вот ФФ - отказывается это делать!

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

Тэг

центрирует как надо, но по спецификации "HTML 4.01" его не существует (так же, как и атрибута <div align="center">, который, кстати, тоже не помогает) !

Может кто знает, как это по человечески делается?

Oscar · 13 дек 2005, 20:03

Код: Выделить всё

	margin-left: auto;
	margin-right: auto;

прощу прощения за панику ..

Oscar · 14 дек 2005, 00:17

Вопрос второй, теперь проблема с ИЕ ;-)

Код: Выделить всё

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>test</title>

<style type="text/css">

body {
	font-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

div.color {
	height: 200px;
	color: #000000;
	background-color: #FF0000;
	font-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

div.hr {
	height: 1px;
	color: #FFFFFF;
	background-color: #000000;
	font-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
}


</style>

</head>

<body>

<div class="color"></div>

<div class="hr"></div>

<div class="color"></div>

</body>

</html>

Что мне нужно ещё в ноль установить, чтобы ИЕ мне тоже рисовало линию в 1 пиксель, а не в два, как сейчас.

Oscar · 14 дек 2005, 00:48

не, ребят.
Ну это ж извращенство ! ...

Код: Выделить всё

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>test</title>
<style type="text/css">

body {
	margin: 0;
}

div.color {
	height: 200px;
	color: #000000;
	background-color: #0F0;
}

div.hr {
	border-top: 1px solid #FF0000;
}

</style>
</head>
<body>

<div class="color"></div>

<div class="hr"></div>

<div class="color"></div>

</body>
</html>

14 дек 2005, 01:32

Почему извращение-то? ИЕ тебе честно рисует верхнюю и нижнюю границу по 1-му пикселю, считая, что ты ошибся в размерах.
По-моему для этой цели удобнее применять <HR>

Oscar · 14 дек 2005, 02:01

AiK,
hr в ИЕ вообще делает отступы сверху и снизу пикселей в 10, которые я так и не смог убрать.

Проверь ;-)

Код: Выделить всё

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>test</title>

<style type="text/css">

body {
   font-size: 0;
   margin: 0;
   padding: 0;
   border: 0;
}

div {
   height: 200px;
   color: #000000;
   background-color: #FF0000;
   font-size: 0;
   margin: 0;
   padding: 0;
   border: 0;
}

hr {
   height: 1px;
   color: #000000;
   background-color: #000000;
   font-size: 0;
   margin: 0;
   padding: 0;
   border: 0;
}


</style>

</head>

<body>

<div></div>

<hr>

<div></div>

</body>

</html>

Oscar · 14 дек 2005, 02:40

Вопрос номер "следующий" (судя по выпитому пиву, последний на сегодня).

Код: Выделить всё

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>test</title>

<style type="text/css">

html, body {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

#content {
	width: 780px;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid #000000;
}

.left {
	width: 252px;
	margin-left: 0px;
	background-color: #FF0000;
}


.center {
	width: 252px;
	margin-left: 260px;
	background-color: #00FF00;
}

.right {
	width: 259px;
	margin-left: 521px;
	background-color: #0000FF;
}

</style>

</head>

<body>

<div id="content">

	<div class="left">left</div>

	<div class="center">center</div>

	<div class="right">right</div>

	<div class="left">left1</div>

	<div class="center">center1</div>

	<div class="left">left2</div>

	<div class="right">right2</div>

	<div class="left">left3</div>

</div>

</body>

</html>

Можно ли сделать так, чтобы элементы сдвигались по вертикали только лишь внутри своей группы (класса)?

Напомню, что position должно быть relative для того, чтобы элементы упорядочивались внутри элемента с id "content" ширина которого задана жёстко и который должен отображаться по горизонтали по середине страницы.

P.S. Создавать три колонки divами я не хочу.
Я хочу иметь возможность написать <div class="left"> и быть уверенным, что этот элемент добавится следующим в левую колонку
(почему? потому что у меня ещё будет колонка class="left+center" шириной в две колонки)

Главный вопрос: Возможно ли такое?