CHM Images Too Large For Window

[rmdavidson]

I have a Flare 7.2 project with a Master Stylesheet for the project. When I create my WebHelp the image size is fine (I have them set to Max width 615px using inline styles and nothing else changed), but when I create the CHM, the files are too large. The user would have to scroll around to see the entire image. The text wraps and displays fine however. What do I need to do to fix the image size for the CHM? The only thing under img in the external style sheet is border none and padding-bottom -0.5 em.

Thanks!
Robin

[LTinker68]

Did you double-check the CHM target to make sure it's pointing to the correct stylesheet and the correct medium in that stylesheet for online output (generally default or non-print medium)?

[rmdavidson]

The only one I've been using is the styles.css which is default and I am going based off what the last writer had, but even topics I haven't touched have graphics that are too large as well. There is nothing for the img tag in the others. Is it as simple as setting something for the img tag in the others? Am I overthinking it?

Code: Select all

/*<meta />*/

body
{
	color: #000000;
	margin-left: 0em;
	padding-left: 1.5em;
	padding-right: 1em;
	border-bottom-width: .5em;
	border-left-width: .5em;
	border-right-width: .5em;
	border-top-width: .5em;
	background-color: #fefdfd;
	font-size: 10pt;
	font-family: Arial;
}

h1
{
	margin-bottom: .5em;
	clear: both;
	width: 85%;
	font-family: Verdana;
	column-break-after: avoid;
	page-break-after: avoid;
	column-break-before: avoid;
	page-break-before: avoid;
	font-weight: bold;
	font-style: normal;
	font-size: 14pt;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #999999;
}

h2
{
	margin-top: 1.5em;
	margin-bottom: .5em;
	clear: both;
	font-size: 12pt;
	font-weight: bold;
	font-style: normal;
	font-family: Arial;
}

h3
{
	margin-top: 1.2em;
	margin-bottom: .5em;
	clear: both;
	font-weight: bold;
	font-style: normal;
	font-size: 10pt;
	font-family: Arial;
}

h4
{
	margin-top: 1.2em;
	margin-bottom: .5em;
	clear: both;
	font-size: 10pt;
	font-family: Arial;
	font-weight: bold;
	font-style: normal;
}

a:link
{
	color: #0000D0;
	text-decoration: underline;
}

a:visited
{
	color: #800080;
	text-decoration: underline;
}

a:active
{
	cursor: hand;
	text-decoration: underline;
	color: #008000;
}

a:hover
{
	color: #FF0000;
	cursor: hand;
	text-decoration: underline;
}

p
{
	margin-bottom: .5em;
	margin-top: .5em;
	font-size: 10pt;
	font-family: Arial;
}

li
{
	color: #000000;
	margin-bottom: .6em;
	margin-top: .6em;
	font-size: 10pt;
	font-family: Arial;
}

p.hang
{
	text-indent: -25px;
	padding-left: 25px;
	margin-bottom: 1.5em;
}

p.tip
{
	color: #BEF5BF;
	font-weight: bold;
	letter-spacing: normal;
	background-color: #696969;
	margin-left: .1em;
	margin-top: 1.7em;
	padding-left: 0.8em;
	padding-right: 0.8em;
	padding-bottom: 0.3em;
	padding-top: 0.3em;
	border-bottom-color: #000000;
	border-bottom-style: Solid;
	border-bottom-width: 1px;
	border-top-color: #000000;
	border-top-style: Solid;
	border-top-width: 1px;
	font-size: 1em;
	margin-bottom: 1.12em;
}

p.note
{
	color: #094600;
	font-size: 10pt;
	line-height: normal;
	text-align: left;
	font-family: Tahoma;
	border-left-style: None;
	border-right-style: None;
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: #005b04;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #005b04;
	padding-top: 6pt;
	background-color: #696969;
}

p.note2
{
	font-size: 10pt;
	line-height: normal;
	text-align: left;
	font-family: Tahoma;
	color: #000000;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 5pt;
	padding-bottom: 5px;
	border-left-style: None;
	border-right-style: None;
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: #000000;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #000000;
	background-color: #b7d2ec;
	margin-bottom: 0.5em;
	margin-right: 50px;
	margin-left: 25px;
	width: 90%;
}

td
{
	margin-left: 0em;
	padding-left: 1.5em;
	padding-right: 1em;
	border-bottom-width: .5em;
	border-left-width: .5em;
	border-right-width: .5em;
	border-top-width: .5em;
	font-size: 10pt;
	font-family: Arial;
}

img
{
	border: none;
	padding-bottom: -0.5em;
}

@media print
{
	body
	{
		background-color: #ffffff;
	}
}

p.copyrightfooter
{
	color: #808080;
	font-size: 8pt;
	text-align: center;
}

span.MadCap1
{
	font-style: italic;
}

p.numbers
{
	margin-left: 5mm;
}

p.ul1
{
	margin-left: 1cm;
}

tr
{
	font-size: 10pt;
	font-family: Arial;
}

MadCap|breadcrumbsProxy
{
	border-bottom-style: none;
	font-family: Arial;
	font-size: 10pt;
}

MadCap|conditionalText
{
	font-weight: bold;
	font-style: normal;
	font-family: 'Lucida Console';
	color: #d2691e;
}

@media non-print
{
	ol.second
	{
		list-style-type: lower-alpha;
	}

	li.second
	{
		list-style-type: lower-alpha;
		margin-left: 40px;
	}

	li.listbold
	{
		font-weight: bold;
		font-style: normal;
	}

	p.bold
	{
		font-weight: bold;
		font-style: normal;
	}

	span.instructions
	{
		font-weight: bold;
		font-style: normal;
	}

	li
	{
		line-height: 3px;
	}

	p.tip
	{
		
	}

	span.note
	{
		color: #000000;
		background-color: #87cefa;
	}
}

p.bold
{
	margin-bottom: .5em;
	margin-top: .5em;
	font-size: 10pt;
	font-family: Arial;
}

span.instructions
{
	font-weight: bold;
	font-style: normal;
}

span.mono
{
	color: #000000;
	font-family: 'Lucida Console', ' Lucida Typewriter', ' Lucidatypewriter', ' Courier New', ' monospace';
}

span.monobold
{
	font-family: Lucida Console, Lucida Typewriter, Lucidatypewriter, Courier New, monospace;
	font-weight: bold;
	font-style: normal;
	color: #000000;
}

p.instructions
{
	margin-bottom: .5em;
	margin-top: .5em;
	font-family: Arial;
	font-weight: bold;
	font-style: normal;
	font-size: ;
}

span.warning
{
	
	font-size: 10pt;
	line-height: normal;
	text-align: left;
	font-family: Tahoma;
	color: #000000;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 5pt;
	padding-bottom: 5px;
	border-left-style: None;
	border-right-style: None;
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: #000000;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #000000;
	background-color: #b7d2ec;
	margin-bottom: 0.5em;
	
	
}

[LTinker68]

I don't see anything wrong with the img tag, other than wondering why you have a negative padding set on it? However, in your first post, you say your images are fine in WebHelp output because you have a max-width set on them, but there's no max-width attribute on the img tag in your stylesheet. Did you set the max-width attributes inline on the image in the topic? If that's the case, check that inline style in the topic -- you might have set something else there that's overriding the default behavior. Although I'm not sure what the default behavior is for CHM output. I think most of the newer browsers automatically size the image and give you the option to expand it, but CHM output probably doesn't.

BTW, do you realize the p.instructions style has a blank font-size defined?

[rmdavidson]

Yes, as I stated, the 615px wide is inline style. I didn't think that would be too big for the CHM when I started doing it. I've been moving everything else to the external (styles.css) as there is embedded, inline, and external styles from the project being imported from RoboHelp8 and writers and non-writers alike working on it before I arrived. If Find & Replace would work for me I'd wipe some of out in one fell swoop rather than topic by topic like I have been.

I didn't set the negative padding. I just saw that yesterday when I was trying to see if I could fix the CHM output. I guess that would explain why I have been having to add a blank paragraph after an image to space the text out.

I hadn't noticed the blank font-size either. Thanks! I mainly use span.instructions.

The images have the following code (the ones I've touched at least). I've been removing the hcp1 (it goes up to 6) classes and the paragraph class all the images are wrapped in and the embedded style sheet they're part of. I prefer 1 external stylesheet to 3 (2 external + 1 embedded with a few inlines thrown in)! There's a link to one (2nd external) that isn't used (from RH8) that I've been removing whenever it is still there in the topic.

Code: Select all

<img src="..\..\..\..\..\image1354.jpg" alt="Issue Gift Certificates Dialog" width="312" height="354" border="0" class="hcp1" style="max-width: 615px;margin-left: 45px;" />

Robin

[NorthEast]

Code: Select all

<img src="..\..\..\..\..\image1354.jpg" alt="Issue Gift Certificates Dialog" width="312" height="354" border="0" class="hcp1" style="max-width: 615px;margin-left: 45px;" />

One thing that stands out in that example is that is also has a width attribute (width="312"), as well as the max-width style.

I think the width attribute might be used in preference to the max-width style. Although in your example the width attribute is less than the max-width, maybe the width is set to be larger than the max-width for those images that are too large.

If you set a width/height or max-width/height in Flare, it is inserted inline as a style (like the max-width in your example), not as an attribute; so I'm guessing these attributes might have come from the RoboHelp import.

Anyway, I would try removing the attributes, and see if the images appear at the correct size.

[LTinker68]

Code: Select all

<img src="..\..\..\..\..\image1354.jpg" alt="Issue Gift Certificates Dialog" width="312" height="354" border="0" class="hcp1" style="max-width: 615px;margin-left: 45px;" />

One, I recommend stripping out the width and height values. It used to be recommended to have them because it saved the browser some time in determining the size of the image, but 1) if there's any delay anymore it's negligible, and 2) there's no reason to do a max-width at the same time, especially if the image's width is already smaller than your max-width. So remove the width and height values and leave a max-width attribute on the base img tag in the stylesheet so it goes out to all images.

Second, you can set the browser output to use the browser's last known size, so your images aren't too big if people have their browser windows at a large enough size. For CHM output I think you specify its size or can specify its size, so you could have it start larger to be able to show the image.

Third, if you truly want the image to fit the browser or CHM window, then you should set a size of 100% on the img tag -- that will set it to 100% of its container tag (paragraph, table cell, etc.). You could still have a max-width attribute if you wanted to make sure it didn't go wider than 615px, even if the browser window (or CHM window) is currently sized to more than 615px wide. Although if the CHM window starts out small, then I'm not sure if the image size will increase if the user increases its size or if it will stay the size it was when the window was opened. I don't built CHM output so I don't remember what it does.

Lastly, I'm not sure what takes precedence between the max-width and the margin-left attributes in the img tag you show above. Max-width I think is relative to the parent tag, not to the image's position in the parent tag. So it might have set the width to 615 but the left margin might still push it to the right, forcing the user to scroll.

[rmdavidson]

LTinker,

I'm only using the margin-left and max-width in anything new, but I have been setting the max-width and not removing the width/height from existing images. The screen size our users have varies from handhelds of varying sizes to desktop monitors (think restaurants where orders are input). Although I've just been told the CHM isn't on the handhelds so I'm not sure of the smallest screen size at this point. Anyone in the office (at the restaurant) will be using the WebHelp output.

The skin for the CHM is set to default, which won't let me edit anything and I don't see where to change the size. It is greyed out in the General tab of the Target Editor. The last time I asked about changing a look was at least a month or so ago and I haven't heard anything back so I don't feel like I have time to do that right now.

The margin-left just bumps it in 45 pixels, indents it. The max-width means the image won't be more than 615px wide at most depending on screen size. I don't believe there is a precedence between them.

Robin

[LTinker68]

The skin for the CHM is set to default, which won't let me edit anything and I don't see where to change the size.

It's the size tab of the skin. Since that skin is also used for the WebHelp output, you might want to create a new skin for the HTML Help output and condition out that skin from WebHelp output. Then in the new skin you set the size of the screen of the HTML Help output.

[rmdavidson]

We are using Sleek for our WebHelp.