I’ve finally been making headway in the fight to make source ordered negative margin layouts work in WordPress 2.0 but it’s been an uphill battle.

The problem seems to be in clearing. A LOT more clearing elements are needed in the css to make layouts work in WordPress 2.0 themes in Firefox that aren’t needed in WP 1.5.x and aren’t needed in a static html page (WHY????) and they have to be REALLY strong empty div clearers with height. Every time you put a nested list in the leftcol or sidebar (or wherever you put your normal sidebar stuff) you need to create a last li with an empty div that has a class that will clear it. The clearer has to go within a li for it to validate. Linked images, for some reason, are also a big problem, they overlap UP and need a clearing element BEFORE the linked image and with a height equal to approximately 3/4 of the linked image (geez, reminds me of spacer gifs . . . ) Then you have the fact that these fixes bork stuff in IE6, Opera, and other browsers. That section of my stylesheet with the clearers and the filters so some browsers wouldn’t see them looks like this, with div.empty being the clearer before a linked image with a height of approximately 165, div.empty3 being the clearer for the last list item in each nested list, and div.empty2 being a clearer between short linked images:

`
div.empty {

width: 100%;

height: 15px;

}

/* the firefox filter so that linked images don’t bork */

[xmlns] div.empty

{
height: 135px;
}

div.empty2 {

width: 100%;

height: 15px;

}

/* the firefox filter so that linked images don’t bork */

[xmlns] div.empty2

{

height: 125px;

}

div.empty3 {

width: 100%;

height: 15px;

}

/* the firefox filter so that linked images don’t bork */

[xmlns] div.empty3

{

height: 50px;

}

/* The Opera filter so the firefox fix doesn’t make the linked images spacey */

@media screen and (min-width: 0px) {

div.empty {

width: 100%;

height: 15px;

margin-top: -120px;

}

div.empty2 {

width: 100%;

height: 15px;

margin-top: -100px;

}

}

`

This is fed to IE in it’s own stylesheet fed via conditional comments:

`
* html .empty {

width: 100%;

height: 10px;

}

`

`* html .empty2 {

width: 100%;

height: 12px;

}

`

Remove the backticks before you use this code. I’m lazy, I didn’t want to use encoding, and sometimes the encoding backfires in WP. And I did want it to be copyable.

Two caveats– all this clearing borks the links in IEMac to some degree. They work but the hover is bizarre on them, with the linktext HIDING on some on mousehover and reappearing on others. However, the links do work and are visible in their entirety before a hover occurs anywhere on the list. I need a filter that will hide the clearers ONLY from IEMac and not from any other browser, and haven’t found one yet, though I seem to remember using one once. The other thing is that I haven’t found a filter to feed values to ONLY Safari, so though the site is usable in Safari, those users are seeing images with lots more spaces between them. Not terrible but not ideal. At least I got it to work in all browsers to some degree, even if it is code I am not incredibly proud of.

This stuff validates but to me it seems “unclean” so anyone who can figure a better way is welcome to suggest one. You can snag a “nonworking in 2.0 theme” here if you want to play with it. This theme doesn’t have any linked images, and I didn’t try the linked images within this layout but I strongly suspect that if the one problem exists the other will too. Anyone who wants a copy of the piefecta layout theme with the fixes used above and who is capable of serious debugging, please use my contact form to let me know and I’ll get you a copy, though it’s a client theme so I can’t let it out for general download.

And if you discover something that’ll make my life easier with these layouts in WP 2.0 then BY ALL MEANS COMMENT!!!

Technorati Tags: source ordered negative margin layouts, WordPress 2.0, css, WordPress 2.0 themes

This entry was posted on Tuesday, March 7th, 2006 at 2:15 pm and is filed under WP Stuff. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.