...

View Full Version : Can't get border-images working.



Vaethorin
06-16-2012, 12:28 PM
Here is what I have so far, the result? No borders show :confused:


<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

<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, 02: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_pr_border-image.asp



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

Light has been shredded :)

Will

Vaethorin
06-16-2012, 02: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, 02: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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum