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

[afuna]

Oh, have you seen this btw?
http://dreamscapes.dreamwidth.org/9796.html?thread=109636#cmt109636

That workaround will let you create a "real" layout layer, so you don't need to worry about copy-pasting the same code into a thousand different theme layers, while testing :)

[branchandroot]

Yes! I was so glad to read that; I used it to make the Tranquility color variations. So much easier!

[afuna]

BTW, converted the layout already; like the look of this! This time I didn't touch anything, other than the metadata!

[baggyeyes]

I've just tried out Nutmeg - I found .entry-day - while I know what the numbers are - difficult to read with the black text under the dark green. It may not be a real issue, I just found the contrast worked better in Spice and Summer Dark.

[branchandroot]

Where is this that you're seeing black text on the dark green? That shouldn't be happening, and I'm not finding it in any view I've looked at so far.

[baggyeyes]

Ok, I've reset the layout back to Fluid - nutmeg. It's the calendar that has black text on the dark green.

[branchandroot]

*frowns* It shouldn't. Sidebars have white text and peach colored links. Can you show me a screenshot?

[baggyeyes]

Ok, but I'm not feeling too good right now. I'll try tomorrow.

[testicle]

ah, one more reason for me to whine at opera. what is it, do they want me to switch to firefox? i love rounded corners!

anyway:

i figured i'll just show a screenshot for every new layout to make sure things look like the designer wants them to look.



at 150x114 one can't really tell that the corners are supposed to be rounded, so at least we don't have to worry about indicating browser differences there.

maybe it can be mentioned somewhere in the style FAQ that certain browsers behave badly with certain CSS elements.

[testicle]

i am working on the preview images, so i snapped what i think you might mean -- the days on which entries were posted have black text on dark background:

[baggyeyes]

Yes - that's what I mean. Thank you. :)

[branchandroot]

Ah, okay, I see!

*fishes in the code* Hmm. Bugger; this one can't be fixed without extra css. Okay.

*waves to Afuna* Whatever function it's decided we should use to add little bits of css, whether custom_head or what, I need to add the following to Nutmeg using it:

function Page::print_custom_head() {
"""
.module-calendar .entry-day a { color: $*color_module_background !important; }
""";
}

[branchandroot]

I think Opera is holding out for the whole of CSS3 to be finalized before putting it all in at once; alas.

This looks all correct and accounted for, though!

[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

[afuna]

One last, I just found that ith deep comment threads, the comments just start disappaering. how do you feel about using this css instead to handle that case?

.comment-wrapper { overflow: visible; min-width: 10em;}

[branchandroot]

*blinks* How peculiar. Yes, that would be fine.

[afuna]

There was an ovelfrow: hidden in there for some reason *g* Hmm I guess the min-width would be good on other layouts, come to think of it.

[branchandroot]

*thinks* I remember putting that in, but I forget exactly why. I think it had something to do with two browsers displaying the background color differently. Oh, right! It was because IE (I think) kept making the background color run all the way to the left! Um, as long as that isn't happening now, the overflow can be visible, yeah.

[afuna]

Hmm. I have no idea :O Let me seeeeee

[afuna]

Okay, tested and it seems okay. It could have been some of the other stuff I shifted around interacting with it, ad now that it's gone, whatever weirdness it was is gone too. (I hope!)