2 pixel background tile problem

[invisible kid]

I have a 2 pixel high background tile which is repeating vertically down the page.

This is great as it means my content area can expand to accomodate text size being increased.

However, if the content area expands to a certain height, only 1 pixel of the 2 pixel background may be displayed. This causes a break between the background tile and the footer image at the bottom of the page.

Here's a screenshot. If you look at the dots you can see the break:

http://img222.imageshack.us/img222/5...problemym9.gif

Is there anyway I can ensure that the whole of the background tile is always shown, yet still keep the height of my content area dynamic?

Or is there a completely different way around this problem?

[WebJoel]

It is difficult to look at an image and diagnose a problem's solution. I am not really sure what your complaint is, from just looking at the image. But I do see a infinitesimally small little 'gappy' thing between the vertical dotted border on the right-side of what I'd call the "content" area. If "border-bottom: 0 none;" on "content" and "border-top: 0 none;" on "footer" doesn't cure this, there are other possible solutions.
-Instead of a background-image tiling along the y-axis (vertically) (-did you declare "img {border:0;}" in your STYLE? You should have or else the image might be picking up these from IE), why not declare a "border-right:1px dotted #252525;" on your content DIV and create the dotted border that way. You could cleverly devise a way to nest one DIV with this inside of a another div with this, and the outer expands as content is added to the inner, and acheive a 'double dotted border' that way...

[invisible kid]

Originally Posted by WebJoel

It is difficult to look at an image and diagnose a problem's solution. I am not really sure what your complaint is, from just looking at the image. But I do see a infinitesimally small little 'gappy' thing between the vertical dotted border on the right-side of what I'd call the "content" area. If "border-bottom: 0 none;" on "content" and "border-top: 0 none;" on "footer" doesn't cure this, there are other possible solutions.
-Instead of a background-image tiling along the y-axis (vertically) (-did you declare "img {border:0;}" in your STYLE? You should have or else the image might be picking up these from IE), why not declare a "border-right:1px dotted #252525;" on your content DIV and create the dotted border that way. You could cleverly devise a way to nest one DIV with this inside of a another div with this, and the outer expands as content is added to the inner, and acheive a 'double dotted border' that way...

Thanks for your reply.

Just to clarify, where you see the gap in the dotted line, that is where the content area ends and the footer area begins.

The content area has the 2-pixel background tile repeating vertically.

The dotted line you see is part of the background tile image, not the dotted line border property in HTML.

The footer area is just an image.

The problem is that sometimes only 1 pixel of the 2 pixel background is displayed. If, for example, the height of the content area expands to 201 px rather than 200 px.

This is what's creating that gap.

I think the solution you've proposed might work, but it would mean a serious re-working of the page design as the dots wouldn't line up as they do at present.

[WebJoel]

These 'two dot' background image(s), -are the dots horizontal to each other? Side-by-side? If so, can this 2-px graphic be made 1-px?

Is the graphic like
..
..

?

Is so, can you try:
..

?
Be sure to have:
<style>
img {border:0; padding:0; margin:0;}
</style>
(being over-safe here, -might catch something being defaulted into img pararmeter)

[invisible kid]

Originally Posted by WebJoel

These 'two dot' background image(s), -are the dots horizontal to each other? Side-by-side? If so, can this 2-px graphic be made 1-px?

Is the graphic like
..
..

?

Is so, can you try:
..

?
Be sure to have:
<style>
img {border:0; padding:0; margin:0;}
</style>
(being over-safe here, -might catch something being defaulted into img pararmeter)

Hi Joel,

The dot background is:

.
space

So when tiled it goes:

.
space
.
space
.
space

So, as you can see I need to keep it 2 pixels high.