CSS ‘:before’ pseudo problem, help please

[passingTime]

It looks fine on all modern browsers excluding IE. Was trying to use the :before pseudo to make an image border.

The markup is simply:

The CSS:

#box{width: 300px; height: 200px; background: #000; position: relative;}



#box:before {content: ''; background: red url(imgs/border.png); position: absolute; z-index: -1;

width: 100%; height: 100%; padding: 6px; top: -6px; left: -6px;}

Am i doing something wrong?

[joshuanhibbert]

You haven’t told us what the problem is?

[passingTime]

The styled div in any modern browser excluding IE shows the ‘#main:before’ styled box behind the ‘#main’ box, which is what it is supposed to do. Whereas in IE it shows up in front.

[passingTime]

That doesn’t work. Is there a better way to use border images that is efficient and compliant with IE? I can always just create an outer div but that isn’t very efficient i think.

[passingTime]

No one knows if this is viable? I think it would be a good way to go for image borders if it worked on IE.

[Author]

Posts