Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Can't get border-images working.

    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.
    Last edited by Vaethorin; 06-16-2012 at 01:16 PM.

  • #2
    Regular Coder
    Join Date
    Jun 2012
    Location
    Near Chicago, USA
    Posts
    123
    Thanks
    7
    Thanked 19 Times in 19 Posts
    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 View Post
    Tried google for hours, found this site and hope you guys can shred some light.
    Light has been shredded

    Will
    Numerology API for apps - Facebook, iPad, mobile phones. No charge to use API. [info]

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Regular Coder
    Join Date
    Jun 2012
    Location
    Near Chicago, USA
    Posts
    123
    Thanks
    7
    Thanked 19 Times in 19 Posts
    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
    Numerology API for apps - Facebook, iPad, mobile phones. No charge to use API. [info]


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •