Question

This is the testsite i am working on:
http://test.pafo.net/

As you can see, it cuts the middle line in half and i am trying to sort out why it does that.
The body backgroundcolor is just for testing.

The layout idea is

<div> - entire box
  <div /> - top (image with the start line)
  <div> - content
    <div> - left (test 2 on the page)
    <div> - middle (this is 12px in width and only has the line in it)
    <div> - right (menu on the page)
  </div>
  <div> - bottom
    <div> - left (copyright)
    <div> - right (end of the line)
  </div>
</div> - end box

Another thing is Firefox. If i got an empty div (like the middle div above) then i need to add a space in it for Firefox to show it. If i got nothing in it, then Firefox won’t show it.

Answer 1

You can fix the issue by putting the repeating image in your site_page CSS class, as this has the height that you need:

.site_page {
    background:url("../images/bg/bg_main_middle.png") repeat-y scroll 788px 0 #FFFFFF;
}

You can then get rid of the site_middle div.