[pmwiki-users] pmwiki layout using divs

Henrik Bechmann henrik.bechmann at sympatico.ca
Thu Aug 31 11:55:56 CDT 2006


It's possible to do, but hard, owing to browser incompatibilities, 
particularly IE problems (including differences among versions 5.5, 6, 
and now 7). Most people resort to hacks (bugs to fight bugs), for 
example here is a fragment of css that I use in my div-only framework 
(and yes, the backslash in the first line is significant - I think it 
prevents IE Mac from reading the rules):

/* Tan hack: seen by WinIE only \*/
* html div#header-liner,
* html div#centercolumn-liner,
* html div#leftcolumn-liner,
* html div#rightcolumn-liner,
* html div#footer-liner  {
 he\ight:0;
 overflow:hidden;
 o\verflow:visible;
}
/* end of Tan hack */

This is complex. The backslashes cause one of 5.5 or 6 to fail, so that 
some of these apply to one, not the other. The problems that these hacks 
address are endless, ranging from border issues, size rendering 
differences, to the infamous IE "peekaboo" bug (some text randomly 
disappears and reappears with resizing in the presence of a background 
colour and included image).

Don't ask me to explain them in detail, I've just accumulated hacks that 
seem to work. And don't expect solutions to work in all contexts. You 
have to hack away until you find something that works, then thank your 
lucky stars and move on...

I've also found that double-wrapping div blocks helps. The outside block 
should not contain any rendering rules, just position rules (I call 
these "frames"); the inside block should contain rendering rules 
(border, padding, margin and background rules). I call these latter 
"liners". This seems to help in sidestepping some problems.

To tap into support for all this, a good start is 
http://positioniseverything.net/. For an e-list I found 
http://www.css-discuss.org/mailman/listinfo/css-d to be exceptional.

For standalone versions of IE 5.5 and 6 that you can run on your 
computer alongside IE 7, go to 
http://browsers.evolt.org/?ie/32bit/standalone.

Bottom line: test test test: IE 5.5, 6, 7; FF; Netscape; Opera; and 
Safari for the Mac. And get ready for a grind.

- Henrik

Patrick R. Michaud wrote:
> On Wed, Aug 30, 2006 at 11:53:03PM -0500, JB wrote:
>   
>>>> Has anyone created a pmwiki default layout
>>>> using divs instead of tables?
>>>>
>>>>         
>>> IIRC the Sinorcaish skin uses nothing but divs. I've been working on one
>>> based on it (which I'm tentatively calling Sinorcoid) but I am not a web
>>> designer and I have not yet succeeded in getting something that has the
>>> features I want and renders correctly in both firefox and IE. *sigh*
>>>       
>> I have already created a wiki with only divs using pmwiki.
>>
>> What I was looking for > "the pmwiki default layout" <
>> using divs instead of tables.  This means the wiki would 
>> looks exactly the same as pmwiki looks when you first 
>> install it.
>>
>> I have tried changing the <table> and <td> and <th> 
>> to <div> on a new install in the file 
>>
>>    pub/skins/pmwiki/pmwiki.tmpl
>>
>> and then tried modifying the css.  It appears I do not 
>> know enough about css to make it work.
>>
>> Anyone out there a css expert could do this?
>>     
>
> Some history and background...
>
> There's a reason that PmWiki's default layout uses tables
> instead of divs, and that's because it's a real pain to try
> to get it all to work just right using only divs and CSS.
>
> In early 2004 I spent literally weeks trying to come up with 
> a table-less design that could simultaneously achieve:
>    - work well in all browsers
>    - have a left and right sidebar
>    - be able to use the (:noleft:), (:noheader:), (:nofooter:),
>      and (:notitle:) markups
>    - have floating images work properly
>    - remain understandable by administrators who don't know
>      a lot of CSS tricks
>
> This last point was really what did things in -- I found I could
> _almost_ get a working skin together that met the other criteria,
> but anyone relatively new to HTML and CSS would never be able 
> to follow it.  Since the pmwiki skin that comes with the distribution 
> really serves as the initial example of how a skin is put together,
> I think simplicity and understandability is more important
> than demonstratining a table-less design and CSS.  
>
> And I was tired of (literally) banging my head against the walls.
>
> So, that's why PmWiki's default skin sticks with the table-based
> layout.  I really do understand the advantages of table-less
> layouts, but trying to manage dynamic content within present
> browser and CSS limitations is really difficult.  Not impossible, but 
> often a lot of additional effort for little additional benefit (to me).
>
> Still, I salute all of the skins in the Cookbook that achieve
> their results without using tables.  :-)
>
> Pm
>
> _______________________________________________
> pmwiki-users mailing list
> pmwiki-users at pmichaud.com
> http://www.pmichaud.com/mailman/listinfo/pmwiki-users
>
>   

-- 

Henrik Bechmann
www.osscommons.ca
www.bechmannsoftware.com
Webmaster, www.dufferinpark.ca





More information about the pmwiki-users mailing list