Forums
View unanswered posts | View active topics It is currently Wed Jul 23, 2014 5:17 am



Reply to topic  [ 2 posts ] 
 Contents of div with border-radius not staying inside div 
Author Message

Joined: Tue May 01, 2012 8:12 am
Posts: 6
Post Contents of div with border-radius not staying inside div
I am having difficulty getting border-radius to work properly. I cannot upload screen shots unfortunately.

I have a page with a series of divs like the one below and with that CSS. The text in the first div displays partly outside of the top of the div. The subsequent ones on the page seem to appear properly. I have tried w/ and w/o position relative. I have also tried with and without the box-shadow. If I remove border-radius and only have the shadow then it works fine. I put extreme margins to make the problem easier to see, but it happens even with smaller margins.

I have observed that resizing the page after loading it seems to correct the problem, but I cannot make it stop happening.

div.style {
width: 600px;
background-color: #ffffff;
border: 1px #ddd solid;
margin: 125px;
padding: 15px;
border-radius: 25px;
box-shadow: #ccc 0 0 .25em;
behavior: url(PIE.htc);
position: relative;
}

<div class="style">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac dui quam. Donec tincidunt sapien lectus. Integer hendrerit, magna ut convallis accumsan, quam enim luctus eros, in euismod justo massa et sem. Sed hendrerit aliquam nisi, id vulputate nisl accumsan ac.</p>
<p>Lorem ipsum dolor sit amet:</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Mauris ac dui quam.</li>
<li>Donec tincidunt sapien lectus.</li>
<li>Integer hendrerit, magna ut convallis accumsan, quam enim luctus eros, in euismod justo massa et sem.</li>
<li>Sed hendrerit aliquam nisi, id vulputate nisl accumsan ac.</li>
</ul>
</div>


Tue May 01, 2012 8:36 am
Profile

Joined: Tue May 01, 2012 8:12 am
Posts: 6
Post Re: Contents of div with border-radius not staying inside di
The solution that I found was to move the margin to its own div around each of my content divs.


Tue May 01, 2012 9:39 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 2 posts ] 

Who is online

Users browsing this forum: Bing [Bot] and 3 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.