Connecting Tech Pros Worldwide Help | Site Map

stopping the child control from exceeding parent div element

  #1  
Old January 3rd, 2009, 09:40 AM
Newbie
 
Join Date: Dec 2008
Posts: 5
i have a div element with a child control in it which gets populated with data

depending on data teh control expands and also the div. if i set the div width the data overflows in the extended control
i need to use clip property
i tried setting it but i am not getting teh result

clip:rect(0 30 30 0);

how do i set the parent and child element
  #2  
Old January 3rd, 2009, 03:55 PM
drhowarddrfine's Avatar
Expert
 
Join Date: Sep 2006
Posts: 5,521

re: stopping the child control from exceeding parent div element


This is not a html or css question; or at least I don't know what language you are using.
  #3  
Old January 3rd, 2009, 06:37 PM
Atli's Avatar
Moderator
 
Join Date: Nov 2006
Location: Iceland
Posts: 3,701
Provided Answers: 4

re: stopping the child control from exceeding parent div element


Can we see your code?
It's kind of hard to see the problem without it.

Note, that the clip property won't work if you set the overflow property to "visible".
See how it is supposed to work here.
  #4  
Old January 3rd, 2009, 07:39 PM
drhowarddrfine's Avatar
Expert
 
Join Date: Sep 2006
Posts: 5,521

re: stopping the child control from exceeding parent div element


Oops. Talk about jumping the gun. I wasn't thinking when I made my reply.

As Atli said, we need to see the markup or have a link. We also need to know which browser you are using. 'clip' only works in modern browsers and not IE.
  #5  
Old January 3rd, 2009, 08:17 PM
Atli's Avatar
Moderator
 
Join Date: Nov 2006
Location: Iceland
Posts: 3,701
Provided Answers: 4

re: stopping the child control from exceeding parent div element


Quote:
Originally Posted by drhowarddrfine View Post
'clip' only works in modern browsers and not IE.
Are you sure?
I just tested a very basic example in both IE6 and IE7 and they both seemed to do fine with it.

Not that it would greatly surprise me if there were some bugs lurking around that I missed.
  #6  
Old January 3rd, 2009, 09:08 PM
drhowarddrfine's Avatar
Expert
 
Join Date: Sep 2006
Posts: 5,521

re: stopping the child control from exceeding parent div element


I did not try it and I've never used it but here is my reference.

EDIT: A place I cannot link to says this:
Quote:
Internet Explorer for Windows versions up to and including 7 do not support the recommended syntax for the rect() notation. However, they do support a deprecated syntax where the arguments are separated by whitespace rather than commas.
Internet Explorer for Windows versions up to and including 7 don’t support the value inherit.
  #7  
Old January 3rd, 2009, 10:56 PM
Atli's Avatar
Moderator
 
Join Date: Nov 2006
Location: Iceland
Posts: 3,701
Provided Answers: 4

re: stopping the child control from exceeding parent div element


Ok, I see.

After messing around a bit more with my code, I can confirm that quote.
Without the commas, it works with IE6 and IE7, but then it won't validate. If that doesn't bother you, all the other browsers also accept the comma-free version.

However, if you throw IE into quirks-mode (by omitting the doctype, for instance), it suddenly starts working with the standard method.
It's like they are ignoring the standards on purpose...
  #8  
Old January 3rd, 2009, 11:13 PM
drhowarddrfine's Avatar
Expert
 
Join Date: Sep 2006
Posts: 5,521

re: stopping the child control from exceeding parent div element


Quote:
Originally Posted by Atli View Post
It's like they are ignoring the standards on purpose...
Of course they are! Always have. IE is the worst browser on the planet.
  #9  
Old January 5th, 2009, 02:14 PM
Expert
 
Join Date: Nov 2007
Posts: 126

re: stopping the child control from exceeding parent div element


Try explicitly defining the width and placing an overflow:hidden; CSS propery on the parent element.

Expand|Select|Wrap|Line Numbers
  1. <!-- if this were the parent div -->
  2. <div id="parentDiv" style="width: 500px; overflow:hidden;">
  3.    <[data]>
  4. </div>
  5.  
Reply

Tags
child, clip property, div, parent