hi, i encountered this problem yesterday in my blog. i was trying to post the weekly tutorial but i couldn't, every time i preview the post i got this weird look of my post.
as you can see both the text and codes are breaking the layout. for the first time i assumed that it is a code problem even this is not the first time i post codes directly to the blog. anyway, i installed this plugin (syntaxhighlighter-plus). but nothing changed, in fact things getting worse. right now, i can't think of more solutions so i decided to post here asking for your help, thank you in advance.
For browsers that support word wrap, you can try the following CSS on the parent container:
thank you for your reply truefusion, i just added the code you gave me but no change at all, still the same problem. on the other hand, i think it is not a browser's problem, because browsers show my other posts very good. the problem is only with this post. i tried to post just texts without codes and it works. so i will double check the code and see.
What browser(s) are you noticing this in? I know that DIV elements aren't as strict with boundaries as tables are, and content without spaces will break out of the element's boundary if it is long enough (though images are another story), but the solutions i've mentioned have always worked for me (where supported), so i find it a bit odd that they didn't for you (though i find it more odd that the screenshot you show shows that there is spaces between the text). But i should have mentioned that the CSS property overflow tends to require that the element it is applied to has to have predefined dimensions set to it: a width and or height is to be defined.
this problem shows in firefox, opera and internet explorer 6. as i mentioned before this appears only when i use codes, even this is not the first time i use codes but seems there's something in this codes breaks the boundaries. anyway, i tried many plugins to separate the code from the text. and it didn't work for me in the beginning, but after more researching i found that i should add this wordpress function to the footer
<?php wp_footer(); ?>
<strong> or <pre>
so i find it a bit odd that they didn't for you (though i find it more odd that the screenshot you show shows that there is spaces between the text). But i should have mentioned that the CSS property overflow tends to require that the element it is applied to has to have predefined dimensions set to it: a width and or height is to be defined.
about width and height, i already defined each div with specific width and height in my css. and the spaces between text in my screen-shoots i don't fully remember how i took the screen shoots i was in a haste. but in general when i post, i always got a post with no spaces at all and i add spaces manually using