How to set width of content

[CycleFitness]

I have my WebHelp properties set to display 800x600. When previewing the entire width isn't in view; it requires horizontal scrolling. How do I resize the pages so they're not so wide they exceed the width of the browser window?

Thanks for your help!

[LTinker68]

Previewing it where? In the Preview window or the compiled output viewed in a browser?

[CycleFitness]

Both places. It's too wide for the browser window.

[LTinker68]

Well, the Preview window only displays the current topic and it doesn't pull all the details from the skin because it's not displaying the whole frameset, and the help window size is set in the skin. So the Preview won't give you an accurate sizing of the help -- you can adjust the edges of the Preview window, but it won't default to 800x600. I think it's a set percentage of your window. It's really just to preview the appearance of the current topic, not the entire help system.

As for the output... I'm assuming you set the 800x600 in the Size tab of the skin and not in the body tag in the stylesheet. If that's the case, then your topics will naturally fill in the space allotted for the topic area of the frameset. You'll get vertical scrollbars, but for the most part shouldn't get horizontal scrollbars.

If, however, you set dimensions on the html or body tags in the stylesheet, then the topics will use those dimensions. So make sure you didn't set any height or width dimensions on the html or body tags. And if you have a banner graphic or anything else like that in a topic, make sure it's not too wide. The 800x600 is for the entire frameset, so the available space for the topic pane is 800 minus whatever value you set for the navigation pane in the skin. So if you set 200px for the nav pane, then the available space for the topic pane is less than 600px (800 - 200), so make sure none of your graphics (including background graphics) are narrower than 600px.

[CycleFitness]

I have set the width in the skin. Here's what it looks like:

http://www.debbiesilbert.com/sandbox/Default.htm

[LTinker68]

Are you sure you want to control the browser window size? Because as a user, I can tell you that it seriously annoys me when you take over my browser and shrink my window from how I normally have it. I complained a lot to MadCap about their knowledgebase when they initially released it and they added the option to use the browser's current size instead of setting a specific size.

Another problem with sizing the browser window to a specific dimension is that you lose real estate if the user (like me) has a side pane active in the browser window. And there's no way you can know what width they have their sidebar set to, so it's a hit-and-miss as to whether your whole help will appear in its entirety.

Do you want to force the browser window because you want the page border in your topics to be totally visible? If so, then you need probably need to change how you have it set up. Even if I resize my browser window I don't see the right edge of the page border, unless you don't have a right edge. But if you do have a right edge, then you need to set the inner DIV to have a width of 80% or something like that so that the content area adjusts dynamically based on the size of the user's browser window.

[CycleFitness]

I agree, Lisa. I don't want to control the browser window size. I want my content inside, though, to fit without having to scroll; e.g., make it 800 x 600. If user's resolution is less than that then I accept there would be horizontal scrolls.

[LTinker68]

You might be able to pass the value for the topic frame using the stylesheet, but I've never tried it, so you'd have to test it. There is a frame tag in the stylesheet, but you'll need to create a class under the frame called "body" (that's what the default.htm page calls the topic frame). Set its width value to 800px but don't set a height. Now there are no attributes for the frame tag if the Stylesheet Editor is set to show assorted relevant properties, so you'll have to set it to show property groups. Try setting the width under the Box category.

Build the output and see if that works. If it doesn't, then you'll have to manually modify the width of the frame in the default.htm page in the output (open it in Notepad to edit it). You'll have to change it in default_CSH.htm and default_Left.htm, too, if you call the help via CSH. Unfortunately, if you have to go that route, then you need to make those modifications every time you build the help.

[CycleFitness]

I don't understand why this is so complex. Here's what it looks like:

http://www.debbiesilbert.com/sandbox/Default.htm

The output is being "stretched" beyond the width of the browser window. I never had this problem in the past.

I have no idea what you're doing in these instructions. Create a class under frame? Did that. Scrolled to the right and set the last attribute as 800 px. I don't know what the rest of your instructions are doing.

Again, this shouldn't be this complicated. How do you "fix" the width of the white box I created in the middle? I did this over two years ago and am just now picking it up to modify and re-publish.

THanks!

[LTinker68]

Can you post the stylesheet code for the body, div.container, and div.container1 tags?

[CycleFitness]

I can't find "container."
body
{
color: #000000;background: #F1F2EC;font-family: Verdana, Arial, Helvetica, Sans Serif;margin-left: 0em;border-bottom-width: .5em;border-left-width: .5em;border-right-width: .5em;border-top-width: .5em;background-color: #ffffff;font-size: 1em;background-image: url('../Images/bkg.GIF');background-repeat: repeat;margin-top: 50px;
}

[CycleFitness]

I found container ...

Guess I should change to to width of 60% or something ... gonna try that now ...

#container
{
halign: center;padding: 25px;background-color: #FFFFFF;widows: 2;border-bottom-color: #ffffff;border-bottom: none 0px;border-left-color: #ffffff;border-right-color: #ffffff;border-top: none 0px;font-size: inherit;text-align: inherit;display: block;margin-left: 10%;margin-right: 10%;width: 100%;
}

[CycleFitness]

That did it!!!!!!!!! Have a look now ...

http://www.debbiesilbert.com/sandbox/Default.htm

Thanks ... I just needed a wall to bounce my craziness back! It's amazing how quickly this stuff comes back. It was a steep learning curve, but seems to be right under the hood.

[LTinker68]

Your link didn't work.

Glad it worked out. I wish you could insert comment blocks into the stylesheet file so that you could indicate what styles are used where and for what, but Flare takes all those comment blocks and throws them at the bottom of the file without any regard for the tags they were used in. I just realized that I forgot to submit a bug report for that.