CSS Background repeat problem

[devilzfan300]

This is the first time where IE has it right and firefox is messed up!

Anyways, I am referring to my site www.swaythevote.com

In firefox, the background image repeats a little after each expandable box. I am not sure why. I cannot fix it and I am not very good with css background tags. Any advice?

The html code:

<div class="content">
<img src="images/divtop.jpg" width="700" height="93" border="0" alt="divtop" />
TOP ISSUES RESULTS HERE IN TEXT AND GRAPHS
<img src="images/divbottom.jpg" width="700" height="116" border="0" alt="divbottom" /></div>

<div class="content">
<img src="images/divtop2.jpg" width="700" height="93" border="0" alt="divtop2" />
<dl class="info">
<dd class="info">
<ul class="info">
<li class="info">Crime</li>
<li class="info">Economy</li>
<li class="info">Education</li>
<li class="info">Energy</li>
</ul>
</dd>
<dd class="info">
<ul class="info">
<li class="info">Environment</li>
<li class="info">Federal Budget</li>
<li class="info">Healthcare</li>
<li class="info">National Defense</li>
</ul>
</dd>
<dd class="info">
<ul class="info">
<li class="info">Social Security</li>
<li class="info">Taxes</li>
<li class="info">Terrorism</li>
<li class="info">Welfare</li>
</ul>
</dd>
</dl>
<img src="http://www.swaythevote.com/images/divbottom2.jpg" width="700" height="28" border="0" alt="divbottom2" /></div>

</div>

The CSS:

.content {
	width: 700px;
	border: 0;
	background: #FFFFFF url(../images/divbg.jpg) repeat-y 50% 0;
	padding: 0px;
	margin: 0px;
	text-align: center;
}

.info dl {
  clear:both;
  width:728px;
  height:8em;
  margin: 0px auto;
}
.info dd {
  width:33%; 
  float:left; 
  margin:0 auto;
}
.info ul li {
  display: block;
  list-style-type: none;
  line-height: 30px;
}

Thanks in advance

[Tomassi]

I take it you mean your shadow image?

If so, I would change the buildup a little, cause I've had this problem too and couldnt find a fix for it.
You could place 3 divs beneath each other:
top one containing your header- then a div with the repeating background and then the footer.

[Taltos]

Hey devilsfan, don't know if you already solved this or not. In your ".content" definition, you tell it to "repeat-y". That means it will fill the available height repeating the background. If your other spacing is not absolutely perfect, you will see the beginnings of a repeat. Getting the spacing to match perfect across all browsers can be a real pain. Sounds like you just need to replace "repeat-y" with "no-repeat".

If you already figured this out then ignore me