1

I am using html5 and am trying to create a rough edged seamless border(top, sides + bottom).

I am aware ie8 does not support the CSS3 border image. IE8 is as far back as am willing to cater for.

So am using 3 div's to have the background image display, the only problem is depending on the length of the content, the bottom background image does not align nicely and make the box appear seamless, due to the repeated middle image being cut off prior to the point where the border merges.

I have used a brush in photoshop to create the jagged container. I have had a nose around about this but can not find a solution to fit.

Renai
  • 195
  • 2
  • 3
  • 13

1 Answers1

1

The solution is to set a specific increase of height increment for your content area. This can be done in a couple of ways:

  1. If your content is mostly text, you can set your line-height and/or the height of any other used elements to be the desired increment (or a multiple thereof) and hope for the best.
  2. If this will not work, the only other way would be to use JavaScript.

Here are a couple discussions of this very challenge, including some thoughts on using line height and some starts at workable JavaScript code:

Nathan Arthur
  • 8,287
  • 7
  • 55
  • 80
  • basically yeah, but i read about the border image property not working in ie8, thats why i am trying to be careful on what selectors i use etc.. The top div has no problem joining, its the middle div cause the problem as it touches and doesnt match with variable content length. Am now thinking about resorting to straight vertical edges so there are no breaks in the background image and rough edges around the top and bottom. – Renai Sep 21 '11 at 20:07
  • @Renai Still having trouble visualizing your problem. Could you possibly link to the page with the background images and rough edges? – Nathan Arthur Sep 21 '11 at 20:49
  • http://jsfiddle.net/7vP2e/ has the html and css. where can i upload an image to show you what i mean? – Renai Sep 21 '11 at 20:57
  • @Renai Try [Dropbox](http://www.dropbox.com/), [ImageShack](http://imageshack.us/), [Flickr](http://www.flickr.com/), or one of [these no-registration services](http://www.google.com/search?rlz=1C1GPCK_enUS441US441&gcx=w&sourceid=chrome&ie=UTF-8&q=upload+image+no+registration). – Nathan Arthur Sep 21 '11 at 21:45
  • here is the box am using: http://imageshack.us/photo/my-images/823/boxry.jpg/ Thanks – Renai Sep 22 '11 at 00:08
  • @Renai See improved answer. Hope it helps! =) – Nathan Arthur Sep 22 '11 at 00:38