SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2002
    Location
    Saskatoon, Canada
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Border Image problem

    Hi there. I'm having problems getting my border-images to show up for some reason. According to all of the resources I've looked at, there should be no problems... but when I preview, the border images (both left and right) don't show up. Anyone see my mistake?

    Here's the code:

    Code:
    body {
    	background: #7B1C29;
    	text-align: center;
    }
    
    #container {
    	width: 707px;
    	margin-top: 0;
    	margin-bottom: 0;
    	margin-left: auto;
    	margin-right: auto;
    	text-align: left;
    	background: #ffffff;
    	border-left-image: url(images/bg_border_left.gif);
    	border-right-image: url(images/bg_border_right.gif);
    Hamnet.
    Adopt A Beard.com: Get peace of mind with a piece of mine.

  2. #2
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    'border-image' is CSS3 and isn't supported by major browsers (at least none as far as I know)

  3. #3
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Yes CSS 3 like BonRouge mentioned i can not get it to work

    maybe use this workaround:


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<title>12345 12345 12345 12345 12345 </title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	body{
    	background: #7B1C29;
    	text-align: center;
    	}
    	#container{
    	width: 707px;
    	margin-top: 0;
    	margin-bottom: 0;
    	margin-left: auto;
    	margin-right: auto;
    	text-align: left;
    	/*border-left-image: url(images/ro.gif);
    	border-right-image: url(images/ro.gif); */
    	background:#ffffff url(images/bg_border_left.gif) repeat-y left top;
    	}
    	.container{
    	margin-left:10px; /*maybe not needed */
    	background:transparent url(images/bg_border_right.gif) repeat-y right top;
    	}
    	</style>
    </head>
    
    <body>
    <div id="container"><div class="container">12345<br /><br /><br /></div></div>
    </body>
    </html>

  4. #4
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by hamnet
    According to all of the resources I've looked at, there should be no problems... but when I preview, the border images (both left and right) don't show up.
    According to which resources?

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2002
    Location
    Saskatoon, Canada
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    junjun -- Good point. I was actually looking at the W3C site, but didn't even consider the possibility that the border-image attribute was not widely supported.

    Thanks for the help, guys. I think I've got it under control now.
    Hamnet.
    Adopt A Beard.com: Get peace of mind with a piece of mine.


Bookmarks

Posting Permissions

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