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

Popular posts from this blog

How do I check if an insert was successful with MySQLdb in Python? -

delphi - blogger via idHTTP : error 400 bad request -

postgresql - ERROR: operator is not unique: unknown + unknown -