Forums

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:

<div id="box"></div>

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.

Schmotty

using z-index: -1 will probably set it behind the html/body tag. try setting #box to z-index:100 and :before to 99

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.

treehouse : what would you like to learn today?

Forums

CSS ':before' pseudo problem, help please