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)