Print

Please login or register.
1 Hour 1 Day 1 Week 1 Month Forever
Login with username, password and session length

[Jamie Wilson]

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

[Keyrocks]

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:

... and the style declarations in your stylesheet for this show an 18px height being applied to all li-tags within this division:

#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:

(the heading)

* Forum Latest

(forumlist class applied to the opening UL-tag)

(the five links, each with the forumlist class applied to the opening li-tag)

• Jamie: Bev Whelan
  


• chieftrow: Re: Website Music
  


• Jamie: Problems with the online video
  


• chieftrow: Website Music
  


• Jamie: Unidentified tune identified!
  

(unnecessary closing tags not opened elsewhere - are they part of the problem?)


(closing 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:

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.

[Fred K]

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
):

     
• ... Unidentified tune identified!
  
 

     

See if that helps.

[Jamie Wilson]

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

[Fred K]

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.

[Jamie Wilson]

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