float и position проблема
Здравствуйте
есть бокс углы которого скругленные, а в нем картинка которая должна залазить на правую часть рамки бокс. вот код, но почему-то рамка бокса плывет
Код:
[HTML]
<style>
#boxes_red_right{margin: 7px 25px 7px 10px}
#boxes_red_right .bor1, #boxes_red_right .bor2, #boxes_red_right .bor3, #boxes_red_right .bor4{font-size:1px; overflow:hidden; display:block;}
#boxes_red_right .bor1 {height:1px; background:#fd6802; margin:0 5px;}
#boxes_red_right .bor2 {height:1px; background:#ffffff; border-right:2px solid #fd6802; border-left:2px solid #fd6802; margin:0 3px;}
#boxes_red_right .bor3 {height:1px; background:#ffffff; border-right:1px solid #fd6802; border-left:1px solid #fd6802; margin:0 2px;}
#boxes_red_right .bor4 {height:2px; background:#ffffff; border-right:1px solid #fd6802; border-left:1px solid #fd6802; margin:0 1px;}
#boxes_red_right .contentb {background: #ffffff; border-right:1px solid #fd6802; border-left:1px solid #fd6802;}
#boxes_red_right .contentinner {margin-left: 0px; padding-top: 15px; padding-bottom: 15px;}
</style>
<div id="boxes_red_right">
<b class="bor1"></b><b class="bor2"></b><b class="bor3"></b><b class="bor4"></b>
<div class="contentb">
<div class="contentinner">
<div style="position:relative; left: 19px; top:15px; float:right;"><a href="#"><img src="{$tpl_path}img/allnewprod.gif" /></a> </div>
<div class="clear"></div>
</div>
</div>
<b class="bor4"></b><b class="bor3"></b><b class="bor2"></b><b class="bor1"></b>
</div>
[/HTML]
подскажите как решить проблему
есть бокс углы которого скругленные, а в нем картинка которая должна залазить на правую часть рамки бокс. вот код, но почему-то рамка бокса плывет
Код:
[HTML]
<style>
#boxes_red_right{margin: 7px 25px 7px 10px}
#boxes_red_right .bor1, #boxes_red_right .bor2, #boxes_red_right .bor3, #boxes_red_right .bor4{font-size:1px; overflow:hidden; display:block;}
#boxes_red_right .bor1 {height:1px; background:#fd6802; margin:0 5px;}
#boxes_red_right .bor2 {height:1px; background:#ffffff; border-right:2px solid #fd6802; border-left:2px solid #fd6802; margin:0 3px;}
#boxes_red_right .bor3 {height:1px; background:#ffffff; border-right:1px solid #fd6802; border-left:1px solid #fd6802; margin:0 2px;}
#boxes_red_right .bor4 {height:2px; background:#ffffff; border-right:1px solid #fd6802; border-left:1px solid #fd6802; margin:0 1px;}
#boxes_red_right .contentb {background: #ffffff; border-right:1px solid #fd6802; border-left:1px solid #fd6802;}
#boxes_red_right .contentinner {margin-left: 0px; padding-top: 15px; padding-bottom: 15px;}
</style>
<div id="boxes_red_right">
<b class="bor1"></b><b class="bor2"></b><b class="bor3"></b><b class="bor4"></b>
<div class="contentb">
<div class="contentinner">
<div style="position:relative; left: 19px; top:15px; float:right;"><a href="#"><img src="{$tpl_path}img/allnewprod.gif" /></a> </div>
<div class="clear"></div>
</div>
</div>
<b class="bor4"></b><b class="bor3"></b><b class="bor2"></b><b class="bor1"></b>
</div>
[/HTML]
подскажите как решить проблему
Ставьте FireFox + FireBug и занимайтесь отладкой.
Товарищи. Бьюсь над проблемой:
Код:<body style="margin:0; padding:0"><div style="width:60; height:100"><img src="i/0.gif" width="1" height="600"></div><div style="width:60; height:200px; margin-top:-202px; border:1px solid black"> </div></body>Если уменьшать окно по вертикали, то в IE и Opera7 черный прямоугольник остается внизу, в Mozilla и Opera6 ползет вверх. Почему они за 100 высоты принимают только видимую область экрана и не обращают внимание на картинку в первом контейнере?
И еще небольшой вопросик. Как заставить работать свойство "vertical-align:bottom"? Не работает нигде
Всем спасибы.
Код:<body style="margin:0; padding:0"><div style="width:60; height:100"><img src="i/0.gif" width="1" height="600"></div><div style="width:60; height:200px; margin-top:-202px; border:1px solid black"> </div></body>Если уменьшать окно по вертикали, то в IE и Opera7 черный прямоугольник остается внизу, в Mozilla и Opera6 ползет вверх. Почему они за 100 высоты принимают только видимую область экрана и не обращают внимание на картинку в первом контейнере?
И еще небольшой вопросик. Как заставить работать свойство "vertical-align:bottom"? Не работает нигде
Всем спасибы.
Цитата: Serebrjany mir
Как заставить работать свойство "vertical-align:bottom"? Не работает нигде
А к каким элементам вы применяете? Браузеры игнорируют vertical-align для блоков. Это свойство применимо для ячеек таблиц и inline-элементов.
Цитата:
Здравствуйте
есть бокс углы которого скругленные, а в нем картинка которая должна залазить на правую часть рамки бокс. вот код, но почему-то рамка бокса плывет
есть бокс углы которого скругленные, а в нем картинка которая должна залазить на правую часть рамки бокс. вот код, но почему-то рамка бокса плывет
[HTML]
<div style="position:absolute; right:-10px; top:15px; "><a href="#"><img src="{$tpl_path}img/allnewprod.gif" /></a> </div>
[/HTML]
так что ли?