Undecided

I’m so far behind on CSS style page design, but my excuse is:  I don’t do this for a living.  So here are a few notes on things that I’ve been reading about the last few on CSS and DIV/SPAN tags.

I found a ton of useful tutorials over at HTML Dog.  Here are a few highlights from things I’ve read so far (both there and elsewhere).  I’ll post more later.

Inline scrolling

Making a box that scrolls:

.box
{
width:445px;
height:250px;
overflow: scroll;
}

You could also add auto for overflow, which would only create scroll bars when the content overflowed and not add scroll bars when the content fit within the size of the content box (in the above example, if the content fit within 445px by 250px, then auto would not add scroll bars.)

This appears to work fine within the tinymce, but it doesn’t work within the blog’s theme.  I’m have to do some further investigation as to why.

Transparencies

Making an element transparent:

.transparent
{
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}

Usage:

<div class=”transparent”>A transparent div.</div>

Opacity values range from 0 to 1.

This works when I put the tag within the theme stylesheet but doesn’t work within the tinymce editor.  Further investigation is deserved.

ID vs Class

In CSS ID style elements (#) can only used once, a class style element (.) can be used multiple times.

CSS Grouping and Nesting

Grouping

h2 { color: red; }
p { color: red; }

could be replaced with

h2, p { color: red; }

Nesting

You could also design your IDs and Classes to nest

#nestcontainer { background-color: #ffffff; }
#nestcontainer h2 { padding-bottom: 20px; color: black; }
#nestcontainer p { color: blue; }

This would make the external DIV tag have a white background and the H2 tag(s) within that DIV tag be padded on the bottom and black in color, but the P tag(s) within the DIV tag blue.

Psuedo-classes

• link is for an unvisited link.
• visited is for a link to a page that has already been visited.
• active is for a link when it is gains focus (for example, when it is clicked on).
• hover is for a link when the cursor is held over it.

Back to the current theme, must remember to backup more frequently.

Back to an older theme while I work through the bug.

http://trac.wordpress.org/ticket/7306

After upgrading to WordPress 2.6, the permalinks become corrupt.  Also, for some reason, my theme became corrupted.  Still investigating bug 2.