Bgimage Is Buggy

I am trying to create margins for text placed in a div with a background image. The margin on the right doesn't work at all and the margin on the left works but creates a weird repetition of the left side of the image outside of the div.

here is the html
Code:

<div id="maincontent">	<img src="../../images/pol_header.jpg">		<div class="politics">	<span class="robthought">Friday, October 15, 2005</span> 	<!--- This is where the story title gif goes -->	<br><img src="../../images/article_image.png" alt=" Iraq result delay over fraud fear">	<br><a href="http://news.bbc.co.uk/1/hi/world/middle_east/4351680.stm" target="_blank">BBC News</a>	<br><span class="body3">	Iraqi election officials say the formal result of the country's vote on a new constitution will be delayed, amid accusations of fraud.  	Officials said turnout from some areas seemed abnormally high and ballots needed to be double-checked.		Some Sunni Arab politicians have alleged that corrupt practices were allowed to boost the Yes vote.</span>	</div><!-- Politics --><img src="../../images/pol_footer.jpg"></div><!-- Main Content -->

and here is my css

Code:

#maincontent  {float:left;    	width:500px;    	clear:right;}.politics    	{width:500px;      background-image:url(imagespol_back.jpg);      padding:0 50px 0 45px;      text-align:left;}

so if anyone could tell me what i am doing wrong or why the code is acting like this that would be a great help.

thanks!kvarnerexpress

You've got no margins in your CSS. Other than that, almost impossible to give accurate advice without seeing the actual page.

Tyssen is right, I have no clue what you are trying to do here, so I can't help! Sorry...

What do you mean?

 

I am trying to create margins for text placed in a div with a background image.

maybe try this code instead:

 

.politics     {width:500px;     background-image:url(imagespol_back.jpg);     padding-left: 5px;     padding-top: 0px;     padding-left: 5px;     padding-left: 0px;     text-align:left;}

.politics     {width:500px;     background-image:url(imagespol_back.jpg);     padding-left: 5px;     padding-top: 0px;     padding-left: 5px;     padding-left: 0px;     text-align:left;}

I think you meant padding-right and bottom rather than three paddding-lefts, didn't you? (Incidentally, it can be written as: padding 0 5px which covers all four sides as bottom mirrors top and left mirrors right unless you specify values for them.)