I have a parent element that has dynamic text in it that needs to be confined into a certain area. I had users that where writing sentences without using spaces (example:yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy etc...) This was breaking the structure of my styled text area. \[code\]#ProfileCommentBody{ width:500px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333333; margin:15px 0px 0px 20px; float:left; background-color:#EAF7FB; padding:10px 10px 10px 10px; position:relative; overflow:hidden;}\[/code\]I used \[code\]overflow:hidden\[/code\],as you can see above in the css code, and it solved the problem but created a new problem. I have another another element that is a image that is absolutely positioned that completes the style of my speech bubble ( the above element is the speech bubble) and when I have the above element on \[code\]overflow:hidden\[/code\] it make that image disappear. I have tried z-index and that does not work.\[code\].ProfileCommentTail{background:url(images/speechBubbleTail.png) no-repeat top left; width:15px; height:10px; position:absolute; top:20px; left:-15px;}\[/code\]Is there a different option to use besides \[code\]overflow:hidden\[/code\] or is there something I can do to counteract the unwanted part of what the \[code\]overflow:hidden\[/code\] is doing?html structure:\[code\] <div id='ProfileCommentBody' class='round_10px'> <div id='CommentNameProfile'> <div class='ProfileCommentTail'> </div> <a href='http://www.blahblahblah.org/Profile.php?id=<?php echo $poster->id; ?>'> <?php echo $poster->first_name. " ". $poster->last_name; ?> says... </a> </div></div>\[/code\]Here is an example of an imgage of what it is doing now,which is wrong (missing speech bubble tail to the right of the polaroid, and the left of the speech bubble) overflow:hidden is causing this to disappear, but fixing another problem I was having:
here is what it is SUPPOSED to look like, notice the tiny blue speech bubble tail connected to the speech bubble:
