Learning Movable Type: Problems with Default Style Templates


(Note: this tutorial is intended for MT versions 2.661 and earlier.)

If you are new to Movable Type, and are using the default style sheets you may have encountered a surprise when viewing your weblog in various browsers. The reasons for this are many. First, different browsers (Internet Explorer, AOL, Netscape, Safari) on different platforms (Windows XP, Windows 2000, MacOSX) render CSS (Cascading Style Sheets) in different ways. What looks one way on a Mac running Safari can look way different from a PC running AOL. Second, our dedicated team at Six Apart - Ben and Mena Trott - are Mac-ophiles, assuring that most of their default styles render well on a Mac, but not necessarily so on a PC. (And even being Mac-centric doesn't save one from the peculiarities of the MacOSX browser Safari.) Font sizes can appear larger than life, columns can disappear and show up at the bottom of the page, entries can get nested inside of other entries.

If visitors to my recipe site are any indication, around 50% of the platforms out there viewing weblogs are WindowsXP, another 20% are Windows2000 and 15% are Windows98. Between 5 and 10% are Mac. Isn't it something like 30% of the country that uses AOL as their web browser? If you want your site to look good to most of your visitors, you need to make sure that the the major browsers on the major platforms are rendering your site the way you want them to. To test what your website looks like on other browsers you can this free service for PC browsers: IeCapture and this service for Mac's Safari browser: iCapture.

Known issues with the default style sheets and how to address them


(Please note that I am absolutely not an expert in CSS. In fact, I barely have a clue when it comes to CSS. But I have struggled extensively with many of the stylesheets I use on my various weblogs and found a lot of help through the MT forums to come up with these tips. Please post any default stylesheet questions to the MT Forum on Stylesheets.)

When making changes to your stylesheet, I recommend either creating and using a test blog with which to test the new stylesheets (so you don't disrupt the way your weblog looks until you have the style perfected). Or you can create a new stylesheet template in the template edit area, saving the old template, so that if the new one doesn't work you have the old one easily available.

1. The type is too large. The default style sheets list the type sizes in keyword sizes. The problem is that the type looks way too big on some Windows browsers, specifically IE 5 in Windows. To fix this, go into the stylesheet template and change all of the type sizes from keyword to pixel. Here is the translation that I have used on different weblogs:
font-size: xx-large; » font-size:30px;
font-size:x-large; » font-size:30px;
font-size: medium; » font-size: 14px;
font-size:small; » font-size: 12px;
font-size: x-small; » font-size: 10px;
Here is a stylesheet based on the MT 2.661 default "clean" style which you are free to copy and use (note that the font-family is slightly different from the default):



2. The side column disappears from the side and drops below the entries. This happens with some of the styles in some of the browsers. Experiment with the margin-left attribute and adding a width attribute of the content ID.

Example: Default Style "Clean". Change the content ID from:
#content {
position:absolute;
background:#FFF;
margin-right:20px;
margin-left:225px;
margin-bottom:20px;
border:1px solid #FFF;
}
to
#content {
position:absolute;
background:#FFF;
margin-right:20px;
margin-left:200px;
margin-bottom:20px;
width: 70%;
}
Example: Default Style "Plain Jane". Change the Content and Links IDs from:
#content {
float:left;
width:65%;
background:#FFF;
margin-right:15px;
margin-bottom:20px;
}

#links {
background:#FFF;
color:#CCC;
margin-top:35px;
}
to:
#content {
background:#FFF;
margin-right: 200px;
margin-bottom:20px;
}

#links {
position: absolute;
top: 110px;
right: 10px;
width:200px;
background:#FFF;
color:#CCC;
margin-left: 10px;
}
3. The calendar disappears. If you make changes to the column widths you might find the calendar disappears from view. To adjust this, reduce the padding attribute in the calendar class. From
padding:5px;
to
padding:2px;
4. I make changes to the stylesheet but the site doesn't change. First, make sure you are saving the stylesheet before rebuilding. Second, to see changes you've made on your stylesheet reflected on your site you may need to empty the cache of the browser you're using. In Internet Explorer, you can find the cache under Advanced preferences. In Safari, click on "Safari" in the top navigation and scroll down to "Empty Cache". AOL is a whole different beast. Apparently AOL makes it difficult to empty the cache so you can see your changes. The changes are there, and anyone newly coming to your site will see them, but you can't.

Links:
MT Support Forum on Stylesheets
IeCapture - a free service for checking what your website looks like in IE, Mozilla Firefox, and Opera on a Windows computer.
iCapture - a free service for checking what your website looks like in Mac's Safari browser.
http://www.browsercam.com/ - free trial service for checking your site in multiple browsers.


Posted by Elise Bauer on February 27, 2004 12:44 PM to Learning Movable Type http://www.learningmovabletype.com/
Copyright © 2004-2006 Elise Bauer. All Rights Reserved (unless otherwise specified)