Convoluted CSS for wikipage margins causes problems for #!div

[Jennifer Drummond <jenn@…>]

If I try to wrap wiki headers in a !#div whose borders are visible, like if I'm putting a box or background color on a chunk of markup, the headers extend to the left of the border of the div. Sample code:

{{{
#!div style="background: #bcf"
== Header inside div ==
Sample text
}}}

See the attached screenshot for how this renders on my system, in case there's something idiosyncratic about it.

It seems that the headers have margin-left -18px, and the rest of the content has margin-left 18px (thanks to Eric Bray for helping me find that in the CSS).

I can't figure out how to fudge the div to make it encompass the whole header. I tried giving the div itself a negative margin, and that doesn't seem to change the display in any way.

[Jennifer Drummond <jenn@…>]

Screenshot of the sample code as it renders

[Christian Boos]

The actual problematic CSS is:

/* Wiki */
.wikipage { padding-left: 18px }
.wikipage h1, .wikipage h2, .wikipage h3 { margin-left: -18px }

(source:trunk/trac/htdocs/css/trac.css@7605#L301​)

It looks like the same layout can be achieved without the unwanted side-effect, using the following:

/* Wiki */
.wikipage > * { margin-left: 18px }
.wikipage h1, .wikipage h2, .wikipage h3 { margin-left: 0 }

The only catch I can see is that in your example, the h2 embedded in your div will be aligned with the content. If you want to have the headers shifted to the left, you can simply re-add the "wikipage" class to that div:

{{{
#!div style="background: #bcf; padding: 1em" class="wikipage"
== Header inside div ==
Sample text
}}}

[Christian Boos]

Patch from comment:1 applied in r7820.

[nicolas.alvarez@…]

I think the fix broke more than it solved. Blockquotes aren't indented anymore, and citations are negatively indented (they show more to the left than normal text). The problem is visible in this very website.

[anonymous]

Wrapping <blockquote> tags in a dummy <div> fixes the problem, because the <div> gets the margin-left: 18px, and the blockquote's own margin gets added to those 18px. Currently, the blockquote margin overrides the margin from the .wikipage > * selector.

[Christian Boos]

Yeah, I've also noticed that the blockquotes where broken, but failed to relate this to that change. Thanks for the heads up.

[Christian Boos]

r7820 reverted in r7942.

We'll try to find a better solution, in the meantime add class=wikipage to your div.

Now that I think about it, maybe the solution would even be to add that wikipage class systematically?

trac/wiki/formatter.py

@@ -788 +788 @@
                 values = [v and v[0] in '"\'' and v[1:-1] or v
                           for v in args[1::2]]
                 args = dict(zip(keys, values))
+                if 'class' not in args:
+                    args['class'] = 'wikipage'
                 self.code_processor = WikiProcessor(self, name, args)
             else:
                 self.code_buf.append(line)

Seems to work fine.

[Christian Boos]

Applied patch from comment:8 in r7944.