Forum:CSS problems in the ChistianMusic Wiki

I would like to fix two CSS problems in w:c:ChristianMusic.
 * If a page, like Amy Grant, has a floating info box, the rule in the main headings continues under the box. Normal   tags do not have that problem.  They stop short of the info box.
 * boxes need to be able to scroll horizontally. As is, text readily overflows the box.  Because of this, I commonly resort to tables or divisions when I would prefer.

Unfortunately, I have no real knowledge of CSS. Can someone tell me how to fix these problems? Will (talk -- contribs) 02:40, 18 September 2006 (UTC)


 * As it turns out, I also am having problems if there is a second division in the same area as the floating Infobox. This divison, like the heading, extends behind the info box.  However, the text wraps around the info box.  For a sample of that problem, see w:c:ChristianMusic:Dana Key. Will (talk -- contribs) 03:14, 18 September 2006 (UTC)


 * I fixed the box on w:c:ChristianMusic:Dana Key, a little trick I found, was that to make a div (which displays as block) display as table to stop the background part of it extending under other boxes. This can be done by adding "display: table;" to the style for the element. Dantman (Talk) 04:24, 18 September 2006 (UTC)

Thanks!. Will (talk -- contribs) 04:35, 18 September 2006 (UTC)


 * is used for preformatted text, and changing it can disorient long time wiki editors (and html editors in general). If a line is too long, it should usually show as too long. Horizontal scrolling can be evil. But, to make it do what you want, add pre { overflow:auto; } to your MediaWiki:Monobook.css. I suggest however applying it just to a specific class of pre, like pre.scroll { overflow:auto; } which will trigger when you use (like the text below)

 foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar


 * or you can use a  to simulate one but with text-wrapping ^_^. --Splarka (talk) 05:39, 18 September 2006 (UTC)


 * I'd use that 2nd suggestion myself, except it dosen't preserve whitespace which is something that can be of some importance. And the scrolling still looks ugly. I dunno, I preffer glitched over ugly for some reason. Now something realy nice would be a whitespace setting that preserves whitespace but gives a forced wrap to long lines, even ones which have no whitespace in between. But that would half to be built on a browser level. Gaaah... this MetaWiki dev work is killing me... I got permissions universaly shared (There may be a bug or two, but unlike wikia my hack makes special flags acutaly unniversal, absolutely no wiki in my system is left out.) but now that I try to match the shared MediaWiki messages (ones with the "shared-" prefix come from the Central Wikia, I want to do that for my meta to build a shared sidebar with shared content) Dantman (Talk) 06:32, 18 September 2006 (UTC)

So that leaves just the heading problem. Any ideas? Will (talk -- contribs) 06:55, 18 September 2006 (UTC)


 * Which one's that? Dantman (Talk) 08:07, 18 September 2006 (UTC)


 * To keep the heading from running into the box, you can put   somewhere between the heading and the end of the last text before the heading. That will move the next page element (the heading) down exactly enough to be clear of the floating element (the box).


 * I went ahead and did it on Amy Grant, so you can see how it looks. You can also use   or   if you'd rather be more precise, but it generally won't screw things up just to clear both. Hope that helps! --StBacchus 12:21, 18 September 2006 (UTC)

That does not work as well as you think. As soon as someone uploads a photo and lists it in the Info Box, that box will be taller than it is now. I have other pages where the rule goes through the middle of the info box rather than the bottom. Try w:c:ChristianMusic:Andrew Peterson. It would not be acceptable to move the first heading below the info box there. I would much rather have the look achieved by the Stub template at the top. It includes explicit hr tags. Will (talk -- contribs) 21:41, 18 September 2006 (UTC)


 * H2 is not the same element as hr. Wikia has the H2s formatted so they include the edit link. We-ell, you could set the box at a fixed height, whatever you want it to be ultimately. You could use a placeholder image if you'd rather not have a fixed height. You could remove the edit link (  ), and that would probably look better. Or you could set the z-index of the box to be higher than the z-index of H2. I don't know if that would work, but it might. --StBacchus 02:46, 19 September 2006 (UTC)

The problem is the rule extending behind the box. Your suggestions would not really affect that. Could you think about it some more? Thanks for you help. Will (talk -- contribs) 02:56, 19 September 2006 (UTC)


 * Oh, I see. I misunderstood what you wanted. OK, the thing that looks like a horizontal rule under the heading is actually a border. You can hide it entirely (edit Monobook.css to include  h2 { border-style: hidden } ). Or you could make the box a fixed width (say 30%) and the H2 the rest of the width (70%). --StBacchus 03:44, 19 September 2006 (UTC)

Well, its only a problem for the rule -- not the text. So I would prefer not to fix anything I don't have to. I see no reason to limit the heading width to 70% for the entire file. Besides, if you look at the source for the Info Box, you will see it has a max width stated in pixels -- not a percentage. Surely other wikis have run into the same problem with their Info Boxes. Perhaps someone there solved the problem. Will (talk -- contribs) 06:19, 19 September 2006 (UTC)


 * Actually, the artist box doesn't have a width, but onward. I realized that we don't have the same problem with the sidebars at my native wiki, so I tested the differences with our sidebars. The problem is that you have  margin: 10px  and you want  margin-left: 10px .


 * As for my other idea, what you might want to know is this: the horizontal rule under the header is not a horizontal rule. It is the bottom border of the header. The header text is unaffected if you style the border. --StBacchus 12:32, 19 September 2006 (UTC)

The margin solution helps in that you don't see the border continue past the Info Box. Technically, the problem is not solved though. Will (talk -- contribs) 19:10, 19 September 2006 (UTC)