00353: Migration 1 to 2: HTML output differs

Summary: Migration 1 to 2: HTML output differs
Created: 2005-03-04 03:54
Status: Closed
Category: Other
From: Henning
Assigned:
Priority: 4
Version: PmWiki 1.0.14 to 2.0.beta23
OS: Linux/Apache2

Description: Migrating from PmWiki 1.0.14 to 2.0.beta23, I've run into an HTML output difference that results in an undesired layout difference.

I am using a horizontal line generated from a bitmap of 1 px height to separate the items in the sidebar menu. In PmWiki 2, the horizontal line gets an entire paragraph. As a result, the menu takes up twice the space with a lot of empty pixels between the menu entries.

The output of PmWiki 1.0.14 for the sidebar menu:

 <td id='wikileft' width='130px' class="menu">
 <br clear='all' />
 <p></p>
 <h1><a href='...'>...</a></h1>
 <img src='....'<br />

The output of PmWiki 2.0.beta 23:

 <td id='wikileft' width='130px' class="menu">
 <p><br clear='all' /></p>
 <p class='vspace'></p>
 <h1><a href='...'>...</a></h1>
 <p><img src='...' /></p>

In the following menu entries, the new HTML additionally causes the bitmap to be indented left due to the unordered list tags. This is also undesired.

(I could just drop the horizontal line bitmaps, but unfortunately they are a corporate design requirement so I'd like to avoid that.)

--Henning March 04, 2005, at 03:55 AM


Ummm, could you provide the markup that is generating the above outputs? --Pm


PmWiki 1:

 [[<<]]

 ![[Portal/HomePage Intranet]]
 Uploads:white-line.gif
 *[[Main/AllRecentChanges Neu im Intranet]]
 Uploads:white-line.gif

PmWiki 2 (no big difference):

 [[<<]]

 ![[Portal/HomePage |Intranet]]
 Uploads:white-line.gif
 *[[Main/AllRecentChanges |Neu im Intranet]]
 Uploads:white-line.gif

(I quoted a second menu entry in the markup here to illustrate the use of the unordered list.)

I only use "fancy" layout in the sidebar, so if a different markup would be required, that would affect just that single page. (Everywhere else, skin and CSS are just fine for perfect corporate design compliance!)

--Henning March 04, 2005, at 09:57 AM


Okay, there must be more to the picture here.

First, you should be able to get rid of the
tag at the beginning, since a simple blank line in the markup before the header will go ahead and generate a vertical space for you.

Next, unless you're changing PmWiki's default stylesheet settings somehow, things in a <p>...</p> container don't add any vertical whitespace, because PmWiki turns off the vertical margins for <p> tags. The only time that vertical whitespace is generated is with the <p class='vspace'> tags, thus in

 <h1><a href='...'>...</a></h1>
 <p><img src='...' /></p>

the extra <p>...</p> tags around the image shouldn't be generating any space. It's more likely that the <h1> is generating the space somehow, again depending on the CSS settings here.

The indenting of the horizontal line images must also be due to something other than the list markups, because as you have the markup written above, the line images should be occurring outside of any list elements.

Could you provide a URL so I can see what's happening, or maybe a screen dump? Or perhaps you could duplicate the problem in Test.SideBar on pmwiki.org?

--Pm


By using a different background colour for the <p> tags, I've narrowed down the problem to the <p> behaviour. (The same behaviour occurrs with the pmwiki.css and .tmpl right out of the box.)

I have appended a few example lines to Test.SideBar to demonstrate the effect.

(In PmWiki 1, the bitmap fit the text lines with a minimum of clearance (0 at the bottom).)

--Henning March 07, 2005, at 04:32 AM

Now I tried using <hr> tags instead, which gives the same (undesired) amount of vertical separation, tough with even spacing above and below. An additional problem there is that the <hr> ends up around 100px wide instead of the full 128px and I don't understand why.

--Henning March 07, 2005, at 07:38 AM


What browser are you using? Test.SideBar looks okay on my browser (Firefox 1.0.1).

Aha! It displays the extra space in Internet Explorer, but not in Firefox. Hmmm. Sounds like yet another IE bug.

Unfortunately, I can't get rid of the <p>...</p> tags without breaking a *lot* of other stuff. So the solution here is going to be to have some sort of a workaround, either via custom Markup or a custom CSS setting.

Now that I can see the problem I think I can come up with a fix.

--Pm


Well, guess what. I did a local customization to get the images to show up without paragraph tags around them, and they *still* appear in IE with the vertical whitespace above and below them. So, that tells me that it's not the <p>...</p> tags that are causing the vertical whitespace in the output, but something else. It has to be one of

  • the <ul> tag
  • the <li> tag
  • the fact that there's whitespace on either side of the <img> tag

Would this be at all solvable by placing CSS border attributes on some of the list items -- i.e., does the corporate design actually require a gif image, or just a solid color bar of a certain width/height?

--Pm


And, looking into it still further, it turns out that the vertical space is being caused by the newlines that PmWiki v2 places around the <img> and <ul> tags. In other words, the HTML

 <div>
 <h1><a href='...'>...</a></h1>
 <img src='....' />
 <ul><li>Something</li></ul>
 <img src='....' />
 <ul><li>Something else</li></ul>
 <img src='....' />
 </div>

places extra vertical space above/below the images, while

 <div>
 <h1><a href='...'>...</a></h1><img src='....' 
 /><ul><li>Something</li></ul><img src='....' 
 /><ul><li>Something else</li></ul><img src='....' 
 /></div>

Does not. IE wants to treat the newlines as whitespace (which it should) that should be rendered (which it probably should not).

The best option would be to find a way to get the horizontal lines you want inserted using CSS. If that's not possible, then we'll need to add an option to tell PmWiki not to output the newlines (this may be tricky).

--Pm


You're right, I'm using Microsoft Internet Explorer - company standard :-(

The GIF is just a featureless white line I could generate in any other way (if I could think of any ;-) (I just modfied it a featureless blue line for the example because white on white lacks demonstrative qualities.)

I just found a simple markup workaround:

 ![[Portal/HomePage |Intranet]][[<<]]
 Uploads:white-line.gif[[<<]]
 *[[Main/AllRecentChanges |Neu im Intranet]][[<<]]
 Uploads:white-line.gif[[<<]]

For some reason, this gives just the desired output. (I'm afraid my problem appears extremely trivial in retrospective.)

Thanks a lot for your help! PmWiki's flexible template system is a great aid in meeting corporate design standards, and the better they are met, the fewer psychological obstacles there are for successful wiki use :-)

(I'd say this focus on looks is irrational, but it's a major success factor in a corporate environment, thus the priority "4" I entered for this PITS. Style counts as much as results :-/

Thanks again! --Henning March 08, 2005, at 03:19 AM