Stylesheet Wrangling
OK. Last post to talk about the changes I've made to the site. Everything should be working and look decent on all browsers, except for IE5/Mac.
The final big change was the addition of JavaScript stylesheet-switchers in the upper right hand corner. It uses cookies to store your preferences. The JavaScript code and description of the method is from an ALA article.
Default is Palatino/Georgia, lucida is Lucida Grande/Trebuchet MS, and rightnav is with blocks on the right but same look as the default.
The beauty of it is that the alternate stylesheets are so easy. Here's the rightnav stylesheet:
@import url("base.css");
#blocks {
position: absolute;
right: 10px;
width: 175px;
padding-right: 1px;
}
#main {
margin-left: 0px;
margin-right: 185px;
}
So, the base stylesheet contains the main look and feel, and then anything can be overridden in the alternate sheet. For the style switching, I could have a completely different look just by not importing the base stylesheet -- this is likely what I will do for IE5/Mac, so that my parents can actually read this thing.
Similar
Recently viewed
Comments
Indeedy
I always thot a new paradigm was needed to try to please me. }:-)
It would be Leonardo-style mirrored font reading from right to left.
Then we'd need a flip mode in the vid drivers or a handy mirror.
(Actually, the lucida switch is gr8, thanks.)
new web language paradigm needed
Hmm, trying to get the layout right in all these different browsers sounds hard. And even if you do get it the way you want, there's no pleasing Greg. If only there were some way you could specify only the content and logical structure of the web page, and let the browser itself determine the layout, subject to user preferences.
For example, you might write something like this:
\head{
\title{My Web Page}
}
\body{
\header1{My \emphasis{Favourite} Things:}
\list{
\item{raindrops on roses}
\item{whiskers on kittens}
|
\header1{Now I don't feel so bad!}
\footer{Please sign my guest book!}
}
Then the browser could determine how to indent and place sections and the relative sizes of text and so forth, and the user (Greg) could choose colours and fonts that he likes. Everybody wins!
Perhaps I made it sound harder than it was
Actually, it's all fixed now, and there are no hacks that I had to implement to get it to work cross-browser. Part of it was stupidity on my part. And, it's all done using stylesheets only -- the actual content of the page doesn't change. Now I can try doing a completely different layout.
What you are talking about is pretty much how things are now, Jason. That is, an HTML page is served up with content and "logical" structure, using base (X)HTML tags plus CSS ids/classes for semantic markup. The stylesheet then styles the page, potentially right down to positioning.
If you want, you can write your own stylesheet for your browser, determining how you want things to look. For the most part, most modern browsers will let you do basic things, like select the default size and style of font for porportional and fixed-width, plus hit larger/smaller buttons to change font-size.
Of course
I spoke too soon. Yup, everything except for rightnav is mangled in IE6/Win. Adding in a fix breaks rightnav. I think I'll settle for that for now, until I figure out the right mix of tricks...
I give up
I figured out what was giving ie5mac conniption fits -- the creators of the original base theme were being smarty-pants, and giving the node div two classes -- the first was node, and the second was what the type of node was (recipe, blog, poll, etc. etc.). This way, theoretically, you could have two classes applying to one piece of content using CSS selectors. All it did for ie5mac was confuse it horribly, so it applied all styles to the content.
So, that was why I originally created the ie5mac style -- to serve up a different style sheet so that people like my parents could read the site without getting a headache. However, I started running into problems there, too -- namely, floating the taxonomy plus somehow blockquote was making things weird.
When I fixed the original issue by commenting out the second class being applied to node, ie5mac started displaying the default styles OK, except for some visual weirdness with overflow.
After a quick search, I found it's definitely a bug in IE5 Mac. So, style has been updated to just not display taxonomy terms at all, which fixes the problem. Yay! The only other difference with that stylesheet is that I've set the font to "serif", so it will use some sort of default.