Jump to content
xisto Community
Sign in to follow this  
kvarnerexpress

Bgimage Is Buggy

Recommended Posts

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

Share this post


Link to post
Share on other sites

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;}

Share this post


Link to post
Share on other sites

.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? :P (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.)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.