CSS not extending?

Question

I am working on a project I created myself (www.deepsecurity.org) which people will be able to paste stuff and much more in the future.

I have a problem with this project though, if you check the site and check the "Th Bible" paste someone posted, you can clearly see that the post goes out of the black screen and you cannot read the rest anymore.

How can I fix this? Been trying for hours.

I am using Flask + SQLAlchemy + WTForms and Pygments.

Take a look at the css (I write very back css, sorry about that)

style.css

@import url('topbar_style.css'); @import url('errors.css'); @import url('showcodes.css'); @import url('addcode.css'); @import url('highlight.css'); @import url('about.css'); @import url('login.css'); html { font-family: 'Lucida Console', Monaco, monospace; font-size: 13px; color: #FFFFFF; background: #F2F2F2 url('images/bg_body.png') repeat-x 0 0; display: inline-block } .page { overflow: hidden; margin: 3em auto; width: 950px; display: inline-block border: 5px solid #ccc; padding: 0.8em; border: 1px solid #383838; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #202020; } div.codes h1 { font-family: 'Lucida Console', Monaco, monospace; margin: 0px; color: #F2F2F2; border-bottom: 2px solid #eee; } h2 { font-size: 15px; } div.about-text { white-space: pre; } div.codes { white-space: pre; }

showcodes.css

.codes { display: inline; list-style: none; margin: 0; padding: 0; } .codes li { margin: 0.2em 1em; }

This is what happens after changing what you guys told me to

perhaps because the text is wrapped in pre tags, and that means that line breaks and spaces are preserved. Do you have to use <pre> ? — Don
– Don, Commented Jul 3, 2012 at 20:40
I have tried doing this, nothing, the text still goes out of the black place.. I have also checked that before, and nothing, very confused! — user689383
– user689383, Commented Jul 3, 2012 at 20:56

webdesserts · Accepted Answer · 2012-07-03 21:03:45Z

2

Ok, so, you have two problems in this page:

style.css , line 44,
```
div.codes { white-space: pre; } 
```
delete that.
In the "Bible" part of the page, the paste has a <code><pre> tag, which basically forces the text to be "unformatted" http://reference.sitepoint.com/html/pre you can either change all code/pre elements to div's or p's, or you can simple add this line to your css file:
```
code { white-space: normal; } 
```

problem solved!

edited Jul 3, 2012 at 21:03

webdesserts

1,0239 silver badges22 bronze badges

answered Jul 3, 2012 at 20:43

George Katsanos

14.3k18 gold badges71 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user689383 Over a year ago

I have tried doing this, nothing, the text still goes out of the black place.. I have also checked that before, and nothing, very confused!

George Katsanos Over a year ago

its'not EITHEr you remove the line OR you add the second one. ITS BOTH! (just did it, it works.)

user689383 Over a year ago

Really tried dude, nothing happening here! I wonder if I am doing anything wrong..

George Katsanos Over a year ago

I just went on the website and the content is not there any more. Did you manage to make it work? I don't know if you get it; you use <code> and <pre> these tags by default don't wrap the lines because it's supposed to be "what you write is what you see" (for code)

Joel Kinzel · Accepted Answer · 2012-07-03 20:48:16Z

It is because of the white-space CSS declaration. To fix it use the following:

.codes code { white-space:pre-wrap; }

This will keep the pre-formatted text as is, but force the it to wrap.

dezman · Accepted Answer · 2012-07-03 20:44:06Z

I believe it is because white-space: pre only follows line breaks that were preformatted, change it to white-space: normal;

Don · Accepted Answer · 2012-07-03 21:48:45Z

0

You can't read the rest of the text outside the div because of
```
.page { overflow: hidden; } 
```
And it isn't wrapping because of those darn pre tags. Remove them.
Also, change
```
div.codes { white-space: pre; } 
```

to