Please login or register.

Login with username, password and session length
Advanced search  

News:

Latest sNews - sNews 1.7 - with its own forums - for discussion and user mods.

Author Topic: 2 Problems with overlapping text wraps in right column of snews  (Read 2191 times)

Jamie Wilson

  • Newbie
  • *
  • Karma: 0
  • Posts: 13
    • http://www.acousticecosse.org
2 Problems with overlapping text wraps in right column of snews
« on: March 26, 2007, 02:16:03 pm »
Hello all,

I have been combining snews 1.5 with a forum called phorum.  I have a "latest post feed" on the right column of the snews front page:

http://www.acousticecosse.org

The problem is that to prevent the text overlapping for the forum latest feed, i've had to specify a specific double height (double that which is specified in the CSS for new comments and articles), so that when the text wraps it doesn't overlap.  :/

At the same time, wrapped text in, for example, new articles, is overlapping the subjacent text.

How do I solve this issue?

Cheers for any help,

j
Logged
To try is to risk failure, but the risk must be taken, because the greatest hazard in life is to risk nothing.  The person who risks nothing, does nothing, has nothing, and is nothing.

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6020
  • Semantically Challenged
    • snews.ca
2 Problems with overlapping text wraps in right column of snews
« Reply #1 on: March 26, 2007, 04:25:21 pm »
Hmmm... I'm no CSS expert but... looking in your generated HTML source code and CSS code, we find that everything in the template's right-side column is wrapped in... and styled by:
Quote
... and the style declarations in your stylesheet for this show an 18px height being applied to all li-tags within this division:
Quote
#secondary-content ul li{
   background: url(blue-box.gif) no-repeat 0 1px;
   height: 18px;
   list-style: none;
   padding-left: 15px;
}
So... all of the links within the sNews-generated sections (New Comments, New Articles and Categories) are already styled by this.
Now, here is the HTML source code section containing the Forum Links... which is also within the same division... but it has an additional specific style declaration applied to the links. I have spread it out more so we can see what's being generated, piece by piece:
Quote
(the heading)

* Forum Latest


(forumlist class applied to the opening UL-tag)
And, in your stylesheet, the declaration applying styling to your Forum links has bottom padding of 20px... which adds 20px of space to the bottom of each link... which already has a height of 18px applied by the division (above) that wraps all the right-side column contents:
Quote
li.forumlist{
   padding-bottom: 20px;
}
From this, I would think the simplest fix would be to try changing the bottom padding (above) to 1px or 0px and see what happens.
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
2 Problems with overlapping text wraps in right column of snews
« Reply #2 on: March 26, 2007, 04:38:35 pm »
As far as the styles go, I'd agree with keyrocks, that massive bottom padding on the forumlist li seems redundant unless you have a background image that requires it (and I can't see that you do). But that's not the main problem, I think. You would do well to get rid of the table-related tags from the list code, as well as the unclosed
's (in XHTML they need to be
):
Quote
See if that helps.
Logged

Jamie Wilson

  • Newbie
  • *
  • Karma: 0
  • Posts: 13
    • http://www.acousticecosse.org
2 Problems with overlapping text wraps in right column of snews
« Reply #3 on: March 26, 2007, 10:20:45 pm »
Hi,

Thanks for the suggestions.  I've taken out the table tags, which I don't know where they came from! And I've taken out the
 tag, which was unnecessary.  All the right hand column is now styled by:

Code: [Select]
The specified height of 18px meant that anywhere where there is two wrapped lines of text (currently the forum feed, and the new articles bits) the text overlaps.  I've changed the height to 28px, which, while this prevents the text from overlapping, the list items are now to far apart for aesthetic visual appeal.  This is what I was trying to work around before, but failed.  Is there a way of getting around this?

Thanks for the help BTW,

Jamie
Logged
To try is to risk failure, but the risk must be taken, because the greatest hazard in life is to risk nothing.  The person who risks nothing, does nothing, has nothing, and is nothing.

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
2 Problems with overlapping text wraps in right column of snews
« Reply #4 on: March 27, 2007, 12:55:21 am »
My suggestion: skip the height value entirely, or change the height value to "auto", then use line-height, padding and/or margin to control the distance between list items. Basically, having a specific width declared (in px, em or percent) will make text flow out of its container and over any underlying items.
Logged

Jamie Wilson

  • Newbie
  • *
  • Karma: 0
  • Posts: 13
    • http://www.acousticecosse.org
2 Problems with overlapping text wraps in right column of snews
« Reply #5 on: March 27, 2007, 01:29:10 am »
Cheers,

What a dunce not thinking of removing the term - I hope I'm just tired, otherwise its an early neurodegerative disorder or something!!!!

Thanks again.

j
Logged
To try is to risk failure, but the risk must be taken, because the greatest hazard in life is to risk nothing.  The person who risks nothing, does nothing, has nothing, and is nothing.