Fixed: Bizarre Entry Text Wrapping.. Help?

[sistabro]

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;}

Comments

[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?

[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.

[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.