Sally Sally - 1 year ago 41
HTML Question

Old school border image - css2 -

I have an issue with creating boxshadows..
I am working in IE8 and hence I cannot use CSS3 - nor does CSSPIE help as it basically screws up my boxshadow when uploading to SharePoint (2007) (pie works fine in IE8, outside of SharePoint).
My new approach is to create a table with border images - like in the old days, but somehow it looks odd..

This is the code I have:

<TABLE cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD style="VERTICAL-ALIGN: bottom; WIDTH: 10px; HEIGHT: 10px"><IMG height=10 alt="" src="lefttopcorner.png" border="0" width=10>&nbsp;&nbsp;</TD>
<TD style="BACKGROUND-POSITION: 50% bottom; BACKGROUND-IMAGE: url(topside.png); BACKGROUND-REPEAT: repeat-x; HEIGHT: 10px">&nbsp;&nbsp;</TD>
<TD style="VERTICAL-ALIGN:bottom; WIDTH: 10px; HEIGHT: 10px"><IMG height=10 alt="" src="righttopcorner.png" width=10 border="0">&nbsp;&nbsp;</TD>
</TR>
<TR>
<TD style="BACKGROUND-IMAGE: url(leftside.png); VERTICAL-ALIGN: bottom; BACKGROUND-REPEAT: repeat-y; HEIGHT: 10px">&nbsp;&nbsp;</TD>
<TD style="BACKGROUND-COLOR: #F4F3F2"> &nbsp;&nbsp; </TD>
<TD style="BACKGROUND-IMAGE: url(rightside.png); VERTICAL-ALIGN: bottom; BACKGROUND-REPEAT: repeat-y; HEIGHT: 10px">&nbsp;&nbsp;</TD>
</TR>
<TR>
<TD style="VERTICAL-ALIGN: top; WIDTH: 10px; HEIGHT: 10px"><IMG height=10 alt="" src="leftbottomcorner.png" width=10>&nbsp;&nbsp;</TD>
<TD style="BACKGROUND-POSITION:50%; BACKGROUND-IMAGE: url(bottomside.png); BACKGROUND-REPEAT: repeat-x; HEIGHT: 10px">&nbsp;&nbsp;</TD>
<TD style="VERTICAL-ALIGN: top; WIDTH: 10px; HEIGHT: 10px"><IMG height=10 alt="" src="rightbottomcorner.png" width=10>&nbsp;&nbsp;</TD>
</TR>
</TBODY>
</TABLE>


The table doesn't seem to become a coherent box:

http://imgur.com/4ARd5tL

and a fiddle: http://jsfiddle.net/Cz29T/ however, I don't have the slightest clue how to upload images to a fiddle..

If there is a CSS solution - NOT CSS3 please - then I'd like to know :)

I will greatly appreciate if someone could tell me what I am doing wrong.. it is probably a rookie mistake, but right now I think I have looked at it for too long..

Answer Source

Try using filter property for IE.

You can refer URL http://msdn.microsoft.com/en-us/library/ms532985%28v=vs.85%29.aspx">Link

Example of box-shadow for IE :

.class{
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=150, Color='#333333');
}

You can change Direction value to 90, 180, 270, 360 to show shadow for complte box.

I have created a sample code which consists of Border as well as box-shadow. Please check if it works.

<Div class="CheckShadow">
Try Box Shadow
</Div>

<style>
.CheckShadow
{
    width:100px; 
    height:100px; 
    box-shadow:4px 4px 5px red; 
    border:5px solid blue;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=red,direction=90,strength=10),
    progid:DXImageTransform.Microsoft.Shadow(color=red,direction=180,strength=10);
}
</style>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download