Border у diva не виден за другими divами
если у меня дивы вложены друг в друга, то границы видны только у самого верхнего. z-index не помогает. Как нарисовать границу вокруг самого нижнего дива?
- Опять же, html код где? от freets, 15 сентября 2012 года
Тут надо помнить, что такое вообще границы (если я правильно понял, речь идёт про style.border). Нормальные браузеры границу считают именно как границу, в отличие от самомнения Microsoft, который считает, что граница - это внутренность элемента. Поэтому, вложеный слой не может закрывать бордюр наружного в FF, Chrome и причих сафарях.
Вобщем, чтобы увидеть что там внизу, логичнее всего уменьшить вложеный слой ровно на ширину границы, которую он заслоняет.
Ну и подкорректировать размеры.
Вобщем, чтобы увидеть что там внизу, логичнее всего уменьшить вложеный слой ровно на ширину границы, которую он заслоняет.
Код:
<div id="d1" style="height: 100px; width: 100px; background-color: yellow; border: 1px solid red;">
<div id="d2" style="height: 100px; width: 100px; background-color: grey; border: 1px solid blue;"></div>
</div>
<div id="d2" style="height: 100px; width: 100px; background-color: grey; border: 1px solid blue;"></div>
</div>
Код:
var d1 = document.getElementById('d1');
var d2 = document.getElementById('d2');
var resize = function(outerBlock, innerBlock){
var bw = parseInt(innerBlock.style.borderWidth);
if(bw!=NaN && bw!=undefined && bw>0){
innerBlock.style.width = parseInt(outerBlock.style.width) - bw*2 + 'px';
innerBlock.style.height = parseInt(outerBlock.style.height) - bw*2 + 'px';
}
}
resize(d1, d2);
var d2 = document.getElementById('d2');
var resize = function(outerBlock, innerBlock){
var bw = parseInt(innerBlock.style.borderWidth);
if(bw!=NaN && bw!=undefined && bw>0){
innerBlock.style.width = parseInt(outerBlock.style.width) - bw*2 + 'px';
innerBlock.style.height = parseInt(outerBlock.style.height) - bw*2 + 'px';
}
}
resize(d1, d2);