1 Topic by Vanslyde (edited by Vanslyde 2007-09-02 19:34)

  • From: Montreal
  • Registered: 2006-10-02
  • Posts: 144

Topic: CSS: problem separating items in a list

How can I set a specific css to a page I created via the Custom Pages mod?

I managed to implement a xml/ress feed on that page but the styles used in the html seem overriden by my forum's default .css

I used the Custom Pages mod because it includes a left sidebar/menu

Or do you know any simpler way to achieve what I'm trying to do?

Vanslyde's Website

2 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: CSS: problem separating items in a list

Assuming the custom page has an id then just use that to create a css declaration with a higher specificity.

  • From: Montreal
  • Registered: 2006-10-02
  • Posts: 144

Re: CSS: problem separating items in a list

Paul wrote:

Assuming the custom page has an id then just use that to create a css declaration with a higher specificity.

Thanks! Sounds like a good tip, I wouldn't know how to do it though..

The thing is, I want to embed an xlm feed in a page of my forum. The javascript is hosted by a third party so I cannot change their "css name"

So I added them in my forum's .css:

.rss-date {font-size: x-small;font-style: italic;color: #333;}
.rss-item {font-size: small;color: #333;margin-bottom: 0.5em;}
.rss-item a:link {font-size: small;font-weight: bold;color: #6D7E7E;}
.rss-title {font-size: small;font-weight: bold;color: #B42000;margin-bottom: 0.5em;}
.rss-item A:link, .rss-item A:visited, .rss-item A:active {font-size: small;font-weight: bold;color: #6D7E7E;}
.rss-item A:hover {color: #eaefef;background-color: #6D7E7E;}

it looks llike this.
http://i119.photobucket.com/albums/o144/indiequebec/idqfeedspaces.gif

The problem I have is that the news are too close next to each others, I tried "margin-bottom:2px; margin-top:2px" but it doesn't change anything, they won't move at all. "margin-bottom: 0.5em;" works for .rss-title but not for all the other items.

Does anybody know how I could add some space between each items?

Vanslyde's Website

4 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: CSS: problem separating items in a list

Like I said, use the id of the page
#somepage .rss-item {margin: whatever}

If that doesn't work, ramp up the specificity
div#punwrap div#somepage .rss-item {etc}

Without seeing the markup I can't be any more help because I dont know whether the news items are lists, paragraphs or what.

  • From: Montreal
  • Registered: 2006-10-02
  • Posts: 144

Re: CSS: problem separating items in a list

Paul wrote:

If that doesn't work, ramp up the specificity
div#punwrap div#somepage .rss-item {etc}

Without seeing the markup I can't be any more help because I dont know whether the news items are lists, paragraphs or what.

The page is
page.php?id=2
This is not what you meant, right?

DIV#punwrap DIV#page.php?id=2 .rss-item {font-size: small;color: #333;margin-bottom: 0.5em;margin-bottom: 0.5em;}

I see you rolling your eyes.. ; )

Anyways I reread the instructions of the site I used here http://feed2js.org// and found out I had deleted an extra css declaration for this list. But even if the margins would still remain stuck by modifyng it, I could however apply an image next to each item... So I cheated and made a tiny bar that is now next to each item, and by modifying this image, I can "separate" them at my convenience.. (I know Paul, this isn't nice work, but it will have to do until I get more skills with css...)

Thanks for your help!

Vanslyde's Website

6 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: CSS: problem separating items in a list

Try
div.rss_box ul.rss_items li.rss_item {padding-bottom: 0.5em}

  • From: Montreal
  • Registered: 2006-10-02
  • Posts: 144

Re: CSS: problem separating items in a list

Paul wrote:

Try
div.rss_box ul.rss_items li.rss_item {padding-bottom: 0.5em}

I wanna make this legit, turns out my quickfix didn't work in FF. Weirdly enough this line
.rss-items {list-style-type: none; list-style-image: url("http://myimage.gif") }
would display an image next to each item in IE and FF when placed as a single line in an completely empty .css, but as soon as I put it in my default.css it stop working in FF.
----

So according to your tip I used;
/* 6 RSS FEED */
/****************************************************************/
div.rss_box ul.rss_items li.rss_item {padding-bottom: 0.5em}

.rss-box {width: 300px;background-color: #ffffff;}
.rss-date {font-size: x-small;font-style: italic;color: #333;}
.rss-item {FONT-FAMILY: Arial, Helvetica, sans-serif; font-size: 10pt;font-weight: bold;color: #333;}
.rss-items {list-style:none; margin:0; padding:0;}

Didn't work in both IE or FF
I also tried putting div.rss_box ul.rss_items li.rss_item {padding-bottom: 0.5em} in my base.css but it didn't work either..

This thing is driving me nuts, I spent hours on this detail lol

my actual .css (which seperates items in IE but not in FF by displaying an "invisible bar" next to the items) contains this;

.rss-date {font-size: x-small;font-style: italic;color: #333;}
.rss-item {color: #333;margin-bottom: 0.5em;}
.rss-title {FONT-FAMILY: Arial, Helvetica, sans-serif; font-size: 14pt;font-weight: normal;margin-bottom: 0.5em;}
.rss-item {FONT-FAMILY: Arial, Helvetica, sans-serif; font-size: 10pt;font-weight: bold;color: #333;}
.rss-items {
       list-style: url(http://www.indiequebec.com/forums/img/i … dqlist.gif) circle;
       margin:0;
       padding:0;
}

Whoever could lead me to some tips on either how to make my image appear next to the rss-items in FF or better yet, how not to use images to "separate" the items in my list would be of great help.

Vanslyde's Website