February 27, 2004

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.


Has this tutorial been helpful? Please consider linking to Learning Movable Type at http://learningmovabletype.com/ . Thanks!

Trackback

If you would like to send a trackback
please use the following URL: http://learningmovabletype.com/cgi-bin/mt32/mt-tb.cgi/184

Comments

Hi Elise:

That browsercam link is not working, at the moment of this post BUT I wanted to thank you for all the practical advice . It sure helped me get my new Movable Type blog at least functional.

I am still working feverishly on it. BUT I think I'm doing great considering I just downloaded yesterday.

But I have to check out Browser Cam. I had a disappointing surprise once, when I went to show my business site off to an OLD boss. And he is MAC happy! And GOD did my site ever look like it was run over by a MAC truck!

Smiles, but truly thanks again.

Hi Sherry,

Thanks for the heads up on the broken link to Browser Cam. I fixed it so it should work now.

It can be embarassing showing off a site to someone only to have it look sucky because the browser/platform is different. I was once teaching our parish priest about blogging, showed off my site only to have it look like a mess because he was using AOL on a couple year old PC.

Hey you are doing GREAT if you only downloaded MT yesterday!

YOU ARE SO CORRECT! EMBARRASSING! Beyond ALL EXTREMES! It makes me THINK, that I have learned nothing at ALL when that happens.

I am self-taught! My son has a degree! And making twice as much as I could ever hope to make and the knowledge to go with it!

http://www.ericvause.com

He would be more than happy to help! I hate asking! MY BIG BAD PRIDE!

But there have been MANY, MANY, TIMES I have wanted to place a disclaimer with a link to a screen shot at the bottom of every single page I develop that says "If the page doesn't look like this, PLEASE UPGRADE your operating system before complaining ! LOL

hi, i have to say you are a real master in MT.
i am a IRANIAN man that familiar with movable type . i have to say your blog is realy useful.
thank you for your investigation in MT.

i wonder i mistyped my blog in last comment. so sorry i correct it in this comment

In addition to browsercam, I've also come across another site that lets you view your site on a PC: http://www.danvine.com/iecapture/ or a Mac: http://www.danvine.com/icapture

Elise, great site! It has helped me a lot when setting up my blog with MT and I still learn a lot of useful tricks. Thanks :-)

sibylle - Thanks for the www.danvine.com links! Pretty cool and free too. I like that.

Additionally, if you still don't see your stylesheets, reconfirm that your program is uploading to the correct directory and not some other.

Thanks for all tips Elise. I don't know Perl and managed to install MT largely in part because of you. Modifications are coming along well.

Hey, how are you? It seems to me that saw something about headings/titles appearing twice. Was it here on your site? I am having that problem. Thanks.

Web usability experts (Nielsen et al - www.useit.com) generally regard fixed size fonts as a bad thing. People with large screens (or poorly sighted people) like to be able to re-size their text.
Making HTML look exactly the same in all browsers and all screen resolutions is somewhat of a futile task.

Hi Stu, I understand that relative fonts are more kosher. I have just found it very frustrating when I build a weblog on a Mac with the default templates and have it look awful on a PC. So I'm willing to trade off usability for a few in order to have consistency for all.

Here's an excellent article I came across regarding the font-size issues...I found it very helpful anyway...its easy to implement, and works very well.

http://www.thenoodleincident.com/tutorials/typography/index.html

Thank you Ray! That method looks very interesting...

Hi,

We recently launched our networked_performance blog (http://turbulence.org/blog); one of our collaborators set it up. While the formatting on our links template (left) and about template (right) looks fine in IE, the spacing is all screwed up in Netscape. Can anyone tell me how to fix this?

Thanks so much.

Jo - Please post questions like this to the MT Support Forums at http://www.movabletype.org/support.

Comments are now closed for this entry.


Email to a friend

Email this article to:


Your email address:


Message (optional):