5 Replies - 879 Views - Last Post: 18 April 2013 - 10:34 AM

#1 sharkhead  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 15
  • Joined: 09-April 13

CSS content background coming double.

Posted 15 April 2013 - 04:47 AM

On the content area, I wrote some text and gave appropriate line height and etc. Then made a background image of 70% transperancy. Used a blue gradient background.
After doing this, gave the round border effect.
But the white transparent background is getting overlapped on each other on the text area. Any idea whats going wrong?
(refer screenshot and code)
The CSS code.
html,body{margin:0;padding:0}
body{
	font: 76% arial,sans-serif;
	text-align:center;
	}
	 

	 
p{margin:0 10px 10px;}
a{padding:10px;}


 


div#container{
	width:800px;
	margin:0 auto;
	text-align:left;
	background:url() repeat;
	
	}

div#content{
	float:right;
    clear:right;
    width:549px;
    margin:0px 0px 5px 0px;
	
	line-height:1.5;
	line-width:1.5;
	background:url(transperancy70.png) repeat;
	border-radius: 05px;
    -moz-border-radius: 05px;
    -webkit-border-radius: 05px;
	}



Thanks,
/Shark

Attached image(s)

  • Attached Image


Is This A Good Question/Topic? 0
  • +

Replies To: CSS content background coming double.

#2 Anthonidas  Icon User is offline

  • D.I.C Head

Reputation: 30
  • View blog
  • Posts: 218
  • Joined: 25-April 11

Re: CSS content background coming double.

Posted 15 April 2013 - 05:26 AM

please post your HTML-Code aswell...

could be due to your width of the container and content, but I can't confirm if I don't see the html code to be sure.
Was This Post Helpful? 0
  • +
  • -

#3 sharkhead  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 15
  • Joined: 09-April 13

Re: CSS content background coming double.

Posted 16 April 2013 - 01:39 AM

Here you go...
<div id="container">

   <div id="header">
      <iframe src="file:///D:\Sujay\New Folder (4)\PD\container.html" width="800"  height="80"  frameborder="0" ></iframe>
   </div>

   <div id="navbar">
      <iframe src="file:///D:\Sujay\New Folder (4)\PD\navbar.html" width="800"  height="40"  frameborder="0" ></iframe> 
   </div>

    <div id="content">
    
      <iframe src="file:///D:\Sujay\New Folder (4)\PD\content.html" width="545" height="1000"  frameborder="0" ></iframe>
    </div>
  

    <div id="sidebar1">
        <iframe src="file:///D:\Sujay\New Folder (4)\PD\sidebar1.html" width="245" height="500"  frameborder="0" ></iframe>
     </div>
     
    <div id="sidebar2">
        <iframe src="file:///D:\Sujay\New Folder (4)\PD\sidebar2.html" width="245"  height="250" frameborder="0" ></iframe>
    </div>

    <div id="footer">
        <iframe src="file:///D:\Sujay\New Folder (4)\PD\footer.html" width="800" height="100"  frameborder="0" ></iframe>
    </div>
    
    
</div>


I've used iFrames. SO this is contents iFrame--
<html>
<link type="text/css" rel="stylesheet" href="index.css" />
  <div id="content">
    <p><strong>1) Content here.</strong>The are used for making jackets, purses etc. We can see them in a zoo.</p>
      
    </div>
  
</html>



This is not only happening with content, but with everything within container.
Was This Post Helpful? 0
  • +
  • -

#4 sharkhead  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 15
  • Joined: 09-April 13

Re: CSS content background coming double.

Posted 17 April 2013 - 12:22 AM

*bump*
Any clue whats wrong?
Was This Post Helpful? 0
  • +
  • -

#5 sharkhead  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 15
  • Joined: 09-April 13

Re: CSS content background coming double.

Posted 18 April 2013 - 09:26 AM

Can nobody help me in this?
*bump*
?? If not this.... Some other method of giving background image?
Was This Post Helpful? 0
  • +
  • -

#6 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3354
  • View blog
  • Posts: 11,354
  • Joined: 12-December 12

Re: CSS content background coming double.

Posted 18 April 2013 - 10:34 AM

I suspect issues arise because of the way you are using iframes to layout your site. They are not designed to work this way and you would be better served IMO by using a server-side language to present different content; effectively, using a content management system (or framework).

However, for your current issue, I would start by resetting all margins, padding and borders, to see where you stand:

<style type="text/css">
    iframe {
        margin: 0; padding: 0; border: 0;
    }
</style>

I would do the same for their containing divs as well.

This post has been edited by andrewsw: 18 April 2013 - 10:35 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1