css - How to design this html Box for legacy browsers -
css - How to design this html Box for legacy browsers -
i need design box has next structure:
i have next html/css works in ff/chrome/safari. ie had spoil fun. please suggest how can back upwards ie?
the problem background images not getting displayed.
problem browser ie 6,7,8,9
js fiddle http://jsfiddle.net/amitverma/u33ap/
<div id="canvasframe"> <img src="resources/images/canvasfrog.png" id="canvasfrog" alt="" /> <img src="resources/images/canvasleaves.png" id="canvasleaves" alt="" /> <div class="canvascontent"> </div> </div> #canvasframe { background: url("../../resources/images/canvastop.png"), url("../../resources/images/canvasbottom.png"), url("../../resources/images/canvasbg.png"), url("../../resources/images/canvasbgtexture.jpg"); background-repeat: no-repeat, no-repeat, repeat-y, repeat-y; background-position: center top, center bottom, 0 0, 10px 0; width: 742px; margin-top: 40px; min-height: 440px; position: relative; } #canvasfrog { position: absolute; top:-65px; left:34px; } #canvasleaves { bottom: -15px; position: absolute; right: -22px; }
unfortunately, way can see supporting multiple background images adding divs html , changing css bit:
html
<div id="canvasframe"> <img src="resources/images/canvasfrog.png" id="canvasfrog" alt="" /> <img src="resources/images/canvasleaves.png" id="canvasleaves" alt="" /> <div class="frame_top"></div> <div class="canvascontent"> .... </div> <div class="frame_bottom"></div> </div>
css
#canvasframe { background: url("../../resources/images/canvasbgtexture.jpg") repeat-y 10px 0;; ..... } .canvascontent{ background: url("../../resources/images/canvasbg.png") repeat-y 0 0; ..... } .frame_top { background: url("../../resources/images/canvastop.png") no-repeat left top; height: 100px; width: 100%; } .frame_bottom { background: url("../../resources/images/canvasbottom.png") no-repeat top left; height: 100px; width: 100%; }
obviously, alter height of .frame_top
, .frame_bottom
reflect dimensions of background images.
html css internet-explorer
Comments
Post a Comment