Margins, padding, and a horizontal scrollbar in WebHelp

[Craig.Prichard]

If I add any margin-left or padding-left to classes like MadCap|miniTOCProxy a horizontal scrollbar appears at the bottom of the content frame. No matter the width of the browser window before, during, or after the topic is rendered, the horizontal scrollbar is present and remains constant (by the amount of the margin-left and padding-left values). My body tag applies a smidge of padding so the content doesn't press against any edge of the frame:

Code: Select all

body
{
	font-size: 12pt;
	font-style: normal;
	font-weight: normal;
	line-height: 1.12;
	text-decoration: none;
	padding: .75em .5em .25em .5em;
	margin: 0;
	margin-top: 66px; /* to leave room for breadcrumbsProxy and non-scrolling region */
}

What should I do different to ensure I never have a horizontal scrollbar but still be able to use margins and padding freely?

[lacastle]

What should I do different to ensure I never have a horizontal scrollbar

You can't control the horizontal scrollbar in all instances because user browser settings can change the window size, font size, etc. and override your styles. a smaller window or larger font may require a horizontal scrollbar.

(i don't know about your other concerns)

[LTinker68]

Did you change the scrollbar setting for the base div tag in your stylesheet?

[i-tietz]

try this style:

Code: Select all

overflow-x: hidden;
overflow-y: auto;

in the wanted element ...

[Craig.Prichard]

I have

Code: Select all

body { overflow: auto; }

which seems to work.

* Is body the correct tag to place overflow in?
* How does overflow: auto; differ from overflow-x: hidden; overflow-y: auto;?

Thank you all for your help.

[i-tietz]

* Is body the correct tag to place overflow in?
* How does overflow: auto; differ from overflow-x: hidden; overflow-y: auto;?

overflow: auto; means: whenever the browser reckons it's necessary it applies horizontal scrollbars or vertical scrollbars
overflow-x: hidden; means: never apply horizontal scrollbars
overflow-y: auto; means: whenever the browser reckons it's necessary it applies a vertical scrollbar

And the overflow style can be applied to most HTML elements: You can also apply it to divs, tables, images, ...