scriptygoddess

Here’s an article with some very useful CSS tips “you may not know” (but really should!)

evolt.org: Ten CSS tricks you may not know
[via del.icio.us]

Ran into a problem today that I really should have forseen: as usual I coded a site so it all lines up perfectly in IE, flip over to Mozilla and it’s all out of whack. I realized the reason right away: in terms of calculating widths, IE measures from border to border; Mozilla uses content. This apparently is only a problem in Windows IE less than version 6.0.

I did a search and to my surprize found that you can tell the broswer how to calculate it. I am used to IE’s way, so I like border-to-border widths. Stick this in your stylesheet to force Mozilla to do it that way:

div {
-moz-box-sizing:border-box;
box-sizing:border-box;
}

(Found on this board)

This of course makes all div tags calculate this way, but you can stick it in any specific div tag if you want.

For a better explanation of the box-sizing property, I found an article on WebFX.

This little tutorial saved my butt today.

List Style Bullet Images
An alternative way of styling list bullets.

Someone asked me how they can set up a box of text and limit the width to a certain number of characters. the PRE tag (in some things I found online) used to (?) to have a width attribute, but it doesn’t seem to work in IE 5+. The only way I could do is like this:
(more…)

A short article showing how to use CSS pseudo-classes to help users find hard to spot links on an otherwise well designed page. This involves using the :hover pseudo-class on paragraphs, so you’ll need to use the newest version of Mozilla (1.3) to get the full effect!

(update: this technique has also been confirmed to work in Netscape 6+, Opera 7, Safari, and Konqueror.)

Are Cascading Style Sheets a mystery to you? Are you looking for new design ideas? Visit StrangeBanana’s Random Style Generator and reload, reload, reload the page to see how different style choices affect the content elements on a page. It’s an excellent learning tool, and if you find one you like, you can view the source and save it for yourself - a unique design all your own. [via a.wholelottanothing.org]

Ever want your readers to be able to print your pages cleanly without having to suffer through all your sidebars and graphics? Here’s a way to do just that. You need to create a new stylesheet and point your pages to it. Here’s how I did it:

First, you need to define the two stylesheets in your document’s HEAD:

<link rel=”stylesheet” type=”text/css” href=”<$MTBlogURL$>print.css” media=”print” />
<link rel=”stylesheet” href=”<$MTBlogURL$>styles-site.css” type=”text/css” media=”screen” />

Your print.css stylesheet should not contain any extraneous items, such as banners or sidebars. Your readers will probably only want to print your posts. Therefore, any element that should not be printed should be dealt with as follows:

.element-name {
display: none;
}

You must define the original stylesheet as media=”screen” and the print.css stylesheet as media=”print” so that when your page is viewed on the Web, the browser will serve up the screen-based stylesheet. But when the browser’s Print or Print Preview button is pressed, the browser will use the print.css stylesheet.

If you have a separate division for your copyright information, as I do, it might be a good idea to leave that in the print stylesheet as well.

There is one “gotcha” involved in printing, and it doesn’t matter whether there’s a special stylesheet for printing or not. When you are printing pages, such as MT blog pages, that have the “More” (extended text) link (like the “But wait! There’s more!” link on these pages), the text in that link is not going to print. If you want the extended text to print, you’ll need to go to the individual archive page and expand the link and then print the page(s).

Guest authored by:
Joni Mueller - jonielectric.com

Well this isn’t really a trick… It’s just that I’ve had to search for this more times than I can count because I couldn’t remember the exact way to write it - so I’m posting it here for my future reference.

.stylename a:link {
text-decoration: none;
color: #FF0000; //red
}
.stylename a:visited {
text-decoration: line-through;
color: #00FF00; //green
}
.stylename a:hover {
text-decoration: underline;
color: #0000FF;
background-color: #FFFF66; //blue
}
.stylename a:active {
text-decoration: overline;
color: #FFFF00; //yellow
}

[swiped from here]

(updated: fixed typo - and added a different color and “text-decoration” for each state so you can see which one is which when testing it)

Eric Meyer has a cool new tool/toy on his site — the Color Blender. Enter 2 hex codes and it will give you the colors between it. Very cool!

Movable Type Stylesheet Generator: This site is a “easy to use, php-powered series of drop down menus that will return a customized stylesheet *. Best of all, no changes to the default templates are necessary - simply cut and paste the returned stylesheet info into your styles-site.css template, and you’re done!” A fast and easy way to tweak your blog, brought to you by Zalary! (Found on Donna’s site.)