Re[4]: Padding-right не работает в Хроме - Веб программирование

Задаю динамически паддинги: левый и правый.
Левый работает, правый нет. В браузерах IE, FF, Opera работает ок.

Как можно обойти эту проблему ?
Помогите, кто в этом разбирался...

Здесь маленькая тестовая html страничка:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
background: none repeat scroll 0 0 transparent;
border: 0 none;
font-size: 100%;
margin: 0;
outline: 0 none;
padding: 0;
vertical-align: baseline;
}
</style>

<script type="text/javascript">
function ClickedMe() {
document.getElementById("ex2").style.paddingRight = "20px";
document.getElementById("ex2").style.paddingLeft = "20px";
//$("#ex2").css('padding-right', '10px');
//$("#ex2").css('padding-left', '10px');
}
</script>
<title></title>
</head>
<body>
<div class="container">
<div class="ex2" id="ex2" style="background-color: yellow;">
<div class="design_wpheader_preview" style="height: 50px; background-color: red;">
<div class="padfix">Header</div>
</div>
</div>
</div>

<div>
<input type="button" name="clickme" id="clickme" value="Click for make paddings: left and right!" onclick="ClickedMe()" />
</div>
</body>
</html>

Здравствуйте, sembel, Вы писали:

S>Здравствуйте, FishinG, Вы писали:

FG>>Задаю динамически паддинги: левый и правый.
FG>>Левый работает, правый нет. В браузерах IE, FF, Opera работает ок.

FG>>Как можно обойти эту проблему ?

S>наверное баг, можно диву design_wpheader_preview, дать marginLeft — marginRight

Нужно именно паддинг... Да, скорее всего баг... Я уже написал в саппорт гугл хрома, теперь жду когда меня пошлют за мою криворукость )

Здравствуйте, FishinG, Вы писали:

FG>Задаю динамически паддинги: левый и правый.
FG>Левый работает, правый нет. В браузерах IE, FF, Opera работает ок.

FG>Как можно обойти эту проблему ?
FG>Помогите, кто в этом разбирался...

FG>Здесь маленькая тестовая html страничка:

Ширина у контейнеров не задана. Без этого параметра, ширина берется у родителя. В данном случае у элемента html. Ширина автоматически высчитывается в пикселях и далее не меняется. Padding в ex2 задаётся, уменьшая width на 40px, а дочерний design_wpheader_preview выезжает на 20px вправо, закрывая правый padding.

<div class="ex2" id="ex2" style="background-color: yellow; width: 100%;">
<div class="design_wpheader_preview" style="height: 50px; background-color: red; width: 100%;">

Здравствуйте, Вадим Гусев, Вы писали:

ВГ> … ширина берется у родителя.

Поковырял немного код: похоже ширина берётся из window.innerWidth.

Здравствуйте, FishinG, Вы писали:

FG>Задаю динамически паддинги: левый и правый.
FG>Левый работает, правый нет. В браузерах IE, FF, Opera работает ок.

FG>Как можно обойти эту проблему ?
FG>Помогите, кто в этом разбирался...

Ну а зачем PADDING?
Можно через MARGIN дочернего.
И потом PADDING — это в основном для текста.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Динамический паддинг</title>
<style type="text/css">
/*<![CDATA[*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a,
abbr, acronym, address, big, cite, code, del,
dfn, em, font, img, ins, kbd, q, s, samp, small,
strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  background: none repeat scroll 0 0 transparent;
  border: 0 none;
  font-size: 100%;
  margin: 0;
  outline: 0 none;
  padding: 0;
  vertical-align: baseline;
}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
function ClickedMe() {
  with(document.getElementById("design_wpheader_preview").style) marginLeft = marginRight = '20px';
}
/*]]>*/
</script>
</head><body>
<div class="container">
  <div style="background-color: yellow">
    <div id="design_wpheader_preview" style="height: 50px; background-color: red">
      <h1>Header</h1>
    </div>
  </div>
</div>
<div>
  <input type="button" name="clickme" id="clickme" value="Click for make paddings: left and right!" onclick="ClickedMe()" />
</div>
</body></html>

Здравствуйте, Вадим Гусев, Вы писали:

ВГ>Здравствуйте, Вадим Гусев, Вы писали:

ВГ>> … ширина берется у родителя.

ВГ>Поковырял немного код: похоже ширина берётся из window.innerWidth.

Все верно, но почему хром не меняет размер всем элементам при задавании паддинг-райт ?

и почему паддинг-лефт работает нормально?
п.с. спасибо

Здравствуйте, MicSOFT, Вы писали:

MSO>Здравствуйте, FishinG, Вы писали:

FG>>Задаю динамически паддинги: левый и правый.
FG>>Левый работает, правый нет. В браузерах IE, FF, Opera работает ок.

FG>>Как можно обойти эту проблему ?
FG>>Помогите, кто в этом разбирался...

MSO>Ну а зачем PADDING?
MSO>Можно через MARGIN дочернего.
MSO>И потом PADDING — это в основном для текста.

Нужно именно паддинг. Увы, но такие требования.

Здравствуйте, FishinG, Вы писали:

FG>Все верно, но почему хром не меняет размер всем элементам при задавании паддинг-райт ?

и почему паддинг-лефт работает нормально?
FG>п.с. спасибо

еще я заметил, если окно ресайзнуть, то все становится на места

и почему паддинг-лефт работает нормально?
FG>п.с. спасибо

Если не задана ширина, chrome не меняет размер дочернего элемента ни при padding-left, ни при padding-right. Визуально, левый паддинг виден, правый тоже присутствует, но накрыт дочерним элементом. Вообщем, я бы не назвал это багом. Надо просто задать размеры элементам.

Здравствуйте, Вадим Гусев, Вы писали:

ВГ>Здравствуйте, FishinG, Вы писали:

FG>>Все верно, но почему хром не меняет размер всем элементам при задавании паддинг-райт ?

и почему паддинг-лефт работает нормально?
FG>>п.с. спасибо

ВГ>Если не задана ширина, chrome не меняет размер дочернего элемента ни при padding-left, ни при padding-right. Визуально, левый паддинг виден, правый тоже присутствует, но накрыт дочерним элементом. Вообщем, я бы не назвал это багом. Надо просто задать размеры элементам.

Т.е. для задания паддинга мне нужно динамически измемнить размер всех дочерних элементов ?

Здравствуйте, Вадим Гусев, Вы писали:

ВГ>Если не задана ширина, chrome не меняет размер дочернего элемента ни при padding-left, ни при padding-right. Визуально, левый паддинг виден, правый тоже присутствует, но накрыт дочерним элементом. Вообщем, я бы не назвал это багом. Надо просто задать размеры элементам.

К сожалению это ошибочное мнение. div это блочный элемент и он уже 100%.

<div class="ex2" id="ex2" style="background-color: yellow; width: 100%;">
<div class="design_wpheader_preview" style="height: 50px; background-color: red; width: 100%;">

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

	От:	FishinG
	Дата:	04.07.11 12:00
	Оценка:

От:	sembel	Fast Version Control System
Дата:	04.07.11 15:23
Оценка:

	От:	Аноним
	Дата:	04.07.11 15:36
	Оценка:

От:	Вадим Гусев	CyberView
Дата:	04.07.11 19:33
Оценка:

От:	Вадим Гусев	CyberView
Дата:	04.07.11 19:46
Оценка: