Why does text wrap all the time?

Resolved momunplugged
(@momunplugged)

16 years, 3 months ago

I am trying to set up my blog. When I imported my blog from Blogger, I noticed that the text ALWAYS wraps. With smaller images, this is OK. But with larger ones it looks silly (one or two words per line all down the side of the image.

I have tried paragraph breaks and line breaks in the code. They don’t work.

The only solution I have found is to use smaller images so the wrapped text doesn’t look so silly. I don’t want smaller images!

I suspect there might be some override in my template? I am using Andreas01 1.7. Here is the stylesheet:

/*

Theme Name: WP-Andreas01

Theme URI: http://andreasviklund.com/wordpress-themes/

Description: Clean, simple and very functional theme that works well for many different kinds of sites. Based on the classic “andreas01” website template by Andreas Viklund. Add-ons, replacement images (including lots of new headers and backgrounds) and different kinds of modifications (wide version, 2-column version etc.) will soon be available on the WP-Andreas01 theme site.

Version: 1.7

Author: Andreas Viklund

Author URI: http://andreasviklund.com/

*/

/* Body */

* {margin:0; padding:0;}

body {background:#f4f4f4 url(img/bg.gif) top center repeat-y; color:#303030; font:76% Verdana,Tahoma,Arial,sans-serif;}

#wrap {background-color:#fff; color:#333; margin:0 auto; width:760px;}

/* Links */

a {background-color:inherit; color:#286ea0; font-weight:bold; text-decoration:none;}

a:hover {background-color:inherit; color:#286ea0; font-weight:bold; text-decoration:underline;}

a img {border:0;}

/* Header */

#header {margin:10px 0 0;}

#header h1 {background-color:inherit; color:#555; float:left; font-size:2em; letter-spacing:-1px; margin:0 0 10px; width:350px;}

#header h1 a {background-color:inherit; color:#555; text-decoration:none;}

#header p {background-color:inherit; color:#777; float:right; font-size:1.1em; font-weight:bold; line-height:1.3em; margin:6px 0 0; text-align:center; width:400px;}

#frontphoto {margin:0 0 10px;}

/* Sidebars */

#leftside {clear:left; float:left; line-height:1.4em; margin:0 0 5px; padding:0; width:140px;}

#extras {float:right; line-height:1.4em; margin:0 0 5px; padding:0; width:140px;}

#leftside p, #leftside ul, #leftside div.textwidget, #extras p, #extras ul, #extras div.textwidget {font-size:0.9em; margin:0 0 18px;}

#leftside li, #extras li {line-height:1.2em; list-style:none; margin:0 0 6px;}

#leftside ul ul, #extras ul ul {margin:6px 0 0 10px;}

#leftside ul ul li, #extras ul ul li {margin:0 0 4px;}

#leftside ul ul li a, #extras ul ul li a {font-weight:normal;}

#leftside ul.linklist, #extras ul.linklist {font-size:1em;}

#leftside ul.linklist ul, #extras ul.linklist ul {margin:0 0 20px;}

#leftside ul.linklist ul li a, #extras ul.linklist ul li a {font-weight:bold;}

#leftside h2, #leftside ul.linklist li h2, #leftside h3, #extras h2, #extras ul.linklist li h2, #extras h3, table#wp-calendar caption {background-color:inherit; color:#505050; font-size:1.3em; font-weight:normal; text-align:left; margin:0 0 6px;}

#leftside label, #extras label {display:none;}

/* Main menu */

ul.page {list-style:none; margin:0 0 20px; width:140px;}

ul.page li {display:inline; line-height:1.4em; width:140px;}

ul.page li a {background-color:#f4f4f4; border-left:4px solid #cccccc; color:#505050; float:left; font-weight:bold; margin-bottom:5px; padding:5px 1px 5px 5px; text-decoration:none; width:130px;}

ul.page li a:hover, ul.page li.current_page_item a {background-color:#eaeaea; border-left:4px solid #286ea0; color:#505050;}

ul.page ul {font-size:0.9em; margin:0 0 0 15px; padding:0 0 5px; width:125px;}

ul.page ul a {padding:3px 1px 3px 5px; width:115px;}

ul.page ul ul {width:113px;}

ul.page ul ul a {width:100px;}

/* Content */

#content {line-height:1.6em; margin:0 155px 5px; padding:0;}

#contentwide {line-height:1.6em; margin:0 0 5px 150px; padding:0;}

#content h2,#contentwide h2 {font-size:1.6em; margin:0 0 10px;}

#content h3,#contentwide h3 {font-size:1.4em; margin:0 0 8px;}

#content img,#contentwide img {border:1px solid #d0d0d0; float:left; margin:3px 10px 3px 0;}

#content ul,#contentwide ul,#content ol,#contentwide ol {margin:0 0 16px 20px;}

#content li,#contentwide li {padding:0 0 0 5px;}

#content ul ul,#contentwide ul ul,#content ol ol,#contentwide ol ol {margin:0 0 0 16px;}

/* Footer */

#footer {border-top:2px solid #e0e0e0; font-size:0.9em; clear:both; color:#777; font-weight:normal; line-height:1.4em; margin:0 auto; padding:10px 0; text-align:center; width:760px;}

#footer p {margin:0; padding:0;}

#footer a {color:#777; font-weight:normal; text-decoration:none;}

#footer a:hover {color:#555; text-decoration:underline;}

#footer strong a {font-weight:bold;}

#footer span.credits {font-size:1.1em;}

/* Subpage menu */

#subpages {border-bottom:1px solid #e0e0e0; border-left:1px solid #e0e0e0; float:right; font-weight:bold; line-height:1.3em; margin:-5px 0 8px 15px; padding:0 0 10px 10px; width:190px;}

#subpages h2 {font-size:1.2em; font-weight:bold; letter-spacing:-1px; line-height:1.3em; margin:0 0 12px;}

#subpages ul.submenu {line-height:1.4em; list-style:none; margin:0;}

#subpages ul.submenu li {display:inline; line-height:1.4em; width:180px; padding:0;}

#subpages ul.submenu li a {background-color:#f4f4f4; border-left:4px solid #cccccc; color:#505050; float:left; font-weight:bold; margin-bottom:5px; padding:3px 1px 3px 5px; text-decoration:none; width:180px;}

#subpages ul.submenu li ul {margin:0 0 5px 10px; width:170px;}

#subpages ul.submenu li ul li a {width:170px;}

#subpages ul.submenu li ul ul {margin:0 0 5px 10px; width:160px;}

#subpages ul.submenu li ul ul li a {width:160px;}

#subpages ul.submenu li ul ul ul {margin:0 0 5px 10px; width:150px;}

#subpages ul.submenu li ul ul ul li a {width:150px;}

#subpages ul.submenu li a:hover,#subpages ul.submenu li.current_page_item a {background-color:#eaeaea; border-left:4px solid #286ea0; color:#555;}

#subpages ul.submenu li.current_page_item ul li a {background-color:#f4f4f4; border-left:4px solid #cccccc; color:#555;}

/* Tags */

p,ul,ol {margin:0 0 18px;}

blockquote {border-left:4px solid #e0e0e0; margin:20px; padding:8px 8px 8px 15px;}

blockquote p {background-color:inherit; color:#505050; font-size:0.9em; line-height:1.3em;}

label {background-color:inherit; color:#606060; font-size:0.9em; font-weight:bold;}

table#wp-calendar {margin:0 0 20px; width:140px;}

code {font-size:1.2em; display:block; padding:5px 5px 5px 8px; background-color:#f4f4f4; margin:5px 0 15px 0;border-left:4px solid #cccccc;}

/* Forms */

#s,#submit {background-color:#ffffff; border:1px solid #cccccc; color:#505050; font-size:0.9em; margin:0 0 16px; padding:4px; width:130px;}

#author,#email,#url,#comment {border:1px solid #cccccc; font-family:Verdana,Tahoma,Arial,Sans-Serif; font-size:1em; margin:0; padding:4px;}

#commentsection {margin:25px 0 0;}

#commentsection p {margin:0 0 6px;}

/* Float fix */

.contenttext {overflow:hidden;}

* html .contenttext {height:1px; overflow:visible;}

* html .contenttext p {overflow:hidden; width:99%;}

/* Various classes */

.left {border:1px solid #cccccc; float:left; margin:10px 15px 10px 0;}

.right {border:1px solid #cccccc; float:right; margin:10px 0 5px 10px;}

.center {border:1px solid #aaaaaa; margin:5px auto 12px; text-align:center;}

.textright {text-align:right;}

.small {font-size:0.8em;}

.bold {font-weight:bold;}

.hide {display:none;}

.post {margin:0 0 25px;}

.postinfo {background-color:#f4f4f4; border-left:4px solid #cccccc; color:#606060; font-size:0.9em; font-weight:bold; line-height:1.5em; margin:1px 0 40px; padding:8px 5px 8px 8px;}

.comment {background-color:#f4f4f4; border-left:4px solid #cccccc; color:#606060; margin:0 0 10px; padding:8px 5px 0 8px;}

.comment p.commenthead {line-height:1.6em;}

.comment p {font-size:0.9em; line-height:1.3em; margin:0 0 6px; padding-bottom:5px;}

.navigation {display:block; margin:10px 0; padding:0 0 15px; text-align:center;}

.navigation p {margin:0; padding:0;}

.prevlink {margin-right:20px;}

.nextlink {margin-left:20px;}

I have searched the forum (seems to be a common problem) and tried a few template edits but nothing seems to help so far.

Any thoughts? Thanks in advance!!

Viewing 11 replies - 1 through 11 (of 11 total)

Thread Starter momunplugged
(@momunplugged)

16 years, 3 months ago

Here’s a link to an example of what’s going on:

http://74.52.60.18/~marybun/blog/?p=392

And the code:

[code moderated]

Thread Starter momunplugged
(@momunplugged)

16 years, 3 months ago

That’s odd, my first post explaining the problem has disappeared.

My text wraps all the time and looks bad since there are just one or two words per line next to the image. The only”fix” I have found is to use a smaller picture so that the wrapped text doesn’t look quite so strange.

How do I stop this from happening? I’d rather have no text wrap at all. Thanks!

homeycomb
(@homeycomb)

16 years, 3 months ago

your first post “explaining” the problem was moderated by one of the mods, because it didnt explain anything — it was just a whole lot of code or CSS, which ppl are asked to not post on here.

They prefer you paste that stuff over here:

http://wordpress.pastebin.ca

and then link to it.

Its also advisable to not expect ppl to diagnose CSS issues with a picture, even a picture with CSS. Most of us use Firefox, and most of us are able to change CSS on the fly, so what’s prefered is a URL where we can see the actual “issue”, and not a picture.

Thread Starter momunplugged
(@momunplugged)

16 years, 3 months ago

Sorry. I am new to all this. Didn’t mean to do anything wrong. I’ve seen code in other posts so I thought it was OK.

I did post the code for the picture but apparently it was deleted by a moderator.

I had also put in the CSS for the template stylesheet because I wondering if there is anything in there that is causing the code to continuously wrap.

Can anyone help me?

Moderator Samuel Wood (Otto)
(@otto42)

WordPress.org Admin

16 years, 3 months ago

In your CSS file for your theme, you have this:
#content img,#contentwide img {border:1px solid #d0d0d0; float:left; margin:3px 10px 3px 0;}

Remove the float:left; from that and your text won’t wrap around the images any more.

Adam Brown
(@adamrbrown)

16 years, 3 months ago

@homeycomb:

Its also advisable to not expect ppl to diagnose CSS issues with a picture, even a picture with CSS.

Umm… She didn’t expect that. She gave the correct link.

@momunplugged:

In your theme’s stylesheet, find this:

#content img,#contentwide img {border:1px solid #d0d0d0; float:left; margin:3px 10px 3px 0;}

Change it to this:

#content img,#contentwide img {border:1px solid #d0d0d0; margin:3px 10px 3px 0;}

The only difference is that I removed the “float:left;” that your theme’s author stuck in there for some odd reason.

Thread Starter momunplugged
(@momunplugged)

16 years, 3 months ago

Thanks Otto42. I made the change, but the text still wraps. Am I doing something wrong?

Moderator Samuel Wood (Otto)
(@otto42)

WordPress.org Admin

16 years, 3 months ago

momunplugged: No, it doesn’t. The change worked. Refresh your page and/or clear your browser cache.

Thread Starter momunplugged
(@momunplugged)

16 years, 3 months ago

Thanks Adam, I think that’s what Otto suggested and I did it, but the text still wraps. Could there be another area of the stylesheet that is still causing a problem? There is something in there about “float fix” (and overflow?).

Adam Brown
(@adamrbrown)

16 years, 3 months ago

Like Otto said, clear your browser cache. It looks fixed to me.

Details:

http://codex.wordpress.org/I_Make_Changes_and_Nothing_Happens#The_Browser_Cache

Thread Starter momunplugged
(@momunplugged)

16 years, 3 months ago

Duh! Refreshing the page does help doesn’t it!!

Thanks so much for the help everyone. It worked!

Have a great day!

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘Why does text wrap all the time?’ is closed to new replies.

Why does text wrap all the time?

Tags

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics