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_al ertbox.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_a lertbox.gif) no-repeat 0px 0px;
width:15px;
height:15px;
padding:0; margin:0;
}
.right_bottom {
background: #fff url(bottom_righ t_alertbox.gif) no-repeat 0px 0px;
width:15px;
height:15px;
padding:0; margin:0;
}
.right_center {
background: #fff url(center_righ t_alertbox.gif) repeat-y 0px 0px;
width:15px;
height:1px;
padding:0; margin:0;
}
.middle_top {
background: #fff url(top_midle_a lertbox.gif) no-repeat 0px 0px;
width:442px;
height:15px;
padding:0; margin:0;
}
.middle_bottom {
background: #fff url(bottom_midd le_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_t op"></td>
<td class="right_to p"></td>
</tr>
<tr>
<td class="left_cen ter"></td>
<td class="middle_c enter">Hi how are u? Box comes fine if we uses tables!</td>
<td class="right_ce nter"></td>
</tr>
<tr>
<td class="left_bot tom"></td>
<td class="middle_b ottom"></td>
<td class="right_bo ttom"></td>
</tr>
</table>
<p>Using divs</p>
<div style="display: block; float:left; padding:0;margi n:0; width:15px;" class="left_top "></div>
<div style="display: block; float:left; width:442px; padding:0;margi n:0;" class="middle_t op"></div>
<div style="display: block; float:left; padding:0;margi n:0; width:15px;" class="right_to p"></div><br/>
<div style="display: block; float:left; padding:0;margi n:0; width:15px;" class="left_cen ter"></div>
<div style="display: block; float:left; width:442px; padding:0;margi n:0;" class="middle_c enter">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;margi n:0; width:15px;" class="right_ce nter"></div><br/>
<div style="display: block; float:left; padding:0;margi n:0; width:15px;" class="left_bot tom"></div>
<div style="display: block; float:left; width:442px; padding:0;margi n:0;" class="middle_b ottom"></div>
<div style="display: block; float:left; padding:0;margi n:0; width:15px;" class="right_bo ttom"></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
