11 Replies - 1221 Views - Last Post: 20 September 2012 - 06:35 AM

#1 adn258  Icon User is offline

  • D.I.C Addict

Reputation: 11
  • View blog
  • Posts: 761
  • Joined: 31-August 11

Div Containers Don't Work Sometimes Why?

Posted 18 September 2012 - 11:23 AM

So an issue with CSS etc. Here's the deal
Posted Image

Looking at the image above I know it's small sorry but you can see there's a CSS div class or ID with a solid border etc. The text that the div is in between is bleeding OUTSIDE THE BORDER like

<div class="xyz">
TEXT IS HERE BLEEDING OUTSIDE THAT BORDER
</div>



Sometimes the container with SQUISH THE TEXT down to fit it's size i.e. if I made that xyz contained 200px wide the text would look thin like

he
how
are
you

instead of hi how are you bleeding out.

Why does this happen? Thanks

Is This A Good Question/Topic? 0
  • +

Replies To: Div Containers Don't Work Sometimes Why?

#2 StefanOnRails  Icon User is offline

  • D.I.C Head

Reputation: 35
  • View blog
  • Posts: 105
  • Joined: 31-July 12

Re: Div Containers Don't Work Sometimes Why?

Posted 18 September 2012 - 11:35 AM

Take a look here and see if it helps you. It would be useful if you could post the full HTML & CSS sources.
Was This Post Helpful? 1
  • +
  • -

#3 adn258  Icon User is offline

  • D.I.C Addict

Reputation: 11
  • View blog
  • Posts: 761
  • Joined: 31-August 11

Re: Div Containers Don't Work Sometimes Why?

Posted 18 September 2012 - 02:23 PM

View PostStefanOnRails, on 18 September 2012 - 11:35 AM, said:

Take a look here and see if it helps you. It would be useful if you could post the full HTML & CSS sources.


I already knew that stuff no offense it doesn't explain why it bleeds. I don't really want to show what I have as it would give away my site and no offense I don't want to do that here. That said I'm wondering if anyone else has has had similar experiences with having bleed issues when it comes to creating CSS Div's
Was This Post Helpful? 0
  • +
  • -

#4 Nullified  Icon User is offline

  • New D.I.C Head

Reputation: 13
  • View blog
  • Posts: 49
  • Joined: 18-September 12

Re: Div Containers Don't Work Sometimes Why?

Posted 18 September 2012 - 02:39 PM

I don't understand your issue. You want to know why if you shorten a div's width to a specified px value it wraps the words to the next line if the text width if longer then the div width? That is standard. a div a block style element, thus if you specify a width, that is not a minimum width it is a static width. Try auto.
Was This Post Helpful? 1
  • +
  • -

#5 adn258  Icon User is offline

  • D.I.C Addict

Reputation: 11
  • View blog
  • Posts: 761
  • Joined: 31-August 11

Re: Div Containers Don't Work Sometimes Why?

Posted 18 September 2012 - 10:10 PM

View PostNullified, on 18 September 2012 - 02:39 PM, said:

I don't understand your issue. You want to know why if you shorten a div's width to a specified px value it wraps the words to the next line if the text width if longer then the div width? That is standard. a div a block style element, thus if you specify a width, that is not a minimum width it is a static width. Try auto.


No that's what I'm saying friend I do specify a width like say 500px and the text within that supposed 500px width border bleeds outside the border like the div wasn't even there even though it is
Was This Post Helpful? 0
  • +
  • -

#6 adn258  Icon User is offline

  • D.I.C Addict

Reputation: 11
  • View blog
  • Posts: 761
  • Joined: 31-August 11

Re: Div Containers Don't Work Sometimes Why?

Posted 19 September 2012 - 01:06 AM

So I figured out the general idea of what is wrong. It has to do with content text overflow and setting overflow to hidden etc. The problem is some users might add unusually large comments making them bleed over or if I set this to scroll or auto those scrolls look ugly.

I don't know how sites solve this problem like this site to stop text overflow all together good question I guess.
Was This Post Helpful? 0
  • +
  • -

#7 StefanOnRails  Icon User is offline

  • D.I.C Head

Reputation: 35
  • View blog
  • Posts: 105
  • Joined: 31-July 12

Re: Div Containers Don't Work Sometimes Why?

Posted 19 September 2012 - 01:24 AM

Try to add word-wrap: break-word; in your div CSS rule and see if it works. As I said before it would be useful to post more of your HTML / CSS code. If you don't want to post the entire page source it's ok, but you need to understand that working with CSS can be tricky sometimes and we cannot predict what's your problem without viewing more of your code. Maybe you have a markup problem, are you sure all your tags are properly enclosed (well, those who require that)? Are there any floats in your CSS rules? If you don't want to post the whole source you can do something like this:

HTML:
<div id="container">
   ....
   <div class="xyz">
       <p>some text here</p>
   </div>
</div>

CSS:
.xyz{
  width: 500px;
  ...
}


Was This Post Helpful? 2
  • +
  • -

#8 RudiVisser  Icon User is offline

  • .. does not guess solutions
  • member icon

Reputation: 1003
  • View blog
  • Posts: 3,562
  • Joined: 05-June 09

Re: Div Containers Don't Work Sometimes Why?

Posted 19 September 2012 - 01:49 AM

View Postadn258, on 19 September 2012 - 09:06 AM, said:

It has to do with content text overflow and setting overflow to hidden etc.

This. As you've already figured out, overflow's default value is visible, which is why your overflow.. is.. visible! :D

No but really that's exactly the reason good job for working it out on your own.

View Postadn258, on 19 September 2012 - 09:06 AM, said:

I don't know how sites solve this problem like this site to stop text overflow all together good question I guess.

I'm not sure so much what you mean here, sites are designed to not require overflow and/or will just scroll when required. What exactly is it that you're trying to achieve?

(Just read the rest of your post again) Users adding comments should be fine, simply truncate them to a certain length using a server-side language, output '...', and upon hover pop up the full comment in a floaty div.
Was This Post Helpful? 0
  • +
  • -

#9 Nullified  Icon User is offline

  • New D.I.C Head

Reputation: 13
  • View blog
  • Posts: 49
  • Joined: 18-September 12

Re: Div Containers Don't Work Sometimes Why?

Posted 19 September 2012 - 09:56 AM

Yes, glad to see you figured it out.
Was This Post Helpful? 0
  • +
  • -

#10 adn258  Icon User is offline

  • D.I.C Addict

Reputation: 11
  • View blog
  • Posts: 761
  • Joined: 31-August 11

Re: Div Containers Don't Work Sometimes Why?

Posted 19 September 2012 - 12:02 PM

View PostStefanOnRails, on 19 September 2012 - 01:24 AM, said:

Try to add word-wrap: break-word; in your div CSS rule and see if it works. As I said before it would be useful to post more of your HTML / CSS code. If you don't want to post the entire page source it's ok, but you need to understand that working with CSS can be tricky sometimes and we cannot predict what's your problem without viewing more of your code. Maybe you have a markup problem, are you sure all your tags are properly enclosed (well, those who require that)? Are there any floats in your CSS rules? If you don't want to post the whole source you can do something like this:

HTML:
<div id="container">
   ....
   <div class="xyz">
       <p>some text here</p>
   </div>
</div>

CSS:
.xyz{
  width: 500px;
  ...
}



Wow!! Yes that keeps the text from overflowing all together even if someone enters a long word like adklfjsklfjdkljfkljfkljdsflkajsdlkfsadjskfsajdlfk etc. as spam. I really appreciate your help friend +++; It will probably still be good for me to handle overflow with hidden if I allow users to post images. I was also thinking of using php to wrap ever comment in it's OWN DIV!! I'm wondering if there's anything wrong with this idea but I can't think of anything. The reason this might be good is instead of ruining the whole comment section say by someone posting a large image it can only ruin that one comment and add scroll bars to it. Just a thought I don't know.
Was This Post Helpful? 0
  • +
  • -

#11 StefanOnRails  Icon User is offline

  • D.I.C Head

Reputation: 35
  • View blog
  • Posts: 105
  • Joined: 31-July 12

Re: Div Containers Don't Work Sometimes Why?

Posted 20 September 2012 - 01:13 AM

View Postadn258, on 19 September 2012 - 09:02 PM, said:

Wow!! Yes that keeps the text from overflowing all together even if someone enters a long word like adklfjsklfjdkljfkljfkljdsflkajsdlkfsadjskfsajdlfk etc. as spam. I really appreciate your help friend +++; It will probably still be good for me to handle overflow with hidden if I allow users to post images. I was also thinking of using php to wrap ever comment in it's OWN DIV!! I'm wondering if there's anything wrong with this idea but I can't think of anything. The reason this might be good is instead of ruining the whole comment section say by someone posting a large image it can only ruin that one comment and add scroll bars to it. Just a thought I don't know.

Yeah, wrapping comments into their own divs seems to be a good idea, this way you could style them to look like a Posted Image or something similar. However, they should still be rendered inside a "container" div, this will give you more control over comment section. As for "posting large image" problem, overflow: hidden will crop any content that is rendered outside regardless of it's type (text,img etc.), but I guess you can add scrolls if you want to allow user to view the whole image. By the way, you can control comment's text length via PHP strlen() function, but if add an image extra characters will be added as well.
Was This Post Helpful? 0
  • +
  • -

#12 Nullified  Icon User is offline

  • New D.I.C Head

Reputation: 13
  • View blog
  • Posts: 49
  • Joined: 18-September 12

Re: Div Containers Don't Work Sometimes Why?

Posted 20 September 2012 - 06:35 AM

View PostStefanOnRails, on 20 September 2012 - 04:13 AM, said:

By the way, you can control comment's text length via PHP strlen() function, but if add an image extra characters will be added as well.
I would use substr_replace($string, '...', 10, -1) as strlen will just tell you the length in characters of the string.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1