4
Hi,
I am trying to create a colored box using background images. I am able to do it easily using tables but doing it in divs is proving to be an issue. Moreover IE and Mozilla also seems to be showing diff representations for the same code piece..
Can somebody help me out on this!
The code is as shown below
[html]
<html>
<head>
<style>
.left_top {
background: #fff url(top_left_alertbox.gif) no-repeat 0px 0px;
width:15px;
height:15px;
padding:0; margin:0;
}
.left_bottom {
background: #fff url(bottom_left_alertbox.gif) no-repeat 0px 0px;
width:15px;
height:15px;
padding:0; margin:0;
}
.left_center {
background: #fff url(center_left_alertbox.gif) repeat-y 0px 0px;
width:15px;
height:1px;
padding:0; margin:0;
}
.right_top {
background: #fff url(top_right_alertbox.gif) no-repeat 0px 0px;
width:15px;
height:15px;
padding:0; margin:0;
}
.right_bottom {
background: #fff url(bottom_right_alertbox.gif) no-repeat 0px 0px;
width:15px;
height:15px;
padding:0; margin:0;
}
.right_center {
background: #fff url(center_right_alertbox.gif) repeat-y 0px 0px;
width:15px;
height:1px;
padding:0; margin:0;
}
.middle_top {
background: #fff url(top_midle_alertbox.gif) no-repeat 0px 0px;
width:442px;
height:15px;
padding:0; margin:0;
}
.middle_bottom {
background: #fff url(bottom_middle_alertbox.gif) no-repeat 0px 0px;
width:442px;
height:15px;
padding:0; margin:0;
}
.middle_center {
background-color: #FFCCCC;
padding:0; margin:0;
}
</style>
</head>
<body>
<P>Using tables</P>
<table width="472" style="padding:0; margin:0;" cellspacing="0" cellpadding="0">
<tr>
<td class="left_top"></td>
<td class="middle_top"></td>
<td class="right_top"></td>
</tr>
<tr>
<td class="left_center"></td>
<td class="middle_center">Hi how are u? Box comes fine if we uses tables!</td>
<td class="right_center"></td>
</tr>
<tr>
<td class="left_bottom"></td>
<td class="middle_bottom"></td>
<td class="right_bottom"></td>
</tr>
</table>
<p>Using divs</p>
<div style="display:block; float:left; padding:0;margin:0; width:15px;" class="left_top"></div>
<div style="display:block; float:left; width:442px; padding:0;margin:0;" class="middle_top"></div>
<div style="display:block; float:left; padding:0;margin:0; width:15px;" class="right_top"></div><br/>
<div style="display:block; float:left; padding:0;margin:0; width:15px;" class="left_center"></div>
<div style="display:block; float:left; width:442px; padding:0;margin:0;" class="middle_center">Hi how are u? Can u help me with this please! This has been giving me some heart ache alrite!</div>
<div style="display:block; float:left; padding:0;margin:0; width:15px;" class="right_center"></div><br/>
<div style="display:block; float:left; padding:0;margin:0; width:15px;" class="left_bottom"></div>
<div style="display:block; float:left; width:442px; padding:0;margin:0;" class="middle_bottom"></div>
<div style="display:block; float:left; padding:0;margin:0; width:15px;" class="right_bottom"></div>
</body>
</html>
[/html]
I have attached the screenshot of output and also required images for the html above.
The table code in the HTML works fine but the one using the divs does not.
Help please!!!
TIA,
Arup
