How to get images to respect right margin

[sarahb]

I have images using various indents based on whether the image falls under a numbered list or bulleted list (or a sub-bullet which is nested even further). For my <img> tag, I have max-width: 100%;. From what I understand, that means the image can be 100% of the maximum width of the object in which it's contained. I assumed the "container" for the object was the page layout margins/body margins (for print). But the image doesn't seem to respect the right margin--it overflows.

wide-image.png

How can I address this? I want these type of wide images to not exceed the right margin when indented with an indent style. Regular paragraph text obeys the right margin, no matter what indent style I put on it. So why can't images?

If the page layout margins/body margins are not an image's "container", can I define a container to put the image in? For example, that container would have a set maximum width (say 7in), and then the image inside that container would have a max-width of 100%. So if an image is indented within the 7in container, it will auto-scale/size and not exceed the 7in container width. If this is possible, anyone have any idea on how the CSS code would look?

Sarah

[robdocsmith]

Hi Sarah,

How is the image (and other indented paras) formulated on the page? I think the behaviour of max-width depends on how the img is placed on the page.

If I insert a very wide image into a set of nested bullets with para tags as below, the image scales according to the level of indent of the containing bullet, as you'd expect it to work. If I do the same into a paragraph that isn't contained in a bullet, but the paragraph has an indent using margin-left or padding-left, the image is not scaled.

This works for me:

Code: Select all

<ul>
   <li><p>This is a bullet</p>
   <ul>
      <li><p>This is a nested bullet</p>
      <p><img src="verylargeimage.png" /></p>
      </li>
   </ul>
   </li>
</ul>

css:
img  {max-width: 100%;}

This doesn't work for me:

Code: Select all

<p class="indented"><img src="verylargeimage.png" /></p>

css:
img  {max-width: 100%;}
p.indented {margin-left: 30mm;}

In the second case the image overhangs the right margin by the amount of the left indent of the paragraph.

However, this does work for me:

Code: Select all

<div class="indented"><p><img src="verylargeimage.png" /></p></div>

css:
img  {max-width: 100%;}
div.indented {margin-left: 30mm;}

I'd suggested using paras inside the list elements as it's easier to follow what is going on. Use Ctrl+; to turn a simple list item into a list item with paras. Once done, pressing Return at the end of the list item will add a new nested paragraph instead of a new list element.

Hope that helps,
Rob

[sarahb]

Sent this to MadCap Support and they said they were "unsuccessful at applying the desired behaviour", so they've written up a feature request on my behalf. They provided a reference number for the feature request, but when looking for a status update a month later, they said they could not provide status updates. So, that's fun.

[Nita Beck]

Agree with the suggestion that you nest paragraphs and other elements within list items so that the content is contained in a single list. This is especially important for accessibility, if you’re producing HTML5 output. A screen reader needs to identify the structure of the list.

Learn how to nest elements within a list item here: https://help.madcapsoftware.com/flare2020/Content/Flare/Lists/Main-Activities/Adding-Paragraphs-Between-List-Items.htm.

HTH

[Nita Beck]

Also, this blog article might be of interest: https://www.madcapsoftware.com/blog/using-print-styles-effectively/

[Nita Beck]

Also, this blog article might be of interest: https://www.madcapsoftware.com/blog/using-print-styles-effectively/