[pmwiki-users] help with floating table in NotSoSimple Skin

[Marc Cooper]

Patrick R. Michaud said...
> On Wed, Jun 07, 2006 at 06:56:20PM -0400, Robby Van Sciver wrote:
> > I need some help getting a table to float right properly.  I'm using
> > the NotSoSimple skin.
> > I'm trying to copy wikipedia's album page to my site.
> > 
> > So:
> > my page: http://www.jewelwiki.com/pmwiki.php?n=Albums.PiecesOfYou
> > wikipedia: http://en.wikipedia.org/wiki/Pieces_Of_You
> 
> The NotSoSimple skin's css forces  *all* tables to have
> margin-left and margin-right values of "auto".  Since CSS
> overrides the HTML attributes in the <table> tag, the
> margin-left and margin-right values are overriding the value
> of the 'width' attribute, and the table's margins are set
> to automatically expand to the full width of the cell.  Thus
> it doesn't appear to float because there's no room for
> anything on the left.
> 
> This would seem to be a bug in the NotSoSimple skin's CSS,
> it shouldn't dictate all tables to be 100% width the way it
> does.  The line that is the culprit is the one that reads
> 
>     table { border-collapse: collapse; margin: 12px auto; }
> 
> I think it should be removed, or else the specification should
> change to refer to only a very specific table.  (I'm not sure
> what it's supposed to affect.)

I'm using the NotSoSimple as the basis for my testing. I concur with 
Patrick's assessment.

You can see a big problem in /PmWiki/Tables where all the examples are 
centred!

I simply changed the CSS entry to 

table {
	border-collapse: collapse;
	border: 1px solid #cccccc;
}

You might also want to change:

    .lfloat {
        margin: 5px 15px 5px 0;
    }
    .rfloat {
        margin: 5px 0px 5px 10px;
    }

to

    .lfloat {
        margin: 0;
    }
    .rfloat {
        margin: 0;
    }

These are the classes used by wikistyles %lfloat% and %rfloat%, which 
have margins set by default (see below). Of course, you can also 
override these in PmWiki (e.g %rfloat margin=0%)

    .lfloat { float:left; margin-right:0.5em; }
    .rfloat { float:right; margin-left:0.5em; }

Once you start floating things, margins can become quite a headache when 
applied to high level elements within a CSS, so I find it easier to 
remove them and manage things with classes. When you need margins, you 
can use a div - then manage the content. With wikistyles, this is a 
breeze.


Some more notes on NotSoSimple:

- It uses the HTML 4.01 Transitional doctype, so it's worth considering 
replacing this with XHTML 1.0 Transitional - just copy the entry from 
the pmwiki skin.

- The CSS defines

    .vspace { margin: 4px; }
    p.vspace { padding: 3px; }

You could have sleepless nights trying to sort out the effects these 
cause, so just get rid of them - and, as above, manage your content with 
additional classes or wikistyles, should you need to.

- You probably need an inherit on

#header a {
	color		: #ddd;
	font		: inherit
}

to avoid cross browser issues with that text - or define the font stuff 
explicitly.

I also turned #wikicmds into a float, which provides more flexibility 
for additional menubar items, and allowed me to fix some additional 
cross 
browser issues with the links therein.

- h4 color - which is not set - caused a problem somewhere - IE, I think 
- so I set it to

    #main h4 {
        font-size  :  9pt;
        margin     : 0 0 0.5em 0;
        padding    : 0px;
        color      : #666;
    }

- I'd also add some margin-bottom to the heading styles - the current 
margin=0 breaks every typographical rule in the book!


Hope that helps.

-- 
Best,
Marc