Can't get border-images working.

Vaethorin · 06-16-2012, 11:28 AM

Here is what I have so far, the result? No borders show

Code:

<style media="screen" type="text/css">

.border12 {
	border: solid transparent 0px;
	border-top-image: url("http://nom-guild.com/forums/styles/OccultDB/theme/portal_images_custom/header.png") no-repeat;
	border-left-image: url("http://nom-guild.com/forums/styles/OccultDB/theme/portal_images_custom/side.png") repeat-y;
	border-right-image: url("http://nom-guild.com/forums/styles/OccultDB/theme/portal_images_custom/side.png") repeat-y;
	}
</style>


<table border=1 width=180px cellpadding=0>

	<tr>
		<div class="border12">
			test
		</div>
	</tr>
</table>

I also tried

Code:

<style media="screen" type="text/css">
#container {
    display: table;
	border-top-image: url("http://nom-guild.com/forums/styles/OccultDB/theme/portal_images_custom/header.png") no-repeat;
	border-left-image: url("http://nom-guild.com/forums/styles/OccultDB/theme/portal_images_custom/side.png") repeat-y;
	border-right-image: url("http://nom-guild.com/forums/styles/OccultDB/theme/portal_images_custom/side.png") repeat-y;
	
    }

  #row  {
    display: table-row;
    }

  #left, #right, #middle {
    display: table-cell;
    }
</style>


<div id="container">
  <div id="row">

  	<div id="left">
  		<p>test</p>
  	</div>

	</div>
</div>

Tried google for hours, found this site and hope you guys can shred some light.

Will Bontrager · 06-16-2012, 01:19 PM

According to the w3schools site, the border-image-... property is only supported in Chrome. Alternate properties are available for Firefox, Safari, and Opera.

This page might provide the information you are looking for.

http://www.w3schools.com/cssref/css3...rder-image.asp

Quote:

Originally Posted by Vaethorin

Tried google for hours, found this site and hope you guys can shred some light.

Light has been shredded

Will

Vaethorin · 06-16-2012, 01:43 PM

How would I make the tables like at http://www.swtor-rp.com/ ?

Using 3 images, one for both sides, one for the top and one for the bottom part?

Will Bontrager · 06-17-2012, 01:12 PM

Vaethorin, they are using positioned divs with background images.

Because the images are background, they can publish text on top of them (like their "UPCOMING EVENTS" and "LATEST POSTS").

Looks like an interesting technique. One I think I'll take the time to master. Thanks for providing the link to where it is used.

Will