Forum:Box ad vs. indent

We're using indented text on our wiki to style some dialogues. The first line starts as normal, but the rest of the character's words are indented. We do this with .css formatting:

 div.dialogue p { text-indent: -4em; margin-left: 4em; }

Now the box ads that have started to appear inside article text lately don't work well with this; they can overlap the start of the paragraph. To illustatrate the problem, here is a screenshot taken with IE7; the display is similar with Firefox 3.0.11, except that the overlapping text appears visible "in front of" the ad box and not behind as with IE7.



Is there a way to have indented paragraphs that do work with box ads? A "solution" using  seems to have the same problem, and "wrapping" the paragraph in another container would create whitespace below the box ad and not have the text flowing around it, besides being cumbersome.

Any help or ideas to tackle this problem would be appreciated. -- ◄mendel► 14:26, 12 July 2009 (UTC)


 * I think something could be done using the pseudo selector "first-line" :

 div.dialogue p { margin-left: 4em; } div.dialogue p:first-line { margin-left: 0em; }


 * I made that CSS rule without testing. Tell me if it work and if not, tell me what you had to change. — TulipVorlax 21:47, 12 July 2009 (UTC)


 * Testing using the webdeveloper plugin, this doesn't work at all on Firefox 3. -- ◄mendel► 01:47, 13 July 2009 (UTC)


 * This page say all major browsers support this. I'll try it locally in a new HTML file for testing... — TulipVorlax 07:28, 13 July 2009 (UTC)
 * After some testing, it seems we are unable to use any kind of positioning on the first-line element. But, changing color, size or weight is possible. I'll continue to search for a way... — TulipVorlax 07:45, 13 July 2009 (UTC)


 * Found something, try this :

div.dialogue { padding-left: 4em; } div.dialogue p { text-indent: -4em; }
 * — TulipVorlax 07:51, 13 July 2009 (UTC)
 * It works as well as our existing solution, which means it overlaps the box ads, too. -- ◄mendel► 16:24, 14 July 2009 (UTC)

demonstration


of the problem
 Overlap is the word. I am demonstrating your latest suggestion here, using a shortened and shrunk version of the HTML that the ads actually use. It is the overlap that is the problem; the indent works fine, as you can see at the bottom of my screenshot and here on the page. -- ◄mendel► 17:08, 14 July 2009 (UTC)

bullet list
 -- ◄mendel► 17:08, 14 July 2009 (UTC)
 * 1) This ia a mocked up box ad interacting
 * 2) with a simple
 * 3) numbered list made using # wikicode.
 * 4) In fact, each line here is a
 * 5) bullet
 * 6) point!
 * 7) But it overlaps in Internet Explorer 7,
 * 8) because the right margin set for the box ad of 20px
 * 9) is wide enough for a simple bullet list, but not for numbers.