Background color not extending beyond body frame

[navoff]

On one page of a document I have some constant width text representing output from a device. I have a <pre> tag element with a print style set to make the text a smaller font size than the default and to put a background color and some padding around the text. The problem I'm having is that if set to 5pt text, the text extends a little beyond the body frame of the page. If I go to 4pt text, then the text gets really tiny and nearly impossible to read (it's hard enough at 5pt). I would rather, for readability's sake, let the text flow beyond the body frame. However, when I do that, the background color stops at the edge of the page frame.

Sample of 5pt text:

background-color.png

Sample of 4pt text:

background-color2.png

Here's what's in the stylesheet:

pre.dumpsample_xsmall
{
background-color: #dcdcdc;
padding-right: 6px;
padding-bottom: 6px;
padding: 6px;
padding-left: 6px;
width: 6.50in;
font-size: 5pt;
}

I've tried using different unit types (pixels, percentage, etc.) and even tried setting a font size of 4.5 but, in the end, when generating PDF, it gets translated into either 5pt or 4pt. I also tried specifying a larger box width than page frame width. So far, no joy. I'd like to either get the text to fill out the page (and it needs to remain in the <pre> tags in order to get all the numbers to line up) or to get the background to extend beyond the page frame. Any suggestions as to how to solve the problem?

[LTinker68]

First, you've got some redundancy on the padding. Just have padding: 6pt; and get rid of the other lines of padding.

Second, try adding a margin-right: -.5in; to that custom pre tag. The negative margin value should (theoretically) extend the margin setting on that pre tag to beyond the body frame. I'm not entirely positive that'll work (depends on how strict Flare is about keeping everything in the body frame), but theoretically it should work since a negative margin value is acceptable in CSS.

[navoff]

First, you've got some redundancy on the padding. Just have padding: 6pt; and get rid of the other lines of padding.

The redundancy was Flare's fault. I had experimented with different amounts of padding for top/bottom/sides and then went back to the plain padding and set it to the 6pt. Flare copied the info into the other padding elements.

Second, try adding a margin-right: -.5in; to that custom pre tag. The negative margin value should (theoretically) extend the margin setting on that pre tag to beyond the body frame. I'm not entirely positive that'll work (depends on how strict Flare is about keeping everything in the body frame), but theoretically it should work since a negative margin value is acceptable in CSS.

Thanks! It worked.

[LTinker68]

First, you've got some redundancy on the padding. Just have padding: 6pt; and get rid of the other lines of padding.

The redundancy was Flare's fault. I had experimented with different amounts of padding for top/bottom/sides and then went back to the plain padding and set it to the 6pt. Flare copied the info into the other padding elements.

Yeah, that's annoying when it does that. It can cause problems occasionally, too, especially for CSS novices who are reluctant to look at the code in the stylesheet file.