Just emailed revised stylesheets to YL. Also included is a new purple background image - this one in JPG format. I know we like to use pngs, but that looked like crap in IE6 as the background color was not matching the darkest gradient like it is supposed to. The JPG file is about 1/4th the file size of the png, so there is another incentive to delete the png version and replace it with the jpg. The purple stylesheet has already been modified to reference the jpg.
It was an interesting review of how we got to the font size stuff. Early on, in base.css, we had this:
Code: Select all
body {
font: 100.01% Verdana, Arial, Helvetica, sans-serif;
text-align: center;
}
#sitenav, #serendipityLeftSideBar, #serendipityRightSideBar,
#serendipityLeftSideBarLeft, #serendipityLeftSideBarRight,
#content, #footer { font-size: 75%; }
and the colorsheets had this:
Along the way, some of the base.css styles got switched to style.css, and then picked up an !important, thereby overriding anything in the colorsets. Then someone probably realized it was #wrapper that should have been styled instead of all those other containers, and made that change, but that resulted in the loss of the compounding. Forget about all that for now, let's just get back to the original since I believe that is the best place to discuss the revisions I just made.
So, base.css defines all those containers as 75% and the colorsets define #wrapper as 92%. The colorsets sometimes override the 75% in base.css.... #footer comes to mind, perhaps others. Also note that the #banner is NOT included in the 75%, but every other container is (except #sbsitenav, which is correct as it is within the sidebar).
So, thanks to compounding, our true font sizes, before we ever further define them is 92% x 75% = 69% (except for the #banner, which was only covered by #wrapper). This is what I believe to be the initial cause of confusion as to our true font sizes.... the 75% was buried in base.css (and later style.css) and what we saw was the 92% in the colorset #wrapper.
So, I simply made things a bit more obvious. To get back to the original font sizes, we can a) go back to the original 75% method and realize it is compounded with the 92%, b) start at 69% in only a single declaration in the colorsets (current state of my revisions) or c) move the 69% #wrapper to style.css where the font-size: 100.01% is currently located compliments of YL's last round of revisions. Option C may, or may not, be desireable depending on what you think the blank "colorset" should look like. Personally, I think it should stay where I have it now... in the colorsets. Even though it is common to all 3, it is extremely obvious there and given the nature of what the blank set is supposed to represent, I see no problem with the fact that those fonts are awfully large.
Actually, there is a 4th option. Set #wrapper to something like 80% in style.css which is then overridden by the colorset, but at least the blank set looks decent and the colorsets retain the 69% which, as I mentioned, is much more obvious.
Anyway, as mentioned, the current state is what I said was option b - the colorsets now have #wrapper at 69%. I increased the banner font sizes up approx 25% to compensate for this reduced #wrapper size as the banner was not originally getting compounded down to 69%. I also revised ALL font sizes in the colorsheets to be percentages only. It occurs to me that I did not do that in style.css, but perhaps YL can do that when implementing the suggested 80% on #wrapper. 99.9% of the time, the percentage value is similar to whatever em is already there (ie 1em - 100%).
Let me know what you guys think.
Dave does indeed have a Safari, but we can also use browsershots.org for that.