Jump to content
  • 0

Отступ в IE 5.5/6.0


my-name-is-Max
 Share

Question

Всем привет!

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

<head>
...
</head>

<style type="text/css">
#left {
float: left;
width: 31%;
margin-left: 2%;
}
</style>

<body>
<div id="left">
...content...
</div>
</body>

</html>

Отступ в IE 5.5/6.0 от левого края в 2-3 раза больше, чем в остальных браузерах (включая IE 7/8). При отключении опции ?float: left? отсуп становится нормальным, но мне эта опция необходима (верстка трехколоночная, следующий div располагается следом за этим).

Заранее спасибо за помощь.

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

display: inline не помогает.

Да, кстати, отступ в IE ровно в 2 раза больше, чем в других браузерах.

Поэтому временный вариант я выбрал такой:

	*html #left {
margin-left: 1%;
}

Но это вариант ? кривой (чтобы успокоить дизайнера :o), на самом деле хотелось бы найти нормальное решение.

Link to comment
Share on other sites

  • 0

Проблема с отступом в IE отлично описана вот в этой статье http://www.artlebedev.ru/tools/technogrett...rgin_3px_in_ie/

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

Поэтому вместо

<div style="width: 31%; margin-left: 2%;">
...
</div>

надо писать например так

<div style="width: 31%;">
<div style="margin-left: 2%;">
...
</div>
</div>

Link to comment
Share on other sites

  • 0

ZooY, спасибо.

Проблема решена:

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

<head>
...
</head>

<style type="text/css">
#wrapper {
margin-left: 2%;
}

#left {
float: left;
width: 31%;
}
</style>

<body>
<div id="wrapper">
<div id="left">
...content...
</div>
</div>
</body>

</html>

Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy