style_system | Fixed: Bizarre Entry Text Wrapping.. Help?

EDIT: Apparently there was a p { width: 20px; } line that came with where ever I grabbed this from as my base to work from... yeah. Removing that fixed it and I can't believe I didn't see that. *face palm* Thank you all for taking a look.

So I am moderately clueless at all of this, but decided to try my hand at a a custom css style based on blanket. All was going well, things looked like I wanted, and then I saw a particular entry on my reading page that had completely insane text wrapping. Now if all the entries on my reading page had been doing this, I could probably figure I had issues with margins or paddings or what not, but it's only some of my reading list entries and I just, IDEK where to start to look for what's going on and why.

Help?

Screenshot showing the end of a normally wrapping entry and the start of a messed up one

My mostly done css code

body {padding: 0; margin: 0; text-align: center; color: #0d0b16; background: #1a6884 url(http://colourlovers.com.s3.amazonaws.com/images/patterns/3/3267.png); background-attachment:fixed; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, sans-serif; overflow-x:hidden; overflow-y:auto; }

a, a:active {text-decoration: none; color: #278faf; outline:0;}
a:hover {color: #a8c048;}
p {width: 20px;}

#canvas {margin: 10px auto 3em auto; text-align: left; padding: 0;}
#content {padding: 0 0 20px 0; margin: 0;}
#primary {width: 88%; margin: 0 auto;  z-index: 0; padding: 0;}

/*--- header + footer ---*/
#header {width: 88%; margin: 0 auto 1em auto; background-color: #0d0b16;}
#header>.inner {border-left: 10px solid #000000; padding: 2em 2em;}
#footer {display: float; clear: both; margin: 0 auto 0 auto; width: 88%;}
.navigation {padding: 10px; text-align: center; color:#278faf;margin-bottom:20px;}
.topnav {display:none!important;}

li.page-back, li.page-forward, .page-top {list-style: none; padding: 0.1em; margin: 0 0 0 0; background: #0d0b16; bottom: 2.5em;; text-transform:uppercase; font-size: 0.665em; }
.page-top {position:fixed; right:46.5%;z-index: 5;}
li.page-back {position: fixed; left: 0em;  text-align:left; padding-left:6.25%; z-index: 5;}
li.page-forward { position: fixed; right: 0em;  text-align: right; padding-right:6.25%; z-index: 5;}
li.page-separator {display: none;}
div.navigation ul {display: inline; padding: 0; margin: 0 0 0 0; align: center;}

/*--- header texts ---*/
div#header h1#title {font-weight: normal; text-transform: uppercase; letter-spacing: 0; padding: 0; margin: 0; color: #a8c048; font-family: sans-serif; font-size: 1.2em;}
div#header h2#subtitle {font-weight: normal; text-transform: lowercase; letter-spacing: 1px; padding: 0; margin: 0; color: #278faf; font-family: sans-serif; font-size: 1em;}
div#header h2#pagetitle {font-weight: normal; text-transform: uppercase; letter-spacing: 1px; padding: 0; margin: 1em 0 0 0; color: #278faf; font-family: sans-serif; font-size: 1em;}

/*--- navigation links ---*/
div.module-navlinks {position: fixed; bottom: 0; z-index: 2;  padding-bottom: 0.5em; width: 100%; margin: 0 auto; color: #a8c048;background-color: #0d0b16; text-align:center;  padding-top: 1.4em;}
div.module-navlinks ul.module-list {display: inline; padding: 0; margin: 0 0 0 0; text-transform: uppercase;  }
div.module-navlinks ul.module-list li {display: inline; margin: 0 0 0 0; list-style: none; padding-right; 13px; padding-left: 13px; font-size: 0.665em; }

/*--- modules ---*/
#secondary {width: 88%; margin: 0 auto; z-index: 0; padding: 0; background-color: #ffffff; display:none;}
#secondary>.inner {border-left: 0px solid #F2EBD7; padding: 4em 2em; display:none}

#secondary .module {float: left; margin: 2em 1em;}
#secondary .module-header, #secondary .module-header a {font-family: arial!important;color: #099aaf;}
#secondary .separator-after {clear: both;}
.module-tags_cloud {margin: 3em 0; width: 100%; float: none;}
.module-tags_cloud .module-content {padding: 0 3em 1em 3em;}

#secondary .module-content {text-align: left;}
#secondary .module-content ul { list-style: outside; margin-left: 1em;  padding-left: 0;}
#secondary .module-content li {margin: .5em 0;}
.module-photo .module-content {text-align: center;}
.module-user-links .module-content {text-align: center;}
ul.userlite-interaction-links {list-style: none; margin-left: 0; padding-left: 0;}
ul.userlite-interaction-links li {display: inline; padding: 0 .20em;}
.module-credit {font-family:arial!important;}
.module-credit dt, .module-credit dd {display: inline; margin: 0; padding: 0;}
.module-credit dt {font-weight: normal; margin-right: 0.5em;}

/*--- entry ---*/
div.entry {padding-top: 10px; padding-left: 25px; padding-right: 25px; padding-bottom: 10px; margin: 10px 0 10px 0; border-left: 0px solid #F2EBD7;background-color: #ffffff;}
div.entry-content {margin: 40px 0 0 0;padding-bottom: 5px; background-color: #ffffff; font-size: 0.82em;}
.entry-content img {max-width:90%;}
.entry a:visited {color: #1a6884;}
.entry a:hover, a:visited a:hover {color: #a8c048;}
.entry a:active, a {color: #278faf;}

div.header {background-color: #ffffff; padding: 0; margin: 10px 110px 10px auto;  }
h3.entry-title {font-weight: normal; text-transform: none; letter-spacing: -1; padding: 0; margin: 5px auto 10px auto; font-family: sans-serif; font-size: 1.3em; color: #1a6884;background-color: #ffffff; }
h3.entry-title a {color: #1a6884;background-color: #ffffff;}

div.metatype {margin: 5px 0 20px 0; vertical-align:middle;}

.datetime {font-size: 0.7em; font-weight: normal; text-transform: lowercase; letter-spacing: 1px; margin: 5px 0 20px 2px; color: #2d2925;background-color: #ffffff; vertical-align:middle;}
.datetime a {color: #2d2925; background-color: #ffffff;}

.userpic {display: block; float: right; margin: -4em 0px 1em 1em; vertical-align:top;}
.userpic img {max-width: 80px; height: 80px; padding: 0; border: 1px solid #2d2925; }

span.poster {font-size: 0.9em; font-weight: normal; text-transform: lowercase; letter-spacing: 0; color: #2d2925; background-color: #ffffff; }

.metadata {margin: .7em 0 0 0; background-color: #ffffff;}
div.metadata ul {padding: 0; margin: 0;}
div.metadata ul li {list-style: none; font-size: 0.7em; font-weight: normal; text-transform: lowercase; letter-spacing: 0; padding: 0; color: #2d2925;}
span.metadata-label-location, span.metadata-label-mood, span.metadata-label-music {}
span.metadata-item-location {padding: 0;}
span.metadata-item-mood {padding: 0;}
span.metadata-item-music {padding: 0;}

span.tag-text {text-transform: lowercase; color: #2d2925; font-size:.7em;}
div.tag ul {padding: 0; margin: 0; display: inline; background-color: #ffffff;}
div.tag ul li {display: inline; list-style: none; font-size: 0.7em; font-weight: normal; text-transform: lowercase; letter-spacing: 0; padding: 0; color: #c8c8c8;}

ul.entry-management-links {text-align:center; padding-top: 0; margin: .7em 0 0 0;}
ul.entry-management-links li {display: inline; list-style: none; font-size: 0.8em; font-weight: normal; text-transform: lowercase; letter-spacing: 0; padding: 0 15px 0 0; color: #c8c8c8;}

ul.entry-interaction-links {text-align: center;background-color: #ffffff;}
ul.entry-interaction-links li {display: inline; list-style: none; font-size: 0.75em; font-weight: normal; text-transform: uppercase; letter-spacing: 0; color: #2d2925; text-align: center; padding-right: 15px;}
.entry-interaction-links a {padding-right: 15px;}

.entry-content li,
.comment-content li {
    list-style-position: inside;
    }

/*--- comments ---*/
hr.above-entry-interaction-links, hr.below-reply-container {display: none;}

input, textarea {background: #ffffff; margin-left: 2px; margin-right: 2px;border: 1px solid #aaaaaa; }
textarea.textbox  {width: 100% !important; border: 1px solid #aaaaaa; }
.textbox  {width: 100% !important; border: 1px solid #aaaaaa; }

.comment {margin: 0 auto 0.1em auto; background: #ffffff; padding: 10px 20px 10px 20px; border-top: 0px solid #1a6884; font-size: 0.8em;}

.comment-content img {max-width:90%;}
.comment a:visited {color: #1a6884;}
.comment a:hover, a:visited a:hover {color: #a8c048;}
.comment a:active, a {color: #278faf;}

.comment .datetime {background-color:transparent;text-transform:lowercase; font-size: .7em;}
.comment .poster {background-color:transparent;text-transform:lowercase; font-size: 1em;}
.comment-content {padding-top:10px;padding-bottom:10px; }
.bottomcomment {display:none; margin: 0 auto 2em auto; padding: 0 2em 0 2em; border-left: 0px solid #F2EBD7; background-color: #ffffff;}
.comment-management-links, .comment-interaction-links {margin-top: 5px; padding-right: 15px;}
.comment-management-links {text-align:right; padding-right: 15px;}
.comment-interaction-links a {padding-right: 15px;}
.comment-interaction-links {text-align:right; }
.comment-management-links li, .comment-interaction-links li {display: inline; padding-right:15px;}
.multiform-checkbox {display:none;padding-top:20px!important;text-align:right!important;}
#qrform table {text-align: center;border: 0!important;}

/*--- archive ---*/

li.active {list-style: none; display: inline; text-transform: uppercase; padding: 0; margin: 0; text-align: center; color: #278faf;}
.month {margin: 1em auto 1em auto; padding: 2em 2em; background-color: #ffffff;}
.month h3 {font-size: 1em; font-weight: normal; text-transform: none; letter-spacing: 1px; padding-right: 50px; margin: 0; text-align: right; color: #a8c048;}

.page-archive div.navigation ul {display: inline; }
.page-archive div.navigation li {display: inline; list-style: none; } 
.page-month div.navigation ul {display: inline; }
.page-month div.navigation li {display: inline; list-style: none; } 
.page-archive div.navigation {background-color: #ffffff; padding: 20px 10px 20px 10px;}
.page-month div.navigation {background-color: #ffffff; padding: 20px 10px 20px 10px;}

.month th {font-size: 0.9em; font-weight: normal; text-transform: uppercase; padding: 5px; text-align: center; color: #a8c048; border: 1px solid #2d2925; background-color: #0d0b16; border: }
.month table {width: auto; cellspacing: 0; margin: auto; }
.month caption {display: none;}

.month dt {font-weight: bold; width:300px; margin-bottom:15px; margin-left:30px;}
.month dt a {font-weight:bold;}

.month dd h3 {text-align:left;}
.month dd .tag {display:none;}

td.day-empty {border: 1px solid #2d2925;}
td.day {height:50px;width:50px;padding: 0; spacing: 0; border: 1px solid #2d2925; background-color:#ffffff; vertical-align:top; text-align:center; font-weight:bold; font-family:arial; padding-top:5px;}

.month .footer {text-align:center;}
.day day-has-entries a {text-align:center;}

/*--- tags ---*/
.tags-container h2 {font-size: 1.3em; font-weight: normal; text-transform: lowercase; letter-spacing: 1px; padding-top: 20px; padding-left: 20px; padding-right: 20px; padding-bottom: 20px; margin: 0; text-align: left; color: #BABE9A;}
.page-tags  {font-size: .82em; font-weight: normal; text-transform: lowercase; letter-spacing: 1px; padding-top: 5px; padding-left: 20px; padding-right: 20px; margin: 0; text-align: left; color: #2d2925;}
.page-tags .tags-container {margin: 0; padding-left:40px; border-lbottom: 1px solid #000000; background-color: #ffffff;}
.tags-container {line-height: 100%;margin-bottom: 2px;}
.tags-container .manage-tags-link {margin-left: 20px; margin-bottom: 15px; padding-bottom: 15px;}
.page-tags .tags-container ul {margin: .5em; padding: 0;}
.page-tags .tags-container ul li {margin: 0 0 0 1em; padding: 0; list-style: none;}

/*--- etc ---*/
#lj_controlstrip {background:#0d0b16;}
#lj_controlstrip_statustext, #lj_controlstrip a {color:#a8c048;}
#lj_controlstrip_user, #lj_controlstrip_actionlinks, #lj_controlstrip_search, 
#lj_controlstrip_login, #lj_controlstrip_loggedout_userpic, #lj_controlstrip_login td, 
#lj_controlstrip td td {border:none !important;}
#lj_controlstrip input {background:#181818 !important;color:#a8c048 !important;}
#lj_controlstrip_search_input_text, #lj_controlstrip select,
#lj_controlstrip_search_submit, input#Logout, #lj_controlstrip input#xc_user, #lj_controlstrip 
input#xc_password, #lj_controlstrip input#xc_remember {background:#2d2925 !important;color:#278faf !important; border: 1px solid #278faf;}
#lj_controlstrip .ljuser a b {color:#278faf; text-decoration:none !important;}

.empty-day {width: 15px!important; padding: 2px; text-align:center!important;}
.entry-day {width: 15px!important; padding: 2px; text-align:center!important;}
.module-calendar {font-family: arial!important;}
.module-calendar th {width: 15px!important; padding: 2px; text-align:center!important;}
.module-calendar td a {color: #333333;text-align:center!important;}
.entry-permalink {display:none!important;}

#postform {padding: 20px;margin-bottom: 20px;text-align: center;}
.talkform {width: 90%!important;}
#qrformdiv {border-top: 1px solid #eeeeee; padding: 15px;}
.talkform td {text-align:left;}

div.ContextualPopup div.Inner {background:transparent!important;color: #333029 !important;border:none;padding:10px;width: 245px;font-family:"arial", sans-serif;font-size: 8pt;}
div.ContextualPopup .Content {padding:12px 15px;margin-right:80px;line-height: 1.4;background-color: #fff;}
div.ContextualPopup .Userpic {padding:10px;margin:0px;background-color: #fff;}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {text-decoration: none !important;font-weight: normal; font-family: arial;color: #777 !important;text-transform: uppercase;}
div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a:hover {text-decoration: none !important;font-weight: normal;color: #0085d2 !important;}
div.ContextualPopup .Relation {letter-spacing:0px;border-bottom: 3px solid #000;margin-bottom:4px;padding-bottom:4px;}

.manage-tags-link {margin-top: 20px;}
.module-customtext .module-content {padding-left:30px;}

Flat | Top-Level Comments Only

From:

zvi

can you give the textbox a width of, like, 200 characters and a height of 40 characters, so I can read what's in it?

sistabro

better I hope? I can make it bigger if need be. Thanks for taking a look at this! It's been driving me batty.

Hey, thanks for taking a look! Someone else spotted the problem and it is fixed now.

fulminata

I'm wondering if maybe there is a missing element/unclosed tag/etc being inherited on the next post. Do you have a link so I could see the issue live? That helps a lot.

My reading page, it's a couple entries down: http://sistabro.dreamwidth.org/read

And for more examples, the network view: http://sistabro.dreamwidth.org/network

I just refreshed and the problem disappeared on both the network & reading views. Did you do any editing?

It's possible that it was just a loading issue and the page didn't parse out properly.

Some one found the problem, a stray p {width: 20px; } I deleted it and it fixed it. Thanks for looking though! I might be back with questions about icon placements :P

Awesome! Glad it got fixed. :D

sam_gardener

p {width: 20px;}

That p tag has a width of 20 px and so anything (such as the example from your reading page is forced into a minimal width. - At least that's how it looks to me in firebug.

Thank you! That fixed it. I can't believe I didn't see that :P

Your welcome! glad that you could understand my incoherent typing. :)

um...
so anything in a p tag (such as the example from your reading page) is forced into a minimal width -

sorry - maybe that makes more sense.

Nope that makes perfect sense. It was code that came with the css style I used as my base for this and I didn't think to even look at it since it wasn't something I changed.

Now onto battling with icon placement :P

Dreamwidth style system discussion

Fixed: Bizarre Entry Text Wrapping.. Help?

Fixed: Bizarre Entry Text Wrapping.. Help?

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

Profile

September 2025

Links

Most Popular Tags

Page Summary

Style Credit

Expand Cut Tags