Tabula Rasa: Fluid Measure

[branchandroot]

Theme name/layout: Fluid Measure / Tabula Rasa
Author: branchandroot
Layout info: link to theme layer Spice
Image info: Does not contain images

Other: This theme should contain "Inspired by the WordPress theme Ahimsa, by Ravi Sarma" in the description field.

Peculiarities: This layout has rounded corners in all modern browsers except IE and Opera; in those two it degrades gracefully to square corners. This will continue until Opera and IE adopt the CSS3 border-radius standard, at which point it will be rounded for them too. It would be good if there were some way to indicate the current state of affairs in the thumbnail, but off the bat I can't think of one.

Color Variations: Links to theme layers follow. Wooded, Summer Dark, Nutmeg.

Comments

[yvi]

I was testing this (Linux, Firefox 3.0) for committing and when I use the "2 Column (sidebar on right)" setup, the archive and tags pages get... squished? The right half is empty except for the background and only the left half is used for the layout, if that makes any sense.

[branchandroot]

*blinks* Okay, that's weird. Does it happen in any other Tabula Rasa styles you look at, or just Fluid Measure? It sounds a little like the containers are displaying as if inline or floated, which shrinks them to the width of the content, but I thought I took care of that already.

[yvi]

Hmmm, I looked at a few and couldn't see anything like it. I uploaded screenshots at the bugzilla entry for Fluid Measures: http://bugs.dwscoalition.org/show_bug.cgi?id=1734

[branchandroot]

*puzzled* That looks like the shrink-wrap behavior all right. Can you test it for me? Does this still happen, on the archive page. if you put:

.month-wrapper { width: 100%; }

into the Custom CSS box in the wizard? That should fix shrink-wrapping, and if that's the issue, I can add that to the tags page container also.

[afuna]

hmm, no that doesn't help. But additional data-points: the positioning is all right at larger sizes, but not at smaller ones. If you switch to non-multilevel tags, which means the content is narrower, that makes it more obvious. Once something inside the content has stretched out the area, the problem goes away. Ahh, and it also happens in the entry area if you've got all short entries (nothing wrapping onto the next line).

So that's all symptoms of the smae thing.

[afuna]

AHa! Found the offending code, I think:

.two-columns-right #content,
.three-columns-right #content { float: left; width: auto; } /*IE*/


Removing that fixes things in FF; but I haven't checked to see how it looks in IE.

[branchandroot]

Argh! Yes, that would do it; floating something does shrink-wrap it, especially with width:auto on. Maybe, with the changes we've made, it isn't necessary anymore. *crosses fingers*

[afuna]

Let me tweak the patch and upload it.... do you remember what the specific issue with IE was, so we can ask people to look for that, specifically?

[branchandroot]

*frowns* I don't know. I'm not sure that's one of my bits of code. From the shape of it, it looks like maybe it was done so that the #content container would actually contain all the floated elements in it, except that that's actually a kind of an IE bug; it only works in IE and everyone else needs an actual clearing element at the foot of the container (the way I added one to Fluid Measure, frex). It might have been done to make things line up when the sidebars were assigned to #page and the header and footer had odd margins. But I'm honestly not sure.

I think people should look at at least one layout that has a colored #content background, like Fluid Measure, and one or two others to make sure nothing weird is happening, and we should be okay.

[afuna]

*double-checks*

Ooh, okay I know what that float: left; width: auto code was for: to do the clearing thing, like you said.

What I did instead was add this:

#content-footer { height: 0; font-size: 0; }, and that made IE behave like the other browsers with the clearing.

I also added back the invisible-separator hack (eeek. I hate IE), and changed the padding-top of the syndicate module to margin-top, to fix a few other inconsistencies.

[branchandroot]

*nodnod* That sounds like a better call for cross-browser stability. Wow, IE is such a piece of xxxx. Well, at least having a #content-footer in the base html will make some styles easier across the board, so that's a gain!

[afuna]

Do you want me to add the #content-footer to everything, btw? It's just in fluid measure atm.

[branchandroot]

I think it would be useful to have as a clearing element. I think giving #content backgrounds for the main and side columns is going to be common enough that it will be something people would be happy to find already in there. To make background color of sidebars go all the way to the bottom, one definitely needs it.

(Of course, Fluid Measure has it's own issues with needing extra divs, but most layouts can probably get by without that!)

[afuna]

Filed bug: http://bugs.dwscoalition.org/show_bug.cgi?id=1781