CSS для лисы/оперы и ... :madd: осла

12 3
malls
На сайте с 08.08.2005
Offline
255
1531

Нород кто может чем посочувствовать.

Есть задача сделать верстку не табличную, а на div+css

Проблема такая, согласно стандартам код вида:

DIV {

width: auto;

right: 10px;

left: 10px;

}

делает следующее: вычисляет ширину окна, делает отступы и растаскивает блок на оставшуюся ширину. Т.е. делает блок во всю ширину окна с отступами по 10px справа и слева.

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

Замена кода на:

DIV {

width: 100%;

right: 10px;

left: 10px;

}

решает проблему для осла, но делает блок шириной: 100%+20px в лисе и опере - т.е. как и должен теоретически.

Короче я понимаю что осел он осел и есть - но как с этим можно бороться кроме "подсовывания" разных таблиц стилей в зависимости от UA?

Т.е. хотелось бы как то выкрутиться - но не могу понять как.

ЗЫ: паддинги не рулят т.к. проблема состоит в демонстрации РАМКИ блока.

Lazy
На сайте с 11.11.2005
Offline
59
#1

Попробуйте поместить ваш div c бордюром, внутрь другого дива с width=100% (без бордюра и полей)

Лучшее - враг хорошего!
malls
На сайте с 08.08.2005
Offline
255
#2

Все топик можно закрыть - разобрался. Позиционированние поменял абсолютное на плавающее - пошло.

Lazy:
Попробуйте поместить ваш div c бордюром, внутрь другого дива с width=100% (без бордюра и полей)

Это не не катит... По указанной причине.

Но на мысль Вы меня натолкнули... Спасибо!

Kolyaj
На сайте с 28.03.2006
Offline
69
#3

malls, обычно в таких случаях используется expression для IE.

S
На сайте с 26.04.2006
Offline
86
#4

Работает нормально во всех браузерах

<style>

body{ padding:0px; margin:0px}

.ot{padding:0px 40px 0px 40px }

.te{width:100%; background-color:#009900; height:400px}

</style>

<div class="ot">

<div class= "te" >&nbsp;</div>

</div>

malls
На сайте с 08.08.2005
Offline
255
#5
Kolyaj:
malls, обычно в таких случаях используется expression для IE.

Уже говорилось - не хочу огород городить.

Strom:
Работает нормально во всех браузерах

тоже вариант...

a.fatman
На сайте с 15.01.2006
Offline
127
#6

Я долго пытался понять ваш CSS, но не смог.

Отвечая на поставленный вопрос. Для IE «подсовываются» другие таблицы стилей с помощью conditional comments.

R2
На сайте с 01.02.2007
Offline
28
#7

DIV {

width: auto;

right: 10px;

left: 10px;

#width: 100%;

}

?

Ткач
На сайте с 29.04.2007
Offline
95
#8
Raul21:
DIV {
width: auto;
right: 10px;
left: 10px;
#width: 100%;
}
?

это уже хак (трюк), использование их нежелательно

Тут дали два варианта, один с вложенным дивом в див с пэддингами, второй с условными комментариями

Разработка и создание сайтов. Красиво, функционально, недорого. (http://time-online.ru/) ICQ 388-474-890)
malls
На сайте с 08.08.2005
Offline
255
#9
Raul21:
DIV {
width: auto;
right: 10px;
left: 10px;
#width: 100%;
}
?

Зачет! +1

Изящное решение.

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

Согласен - но говоря по правде javascript expression и conditional comments тоже "от лукавого", т.к. работают только в одном осле и стандартам как бы не соответствуют... Т.е. в принципе из той же песни, т.к. де факто используют сверхстандартные возможности.

Вкладка дивов в принципе решает проблему, но признаемся - это путь "в Москву, через Магадан". Т.к. пускай и несильно - но все таки усложняет код как таковой, что тоже не вполне корректно...

А тут достаточно прикольно получается.

Kolyaj
На сайте с 28.03.2006
Offline
69
#10
malls:
Согласен - но говоря по правде javascript expression и conditional comments тоже "от лукавого", т.к. работают только в одном осле и стандартам как бы не соответствуют...

expression и conditional comments, скажем так, документированные возможности, что является гарантией того, что они будут работать в последующих версиях ИЕ. С хаками такой уверенности нет.

12 3

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий