Too much space above dropdowns - image space issue

[blackline]

I'm hoping someone can help with a space issue with dropdowns. (I'm running Flare 12, BTW).
My dropdowns use two small arrow images - for open and close. The CSS for the drop down is:

MadCap|dropDown
{
margin-bottom: 6px;
margin-top: 0px;
mc-closed-image: url('../Images/_icons-general/DropDownClosed.png');
mc-open-image: url('../Images/_icons-general/DropDownOpen.png');
mc-image-spacing: 5px;
}

When I build the HTML5 output the space above each dropdown item is way too big [see screenshot]:

too-much-space.png

When I right-click the topic in a browser and click Inspect I find that the images are inheriting the margin and padding values from my <img> style [see screenshot]:

inspect-image-values.png

Here's my CSS for images:
img
{
border-style: solid;
border-width: 2px;
border-color: #979797;
margin: 10px 0px 10px 10px;
padding: 5px;
page-break-before: avoid;
}

My question is: How do I stop the dropdown arrow images inheriting margin and padding? The 'mc-image-spacing: 5px;' value in my MadCap|dropDown style seems to be ignored - what is it supposed to be doing? What am I missing here? I feel like I need to create a new class (with no margins or padding) for the arrow images but then I don't know where/how I'd apply that class. Any help would be greatly appreciated.

Thanks,
Elizabeth

[NorthEast]

This will probably do it:

Code: Select all

.MCDropDownHotSpot img
{
   margin: 0;
   padding: 0;
   border: 0 none;
}

But, I think it's a bad idea to set those styles on the main img class the way you have done.
As you've found out, they're going to be used by all images in the output, meaning you have to 'fix' all these other types of images.

I'd suggest that you create a new class for when you want to style your images with the padding/border, like img.screenshot.

[doc_guy]

What Dave said. Don't modify the base img file. Create a class of img, and apply that to the images that should have it. You could also do a global find/replace to search for:

Code: Select all

<img src=

And replace it with

Code: Select all

<img class="myClassName" src=

That would apply the class to all images in your project. Then when you want to update it, you'd just do the search again. Images with the class applied would be ignored, and images without the class would have it added.

[blackline]

Thanks both Dave and Paul. Excellent advice.

I've inherited this Flare project and that's how the <img> style had been set up. I've been busy working on phasing out the values assigned to it (and phasing out a load of other img classes that aren't needed) and then applying a new/better set of image classes. I'll definitely follow the advice from both of you and keep the main <img> style simple.

Thanks again,
Elizabeth