x
dustball
A few MindSay CSS observations
I’ve looked through many of the MindSay themes and just came up with a few observations.

The following guidelines below are only my observations. They are not rules.



body, td, xmp
{scrollbar-DarkShadow-Color:#7A7D48;
scrollbar-Track-Color:#161703;
scrollbar-Face-Color:#93AF4D;
scrollbar-Shadow-Color: #677543;
scrollbar-3dLight-Color:#D1D78D;
scrollbar-Highlight-Color:#D1D78D;
scrollbar-Arrow-Color:#12060A;
background:url('/img/1325/kiwibck.jpg');
font-size: 72%; color:#12060A;
font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
text-align: center;
}
Observation 1
Setting a background image on TD’s (in this theme, anyway) doesn't work too well. It would be better to just leave out the "td" in the style declaration.



Observation 2
Setting a class for "xmp" will have no effect since the blogs don’t contain any XMP tags. Please let me know if I'm wrong on this one.

Observation 3
CSS is much easier to read and debug when proper indentation is followed. Set only one property per line. Indent after left curly brackets. Start the bracket after the definition like so:
body {
scrollbar-DarkShadow-Color:#7A7D48;
scrollbar-Track-Color:#161703;
scrollbar-Face-Color:#93AF4D;
scrollbar-Shadow-Color: #677543;
scrollbar-3dLight-Color:#D1D78D;
scrollbar-Highlight-Color:#D1D78D;
scrollbar-Arrow-Color:#12060A;
background: url('/img/1325/kiwibck.jpg');
font-size: 72%;
color :#12060A;
font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
text-align: center;
}


.insert {
border: 1px #3C3526;
}
Observation 4
The .insert class is no longer used by MindSay and need not be defined.



Links:
a:link, a:visited, a:active, b
{text-decoration: none;color:#955FFF;filter: progid: dximagetransform.microsoft.gradientwipe(duration=2) }

a:hover
{text-decoration: underline overline; color:#C24FFD;}
Observation 5
It is better to set the style for ALL links first, then just make the exception for hover. It is faster and easier to read. The "a:hover" portion will override anything you have in "a" when you hover. No need to explicitly state the other states.
a {
text-decoration:none;
color:#955FFF;
filter: progid: dximagetransform.microsoft.gradientwipe(duration=2)
}
a:hover {
text-decoration: underline overline;
color:#C24FFD;
}


a:link, a:visited, a:active, b
{text-decoration:none;cursor:crosshair;color:#FAD0E5;letter-spacing:3px;
word-spacing:2px;height:1px;behavior:url(link.htc);
filter: progid: dximagetransform.microsoft.pixelate(duration=.4, maxSquare=22, enabled=false); }
Observation 6
This looks like code was copied from somewhere else. Someone can correct me, but I don’t think "behavior:url(link.htc);" will do anything.

Observation 7
Links should not be set to height:1px. Surely this is a bad idea.

Observation 8
Links should not be set the same style as bold text. It is really important that people be able to tell what the links are. If bold text looks the same, people will get confused.



filter: progid: dximagetransform.microsoft.pixelate(duration=.4, maxSquare=22, enabled=false);
Observation 9
Filters are OK to use, but remember that IE is the only browser that can see them. Make sure your design works in Firefox.



cursor: crosshair;
Observation 10
You can do a lot of things with CSS, but that doesn’t mean you SHOULD do it. For example, crosshairs have a specific use and meaning in the computer world. If you make the cursor a crosshair on links, people will get confused.



font-color: white;
Observation 11
font-color is not CSS. You want simply "color".



.calplug tr td {
color: #FFFFFF;
}
Observation 12
Make use of .calplug where neccessary. When you style .calplug tr td {…} this correctly sets the background color of the calendar table. Not always necessary though.





Observation 13
Don’t make text jump around when you move the mouse around.

One example of this is when you make normal links standard font weight, and :hover links bold. As you drag the mouse across a link, it becomes bold. This would be OK except for the fact that bold text is slightly longer then regular text, and it pushes the following text. In the above picture, we are moving the mouse across "charity" – not only does charity get bold when you mouseover, but Thanksgiving shifts back and forth too. Looks sloppy.

Another example: Putting borders around links on hover.


Observation 14
It is not recommended to change the MSUSER and TAG images. People reckognize the symbols, and they are used for a reason. Changing them is fine, but it makes the site more difficult to use.