i graphic/icon showing up in category list

Hi Marlo

I did a quick check and your problem is in the CSS for your theme.

The status field of the classified ad is picking up the global CSS settings for a div with class "status".

At line 595 of sites/horsebackweb.com/themes/bluebreeze/style.css you find the CSS rule:

div.status {
  background:transparent url(images/icon-info.png) no-repeat scroll 0.5em 50%;
}

Either make the selector for that rule more specific:

/**
 * Assuming that the intent was to have an info icon on
 * messages of type status change the selector of the rule
 * to only apply in the messages container.
 *
 * Modify the ".messages" part to what selects
 * the container for Drupal messages in your theme
 */
.messages div.status {
  background:transparent url(images/icon-info.png) no-repeat scroll 0.5em 50%;
}

or add this rule to the end of styles.css to unset the background image from the "div.status" rule on

ul.classified-category-list li .status {
  background-image: none;
}

The first solution will prevent the problem from resurfacing if a later change to the site would add new divs with class "status".

The second solution is a quick fix which would be unnecessary if the first rule had been declared specific enough.

A tip: Get the Firebug extension for Firefox. It is very handy when tracking down CSS problems among other things.

Also if the "div.styles" rule is part of the Bluebreeze theme then others are likely to hit the same snag as you just did . If that is the case you should open an issue against the Bluebreeze project so it can be fixed in later releases.

Hope this helps.

Regards,

Christian Larsen

Thanks for the assist! I was busy typing in a response, and noted that you've already answered it better than I could have.

Oh, and you should also install, learn, and use the lifesaving
Web Developer add in for firefox - even more useful for CSS stuff than FireBug, I'd say. :D

Good luck!

@marlo: Good to hear that the problem is fixed, and thank you for taking the issue over to the Bluebreeze project :-).

Also the Web Developer extension Inactivist refers to is this one:

• Web Developer :: Firefox Add-ons

It is a very good supplement to Firebug. I have used it for a long time and still use it along side Firebug.

In my previous post I gave the link to Firebugs official site. Below is the link to its listing on Firefox Add-ons:

• Firebug :: Firefox Add-ons

You should also check out

• View Dependencies :: Firefox Add-ons

for a quick overview of what files are needed to build a given web page including files referenced from within a style sheet. It also calculates the size of the page in terms of download size.

@Inactivist: Glad I could assist :-)

In regards to which is better for CSS ... depends on the task.

For this issue ... Firebug ... It took me less than a minute or two to pinpoint and test all the info above.

I used the inspect HTML tool to pinpoint the container with the icon and with the CSS inheritans sidebar open I had all the info needed. A quick click disabled the div.status to verify it was the culprit, then a second to enable it again and a third within the classified ads specific rule to enter the background-image: none property to see if it would be enough. Then it was of to see the Wizard ... erhmm ... I mean to write my findings in this issue.

The CSS inheritans sidebar is great. For a given HTML element it shows all the rules that apply, in the sequence they apply and strikes out the properties that are overruled later in the sequence.

As I wrote above I have both and use both. They are tools of the trade :-)

Regards,

Christian Larsen

Of course I agree about Web Developer vs. Firebug - both useful. I consider them my 'dynamic duo'... :D

Thanks again for all the great info.