17 Replies Latest reply on Jun 1, 2013 1:05 PM by Mike M

    Firefox 21 doesn't support "border-image"?

    Mike M Level 6

      Opera here5-31-2013-4-29-09-PM.jpgFirefox here5-31-2013-4-29-36-PM.jpg

       

      I'm building a new site with a "picture frame" border around the main DIV (#wrapper). Using the border-image rule for the DIV I get the desired border (a picture frame and a box shadow around the DIV) in Opera, Safari, Chrome and IE 10, but Firefox 21 doesn't display the image border at all.

       

      From my stylesheet:

      #wrapper {

          width: 1024px;

          margin: 20px auto;

          border-width: 20px;

          -moz-border-image: url(../images/layout/frame_border.png) 20 stretch; /*Mozilla version*/

          -webkit-border-image: url(../images/layout/frame_border.png) 20 stretch; /*Webkit version*/

          -o-border-image: url(../images/layout/frame_border.png) 20 stretch; /*Opera version*/

          -ms-border-image: url(../images/layout/frame_border.png) 20 stretch; /*IE syntax when it does support this prop*/

          border-image: url(../images/layout/frame_border.png) 20 stretch; /*Standard version*/

          box-shadow: 5px 5px 10px #000;

          -moz-box-shadow: 5px 5px 10px #000;

          -webkit-box-shadow: 5px 5px 10px #000;

         background: #FFF;

      }

       

      As you can see, I've added the necessary tweaks for each browser engine.

      It's not live yet, so I cannot post a link to the page. I can post all code if necessary, but this is the particular area wherein the trouble lies.

       

      My question is:

      Is this yet another quirk in Firefox? They already ticked me off something fierce with their PDF viewer that doesn't do even half of what the Acrobat plugin used to.

        • 1. Re: Firefox 21 doesn't support "border-image"?
          Mike M Level 6

          I've confirmed this. I have three other templates that employe border-images for DIVs and NONE of them show up in Firefox anymore.

          It looks like my favorite browser since 2003 is going to be moving to third at best. Maybe even fifth.

          I'll use slices as backgrounds for individual elements and make this work.

          • 2. Re: Firefox 21 doesn't support "border-image"?
            mytaxsite.co.uk Level 6

            Why have you not included border-style: solid;  Like this:

             

             

            border-style: solid;

             

            Put the above item first before anything else for your wrap.  Do it and post back.

             

            Good luck.

            1 person found this helpful
            • 3. Re: Firefox 21 doesn't support "border-image"?
              Mike M Level 6

              Well that fixed the Firefox display, but it turned the border to 20px solid black in IE 10. Ya think that has to do with the border image being a PNG?

              Funny thing is, I got the info for adding a border image from W3C, and I updated it in February. Have never seen a requirement for a border-style for it to work.

              • 5. Re: Firefox 21 doesn't support "border-image"?
                pziecina Adobe Community Professional

                Hi

                 

                Try using -

                border: 20px solid transparent;

                 

                IE10 does not support the border-image property.

                 

                PZ

                • 6. Re: Firefox 21 doesn't support "border-image"?
                  mytaxsite.co.uk Level 6

                  Well that fixed the Firefox display, but it turned the border to 20px solid black in IE 10.

                   

                  The border style could be anything from this list:

                   

                  dashed

                  dotted

                  double

                  groove

                  hidden

                  inset

                  none

                  outset

                  ridge

                  solid

                  inherit

                   

                  Best thing is to try different styles to see how it looks in x-browsers.

                   

                  You could post your image here so that I or somebody else can create a sample/example page for you to try in different browsers.

                   

                  <http://www.w3.org/community/webed/wiki/CSS/Properties/border-style>

                   

                  Good luck.

                  • 7. Re: Firefox 21 doesn't support "border-image"?
                    mytaxsite.co.uk Level 6

                    This is from the specification:

                     

                    none
                    No border; the computed border width is zero.
                    hidden
                    Same as 'none', except in terms of border conflict resolution for table elements.
                    dotted
                    The border is a series of dots.
                    dashed
                    The border is a series of short line segments.
                    solid
                    The border is a single line segment.
                    double
                    The border is two solid lines. The sum of the two lines and the space between them equals the value of 'border-width'.
                    groove
                    The border looks as though it were carved into the canvas.
                    ridge
                    The opposite of 'groove': the border looks as though it were coming out of the canvas.
                    inset
                    The border makes the box look as though it were embedded in the canvas.
                    outset
                    The opposite of 'inset': the border makes the box look as though it were coming out of the canvas.



                    • 8. Re: Firefox 21 doesn't support "border-image"?
                      Mike M Level 6

                      I ran the gamut of border rules and definitions on this.

                      All different settings ans I eevn tried 'tweking" them using "-ms-", "-moz-", "-o-", and "-webkit-".

                      The "solid" definition fixes Firefox, the others still work, but IE (I hate IE, always have) changes to a 20px solid black border.

                       

                      Here's the page code:

                       

                      <!DOCTYPE HTML>

                      <html>

                      <head>

                      <meta charset="utf-8">

                      <title>The Artist on the Corner &bull; Original Oil Paintings by [Artist]</title>

                      <link href="css/basic.css" rel="stylesheet" type="text/css">

                      </head>

                       

                      <body>

                      <div id="wrapper">

                        <div id="container">

                          <div id="header">

                            <div id="logo">

                              <h1>The Artist on the Corner</h1>

                              <h2>Original Oil Paintings by [Artist]</h2>

                            </div>

                          </div>

                          <div id="navmenu">

                            <ul>

                              <li><a href="#" class="active">Home Page</a></li>

                              <li><a href="#">About Me</a></li>

                              <li><a href="#">Landscapes</a></li>

                              <li><a href="#">Portraits</a></li>

                              <li><a href="#">Still Lifes</a></li>

                              <li><a href="#">Abstracts</a></li>

                              <li><a href="#">Contact Me</a></li>

                              <li><a href="#">Ordering</a></li>

                            </ul>

                          </div>

                          <div id="page">

                            <div id="content">

                              <h2>The Artist on the Corner</h2>

                              <h4>Sample Text:</h4>

                              <p>It is the star to every wand'ring bark, that looks on tempests and is never shaken; oh, no, it is an ever fixed mark. Which alters when it alteration finds, within his bending sickle's compass come; love's not time's fool, though rosy lips and cheeks. Love alters not with his brief hours and weeks, admit impediments; love is not love if this be error and upon me proved. Or bends with the remover to remove. Which alters when it alteration finds, that looks on tempests and is never shaken; let me not to the marriage of true minds.</p>

                              <p>Oh, no, it is an ever fixed mark. Whose worth's unknown, although his height be taken. Oh, no, it is an ever fixed mark love alters not with his brief hours and weeks, but bears it out even to the edge of doom. That looks on tempests and is never shaken; if this be error and upon me proved, admit impediments; love is not love. Whose worth's unknown, although his height be taken.</p>

                              <p>It is the star to every wand'ring bark, within his bending sickle's compass come; oh, no, it is an ever fixed mark. That looks on tempests and is never shaken; if this be error and upon me proved, love alters not with his brief hours and weeks. Whose worth's unknown, although his height be taken.</p>

                              <p>That looks on tempests and is never shaken; let me not to the marriage of true minds or bends with the remover to remove. Which alters when it alteration finds, admit impediments; love is not love love's not time's fool, though rosy lips and cheeks. Love alters not with his brief hours and weeks, within his bending sickle's compass come; let me not to the marriage of true minds.</p>

                              <p>Oh, no, it is an ever fixed mark if this be error and upon me proved, whose worth's unknown, although his height be taken. It is the star to every wand'ring bark. Love's not time's fool, though rosy lips and cheeks whose worth's unknown, although his height be taken. Admit impediments; love is not love or bends with the remover to remove. If this be error and upon me proved, that looks on tempests and is never shaken; love alters not with his brief hours and weeks.</p>

                              <p>Which alters when it alteration finds, it is the star to every wand'ring bark, let me not to the marriage of true minds. Or bends with the remover to remove. Within his bending sickle's compass come; whose worth's unknown, although his height be taken. Love's not time's fool, though rosy lips and cheeks. That looks on tempests and is never shaken; whose worth's unknown, although his height be taken.</p>

                              <p>Let me not to the marriage of true minds or bends with the remover to remove. Love alters not with his brief hours and weeks, love's not time's fool, though rosy lips and cheeks if this be error and upon me proved. It is the star to every wand'ring bark, within his bending sickle's compass come; admit impediments; love is not love. Love alters not with his brief hours and weeks, that looks on tempests and is never shaken; let me not to the marriage of true minds.</p>

                              <p>Which alters when it alteration finds. That looks on tempests and is never shaken; it is the star to every wand'ring bark, whose worth's unknown, although his height be taken. Admit impediments; love is not love love alters not with his brief hours and weeks, which alters when it alteration finds. Love's not time's fool, though rosy lips and cheeks let me not to the marriage of true minds but bears it out even to the edge of doom.</p>

                              <p>It is the star to every wand'ring bark, that looks on tempests and is never shaken; I never writ, nor no man ever loved. Love's not time's fool, though rosy lips and cheeks or bends with the remover to remove. It is the star to every wand'ring bark, or bends with the remover to remove.</p>

                              <p>Love's not time's fool, though rosy lips and cheeks admit impediments; love is not love within his bending sickle's compass come. Oh, no, it is an ever fixed mark if this be error and upon me proved, love alters not with his brief hours and weeks. I never writ, nor no man ever loved. But bears it out even to the edge of doom.</p>

                            </div>

                          </div>

                          <div id="footer">

                            <p><script language="JavaScript" type="text/javascript">

                      <!--

                       

                          today=new Date();

                          y0=today.getFullYear();

                       

                        // end hiding -->

                      </script>

                              All Images and Content Copyright &copy;

                              <script language="JavaScript" type="text/javascript">

                        <!--- Hide from old browsers

                          document.write(y0);

                        // end hiding -->

                      </script>

                              <a href="javascript:;">site owner</a>. All Rights Reserved. Designed by: <a href="javascript:;">site designer</a>. Valid <a href="http://validator.w3.org/check/referer">XHTML</a> &amp; <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a></p>

                          </div>

                        </div>

                      </div>

                      </body>

                      </html>

                       

                      And the CSS:

                       

                      @charset "utf-8";

                      /* CSS Document */

                      /*Colors for this page: #005c9d,#000000,#ffffff,#,#,#,#,#,#,#,#,*/

                      /*Set all undeclared elements to zero margin and padding*/

                      * {

                          margin: 0px;

                          padding: 0px;

                      }

                      body {

                          background: url(../images/layout/gallery-bg.jpg) repeat center top;

                          color: #000;

                          font: italic 14px/16px "Palatino Linotype", "Book Antiqua", Palatino, serif;

                      }

                      h1 {

                          font: italic bold 48px/52px "Palatino Linotype", "Book Antiqua", Palatino, serif;

                          color: #000;

                      }

                      h2 {

                          font: italic bold 36px/40px "Palatino Linotype", "Book Antiqua", Palatino, serif;

                          color: #000;

                      }

                      h3 {

                          font: italic bold 24px/28px "Palatino Linotype", "Book Antiqua", Palatino, serif;

                          color: #000;

                      }

                      h4 {

                          font: italic bold 18px/20px "Palatino Linotype", "Book Antiqua", Palatino, serif;

                          color: #000;

                      }

                      p {

                      }

                      a {

                          color: #000;

                          text-decoration: underline;

                      }

                      a:hover {

                      }

                      a:visited {

                      }

                      img {

                      }

                      a img {

                          border: none;

                          outline: none; /*eliminates annoying dotted line around linked images*/

                      }

                      blockquote {

                      }

                      a:focus {

                          outline: none;

                          border: none;

                      }

                      input {

                      }

                      select {

                      }

                      textarea {

                      }

                      iframe {

                          border: none;

                          overflow: hidden;

                      }

                      .more {

                      }

                      .byline {

                      }

                      .entry {

                      }

                      .clear {/*This keeps columns from falling out of place and the page DIV a uniform length across the page*/

                          clear: both;

                      }

                      #wrapper {

                          border-style: solid;

                          width: 1024px;

                          margin: 20px auto;

                          border-width: 20px;

                          -moz-border-image: url(../images/layout/frame_border.jpg) 20stretch; /*Mozilla version*/

                          -webkit-border-image: url(../images/layout/frame_border.jpg) 20 stretch; /*Webkit version*/

                          -o-border-image: url(../images/layout/frame_border.jpg) 20 stretch; /*Opera version*/

                          -ms-border-image: url(../images/layout/frame_border.jpg) 20 stretch; /*IE syntax when it does support this prop*/

                          border-image: url(../images/layout/frame_border.jpg) 20 stretch; /*Standard version*/

                          box-shadow: 5px 5px 10px #000;

                          -moz-box-shadow: 5px 5px 10px #000;

                          -webkit-box-shadow: 5px 5px 10px #000;

                          background: #FFF;

                      }

                      #container {

                          width: 1024px;

                      }

                      #header {

                          width: 1024px;

                          height: 256px;

                          background: -moz-linear-gradient(top, rgb(0,92,157) 0%, rgb(32,128,188) 50%, rgb(32,128,188) 50%, rgb(255,255,255) 100%);

                          background: -webkit-gradient(linear, center top, center bottom, color-stop(0%, rgb(0,92,157)), color-stop(50%, rgb(32,128,188)), color-stop(50%, rgb(32,128,188)), color-stop(100%, rgb(255,255,255)));

                          background: -webkit-linear-gradient(top, rgb(0,92,157) 0%, rgb(32,128,188) 50%, rgb(32,128,188) 50%, rgb(255,255,255) 100%);

                          background: -o-linear-gradient(top, rgb(0,92,157) 0%, rgb(32,128,188) 50%, rgb(32,128,188) 50%, rgb(255,255,255) 100%);

                          background: -ms-linear-gradient(top, rgb(0,92,157) 0%, rgb(32,128,188) 50%, rgb(32,128,188) 50%, rgb(255,255,255) 100%);

                          background: linear-gradient(top, rgb(0,92,157) 0%, rgb(32,128,188) 50%, rgb(32,128,188) 50%, rgb(255,255,255) 100%);

                      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005c9d', endColorstr='#ffffff', GradientType=0 );

                      }

                      #logo {

                          width: 1024px;

                          height: 256px;

                          background: url(../images/layout/logo.png) no-repeat left top;

                      }

                      #logo h1 {

                          font: italic bold 48px/52px "Palatino Linotype", "Book Antiqua", Palatino, serif;

                          color: #000;

                          text-align: right;

                          padding: 90px 20px 0px 0px;

                      }

                      #logo h2 {

                          font: italic bold 24px/28px "Palatino Linotype", "Book Antiqua", Palatino, serif;

                          color: #000;

                          text-align: right;

                          padding: 10px 20px;

                      }

                      #navmenu {

                          width: 1024px;

                          height: 48px;

                          background: url(../images/layout/navmenu-bg.png) repeat-x center top;

                      }

                      #navmenu ul {

                      }

                      #navmenu ul li {

                          display: inline;

                      }

                      #navmenu ul li a {

                          display: block;

                          float: left;

                          text-align: center;

                          height: 34px;

                          width: 128px;

                          font: italic bold 18px "Palatino Linotype", "Book Antiqua", Palatino, serif;

                          padding-top: 14px;

                          color: #000;

                          text-decoration: none;

                      }

                      #navmenu ul li a:hover {

                          background-color: #000;

                          border-radius: 0px 0px 10px 10px;

                          color: #FFF;

                      }

                      #navmenu ul li a.active {

                          background-color: #000;

                          border-radius: 0px 0px 10px 10px;

                          color: #FFF;

                      }

                      #page {

                          width: 1024px;

                      }

                      #content {

                          width: 1004px;

                          padding: 20px 10px;

                      }

                      #content p:first-letter {

                          padding-left: 35px;

                      }

                      #sidebar {/*float: left; (U.S.) float: right; (rest of the world)*/

                      }

                      #sidebar h2 {

                      }

                      #sidebar p {

                      }

                      #sidebar ul {

                      }

                      #sidebar ul li {

                      }

                      #sidebar ul li a {

                      }

                      #sidebar img {

                      }

                      #mainText {/*float: right (U.S.) float: left; (rest of the world*/

                      }

                      #mainText h2 {

                      }

                      #mainText p {

                      }

                      #mainText img {

                      }

                      #mainText ul {

                      }

                      #mainText ul li {

                      }

                      #mainText ul li a {

                      }

                      .threeCols {/*May be more than three columns, but three is a good max for width*/

                      }

                      .colLeft {

                      }

                      .colLeft h2 {

                      }

                      .colLeft p {

                      }

                      .colLeft a {

                      }

                      .colLeft img {

                      }

                      .colLeft ul {

                      }

                      .colLeft ul li {

                      }

                      .colMid {

                      }

                      .colMid h2 {

                      }

                      .colMid p {

                      }

                      .colMid a {

                      }

                      .colMid img {

                      }

                      .colMid ul {

                      }

                      .colMid ul li {

                      }

                      .colRt {

                      }

                      .colRt h2 {

                      }

                      .colRt p {

                      }

                      .colRt img {

                      }

                      .colRt a {

                      }

                      .colRt ul {

                      }

                      .colRt ul li {

                      }

                      #footer {

                          width: 1024px;

                          height: 44px;

                          border-top: 2px solid #000;

                          background: url(../images/layout/footer-bg.jpg) repeat-x left top;

                      }

                      #footer p {

                          font: italic bold 14px/16px "Palatino Linotype", "Book Antiqua", Palatino, serif;

                          color: #000;

                          text-align: center;

                          padding-top: 14px;

                      }

                      #footer a {

                          color: #000;

                      }

                      #footer a:hover {

                      }

                      /*Optional Calendar Styles*/

                      .main {

                          width: 100%;

                          border: none;

                      }

                      .month {

                          background-color: black;

                          font: bold 12px "Trebuchet MS", Arial, Helvetica, sans-serif;

                          color: white;

                      }

                      .daysofweek {

                          background-color: gray;

                          font: bold 12px "Trebuchet MS", Arial, Helvetica, sans-serif;

                          color: white;

                      }

                      .days {

                          font: 12px "Trebuchet MS", Arial, Helvetica, sans-serif;

                          color: black;

                          background-color: lightyellow;

                          padding: 2px;

                      }

                      .days #today{

                          font-weight: bold;

                          color: red;

                      }

                       

                      Here's the border image:

                      frame_border.jpg

                      • 9. Re: Firefox 21 doesn't support "border-image"?
                        mytaxsite.co.uk Level 6

                        Try this code:

                         

                         

                        border-style: solid; border-width: 0px; -moz-border-image: url(frame_border.jpg) 26 25 27 27 repeat; -webkit-border-image: url(frame_border.jpg) 26 25 27 27 repeat; -o-border-image: url(frame_border.jpg) 26 25 27 27 repeat; border-image: url(frame_border.jpg) 26 25 27 27 fill repeat;

                         

                        Replace frame_"border.jpg" with the correct path and see if it works.

                         

                        Post back with the result of this test.

                        • 10. Re: Firefox 21 doesn't support "border-image"?
                          Mike M Level 6

                          That IS the correct filepath.

                           

                          The border image filename is "frame_border.jpg"

                           

                          I've used that name before and it works just fine. Besides, IE is the ONLY browser that has the issue now, so I seriously doubt the file path or name is the cause.

                           

                          Edit:

                          For the record, I changed the image name to "wood.jpg" with no change.

                          File path and name are irrelevant to this issue.

                           

                          Without a "soild" definition, IE displays the image border. With it, it goes black, so IE isn't parsing the border-image CSS for some reaason with a "solid" border defintiton.

                           

                          Message was edited by: C F McBlob

                          • 11. Re: Firefox 21 doesn't support "border-image"?
                            mytaxsite.co.uk Level 6

                            Ok I have created a test page at this link:

                             

                            http://www.mytechnet.talktalk.net/frame-border-test.html

                             

                            I will continue to work on it to see if it can be made to work correctly in IE8, and 9 (I don't have 10 yet)

                            • 12. Re: Firefox 21 doesn't support "border-image"?
                              Mike M Level 6

                              I'm just going to go with it "as is" and... as I usually do... put  links for IE users to download Chrome, Opera or Firefox for better viewing. I'll be glad when Microsoft gets out of the browser business, since they obvioulsy have no intention of keeping up with the rest of the Internet world.

                              • 13. Re: Firefox 21 doesn't support "border-image"?
                                mytaxsite.co.uk Level 6

                                Before you give up, just add one more line at the end of the code.  The line is this:

                                 

                                 

                                border-color: transparent;

                                 

                                This should clear the black color in IE;  Alternatively, make the color white so it doesn't appear on the screen!!!  My test page will be updated in the next two minutes.

                                • 14. Re: Firefox 21 doesn't support "border-image"?
                                  Mike M Level 6

                                  Here'a something I found at Dynamic Drive:

                                   

                                  "Yes, CSS is slicing now. border-image is currently supported in all the modern browsers to various degrees except IE (as of IE9)."

                                   

                                  Doesn't explain why it worked at first in IE 10, but I'm not going to waste any more effort on it.

                                  • 15. Re: Firefox 21 doesn't support "border-image"?
                                    Nancy OShea Adobe Community Professional & MVP

                                    Since many browsers -- especially older ones, don't support any CSS level 3 much less border-images, you could fake it by nesting a smaller division inside a slightly bigger one and use a background-image instead of a border-image like this:

                                    http://www.alt-web.com/sandbox/frame.html

                                     

                                     

                                    Nancy O.

                                    • 16. Re: Firefox 21 doesn't support "border-image"?
                                      mytaxsite.co.uk Level 6

                                      Another test page:

                                       

                                      http://www.mytechnet.talktalk.net/frame-border-test02.html

                                       

                                      Just a variation of color to make it interesting.

                                      • 17. Re: Firefox 21 doesn't support "border-image"?
                                        Mike M Level 6

                                        That's my "plan b": slicing it up and repeating as background for the main content DIV. I keep hoping to get away from that process one day, but it seems Microsoft's garbage browser always gets in the way.