Unable to find why Background Image displaying

[kittim]

I have inserted a background image in a div style. I use this in assorted places in my project.

I have now created a drop down text that displays an image. That is working great... except that the image that I used in the div is for some reason displaying as the background of my drop down. This is embedded in a li and as far as I can tell not related to my div anywhere. I have looked everywhere and can't find where this is set. Any suggestions on how to track it down?

Thanks in advance...

[i-tietz]

Could you post the relevant part of the stylesheet and the source code of those elements, maybe even embedded in topics?

[kittim]

Below is an exerpt from the source code from the topic that contains the drop down text.
<ol>
<li>
<p class="step1">Click on the Add New Patient option.</p>
<MadCap:dropDown>
<MadCap:dropDownHead>
<MadCap:dropDownHotspot class="Drop_Down_Heading">SoundWave displays the Patient Demographics window.</MadCap:dropDownHotspot>
</MadCap:dropDownHead>
<MadCap:dropDownBody>
<p>(<img src="../image/Pat_demographics.jpg" />)</p>
</MadCap:dropDownBody>
</MadCap:dropDown>
</li>
</ol>
<ol MadCap:continue="true">
Following is a screen shot of what it looks like in the .chm file and also the style sheet. Is there a better way to post details from the style sheet? Thanks again.

[i-tietz]

try:

Code: Select all

background-image: none

instead of

Code: Select all

background-image: (default)

chosing "default" results in (not set) and a dropdown IS a div, so that background-image comes in through the inbuilt "inherit" function of style sheets ...
better be definite about it than leaving it to the application ...

Inge

[kittim]

Thanks for posting so quick.I had tried that before, and set to None. I set every related style to None. Image still shows up.

How would I know that drop down is a div? They seem totally unrelated? And no div displays in the XML Editor

[i-tietz]

And no div displays in the XML Editor

True, but in the source of the built help topic you can see sth like this at the beginning of your dropdown:

Code: Select all

<div class="MCDropDown">
                <div class="MCDropDownHead"><a href="javascript:void(0);" class="MCDropDownHotSpot" id="MCDropDownHotSpot_3645221321_0" onclick="FMCDropDown( this ); return false;"><img style="border: none;margin-right: 5px;" src="../../../SkinSupport/DropDownClosed.gif" MadCap:altsrc="../../../SkinSupport/DropDownOpen.gif" class="MCDropDownIcon" onload="if ( typeof( FMCPreloadImage ) == 'function' ) { FMCPreloadImage( '../../../SkinSupport/DropDownOpen.gif' ); }" />

How would I know that drop down is a div? They seem totally unrelated?

Open your stylesheet in any available text editor:

open_with_some_text_editor.gif

You will find

Code: Select all

div.MCDropDown

If you are in the source code already, have a look for the order of the relevant classes: Which one comes first? It could be that the DIV class is defined after the dropdown class - in that case it might override it - the last one wins ...
If that's the case - change the order and try that way.

Stylesheet Editor:
Another point could be the style sheet media you have changed the classes in: is it all "default"? Your dropdown style is ...

And maybe you can see more and find the "collisions" if you uncheck the checkbox "Hide inherited" ...

[kittim]

OK.... here is the relevant section of my stylesheet. I cannot find it. In any event. Do you see anything about the order in what I have posted here? all references to the dropDown are after the div. Should I try rearranging and putting the div last?

}

div
{
background-image: url('../image/AB_wav_gray.jpg');
background-repeat: no-repeat;
}

MadCap|dropDownHotspot.Drop_Down

{

}

li.indent1
{
left: 25px;
position: inherit;
}

li.system_response
{
color: #99b4d1;
list-style-position: inherit;
list-style-type: none;
}

li.paragraph
{

}

a
{
color: #554b24;
}

td
{
background-image: none;
background-color: #9eb9e5;
}

td.nocolor
{
background-color: #ffffff;
}

table.TableStyle_Heading
{
caption-side: top;
mc-table-style: url('../Resources/TableStyles/NewStyle.css');
}

strong
{
color: #4b8dd2;
font-style: italic;
}

MadCap|dropDownHotspot.Drop_Down_Heading
{
color: #4b8dd2;
background-color: #f0f0f0;
text-indent: 5px;
background-image: none;
}

MadCap|dropDownHead
{
background-color: #f0f0f0;
font-size: 8pt;
font-style: italic;
color: #4b8dd2;
background-image: none;

[LTinker68]

div
{
background-image: url('../image/AB_wav_gray.jpg');
background-repeat: no-repeat;
}

There's your problem. As i-tietz said, the drop-down effect is inside a DIV. You have a background image specified in the parent DIV tag, so ALL DIVs will have that background image unless you expressly state background-image: none; in all of those child DIVs. Which is a bit trickier with the drop-down DIV since it's generated automatically. You have two options.

First option, remove the background image from the parent DIV and instead create a new DIV class, give it the background image, then apply that DIV class to the DIVs that you want to have the image. All other DIVs won't have the background image.

Second option, add the drop-down DIV's tag to your stylesheet and specify that it not have a background. You could try adding the following code to your stylesheet.

Code: Select all

div.MCDropDown
{
       background-image: none;
}

However, I recommend the first option, because otherwise you'll have to create multiple DIVs and set them all to not use an image. Flare has numerous DIVs that it creates automatically at build time, so the first option is definitely the better way to go.

[kittim]

Thanks Lisa,
No only one problem, I am such a newbie to all this and I feel like an idiot asking, but how do I create a new div class.
I think I have it figured out... whew. This program makes me feel like a moron. I haven't developed help in a while and i used Robohelp Classic, with word.

YES!!! It worked. Thanks both of you for your help!

[RamonS]

You used RH Classic for Word? Anything is excused after that experience!

[i-tietz]

There is (was?) nothing wrong with RH, not with "Classic" and not with "HTML". Not for nothing RH was the leader of the pack for years.
If you had used "RH HTML" Flare wouldn't be new to you - they are pretty similar. But I agree that working in Word and working with HTML or even XML and style sheets are very different approaches to producing help. My colleagues have their problems with that too.
I don't know a solution to that problem but "Keep going" and "Keep asking".

AND:
You add a new class be clicking the right mouse button on the DIV in the list of "Styles":

add_class.gif