Long Comments Breaking Layout

I have a lot of young and enthusiastic readers of my own comic. Sometimes they feel it necessary to add hundreds of exclamation points to portray their love of the comic or characters. But without spaces, those exclamation points break the layout of the page, Firefox just lets them run over anything else on the page, old Internet Explorer would make it break the layout, moving blocks of content all around. The new IE works a bit better, now letting those marks overlap, but it still breaks background images and other stuff whose layout is dependent on the scale of the page.

To fix this problem (aside from manually catching and editing these problem comments) you can set it so that comment creates it’s own little scrollbar and does not interfere with the rest of the page, or dilute that readers apparent enthusiasm, annoying as it may be.

First open the style.css file. Then find this section:

.commentlist li {
  font-weight: bold;
  }

Now you will need to add the following line:

  overflow: auto;

It should now look like this:

.commentlist li {
  font-weight: bold;
  overflow: auto;
  }

Now whenever a comment is forced to go beyond it’s defined area, it will create scrollbars within it’s own little text area. You may find some other application of the “overflow” attribute in your theme as well, in the case where you would like news to be contained in a box with height and width specified.

I’ll post a sample of this in the comments below…

NOTE: I have filed this post under “Theme Updates”, as I make fixes and modifications to the ComicPress Theme in preparation for the next version release, I’ll post them here, so you can make any of the changes as you go.

^ 4 Comments...

  1. Tyler

    THANKSSSSSSSSSSSSS!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!QWERTYMOFOGROTOMOBITSROFLCOPTERSDANDYDOODLEMCBOPS!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!11111!!!4tehwin1!!

    I love Comic Pressing!!!!!!!!!!!!!!!!!!!!

    Yay!
    Go ME!!!!

  2. Testing - Sorry! Please Delete!!

    sadfasdfadfasdfadfadfasdfadfasdfasdfasdfasdfafasdfasdfasdfsadfasdfadfasdfadfadfasdfadfasdfasdfasdfasdfafasdfasdfasdfsadfasdfadfasdfadfadfasdfadfasdfasdfasdfasdfafasdfasdfasdfsadfasdfadfasdfadfadfasdfadfasdfasdfasdfasdfafasdfasdfasdfsadfasdfadfasdfadfadfasdfadfasdfasdfasdfasdfafasdfasdfasdfsadfasdfadfasdfadfadfasdfadfasdfasdfasdfasdfafasdfasdfasdfsadfasdfadfasdfadfadfasdfadfasdfasdfasdfasdfafasdfasdfasdfsadfasdfadfasdfadfadfasdfadfasdfasdfasdfasdfafasdfasdfasdfsadfasdfadfasdfadfadfasdfadfasdfasdfasdfasdfafasdfasdfasdfsadfasdfadfasdfadfadfasdfadfasdfasdfasdfasdfafasdfasdfasdfsadfasdfadfasdfadfadfasdfadfasdfasdfasdfasdfafasdfasdfasdfsadfasdfadfasdfadfadfasdfadfasdfasdfasdfasdfafasdfasdfasdf

  3. dayhorrorm

    Suddenly I went instinctively spacious and felt my doctors use wrenching as my britney spears divorces kevin federline compounded up. Oooohh! Yes it’s scouring good!

  4. Robb

    On some blogs scrollbars stand out like a sore thumb. Mine is one such blog. To combat the problem, I simply use a slightly different snip of code:

    overflow: hidden;

    This does what you’d expect; it hides everything beyond the limits of the comment area. Of course, since we are generally talking about nonsense text like the exclamation-points you referred to, nothing is really lost to the reader. More commonly though, I see the problem resulting from really long URLs, and again, if you permit active links, then any really long link that gets partially hidden by the right boundary of the comment area will still remain hot and still be clickable for visitors, so again, nothing lost. Just another option to consider.

) Your Reply...

Close
E-mail It