View Full Version : how to get this border image to adjust to dynamic content !?

05-18-2007, 07:08 AM
This is the site in question:

I am trying to make the graphic that is connected to the border of the grey content box from repeating itself up from a certain point (from the corner and up). Right now container3 has height: 100%;

The content that goes into the grey box are blog entries and when a new entry is submitted the height of the box change which makes the border design out of place. I want the image that is attached to the grey box to stay on the very corner of the box so when the height changes I want it to stay in the same position!

I have viewed this in IE6 and it looks terrible.. All the shapes are out of place..

Does anyone know how to do what I want?????? Please help

Here is a design mock up to give you a better idea of what I am trying to ultimately do!:

05-18-2007, 08:41 AM
since your graphics are lo-color, you can make this real easy on yourself and use big pics. my first thought is this:

nix container3 for now. also get rid of the left and right border list items.
put the background into container2. make it a single image that spans the whole width of its container. attach it to the bottom of #container2, something like
background: url(whatever.gif) bottom center no-repeat; I tried repeat-y as well, i think it actually works nicely.

then make another big background and use it in the body tag, to cover the outside top corners.

Here's my try:

little box (http://www.jamiedoris.com/test/curlyborder.html)
bigger box w/ lipsum (http://www.jamiedoris.com/test/curlyborder2.html)

<!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" lang="en">

<title>Home Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

body {
font-size: 80%;
font-family: Georgia, "Times New Roman", Times, serif;
background: #999999 url(images/greybg.gif) top center no-repeat;

body .clear {clear: both;}

* {
margin: 0px;
padding: 0px;

#topwid {
height: 29px;
background-color: black;

#container {
padding: 0px;
margin: 0px auto;
width: 750px;
background-color: #CCC;
border-right: black 5px solid;
border-left: black 5px solid;
border-bottom: black 5px solid;
min-height: 100px;

#container2 {
padding: 0px;
margin: 0px auto;
width: 950px;
min-height: 100px;
background-image: url(images/border_pro.gif);
background-position:bottom center;

* html #content {

#validatesite {

padding: 0px;
left: 50%;
margin: 0px auto;
width: 200px;


<div id="topwid"></div>
<div id="container2">

<div id="container">
<ul id="content"></ul>
<div id="validatesite"><a href="http://validator.w3.org/check?uri=referer"><img src="images/w3c_html1.gif" alt="Valid HTML 4.01
Transitional" width="80" height="15"/></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="images/w3c_css2.gif" alt="Valid CSS!" width="80" height="15"


05-19-2007, 09:42 PM
bustamelon thank you the little box example is perfect!
By adding background-position:bottom center; to container2 it has made this a success!

:D :D