Could you take a quick gander at this site please and help me understand why the white block has moved up into the header div please.

Only in IE/win :-)
Actually: the white block doesn’t really move up, but the header collapses because there’s only floats in it, so the white background on wrapper doesn’t get properly covered by the background on header.

Give IE/win a well-placed ‘hasLayout’ trigger…
#header {
height: 1%;
}

…and it will behave and paint backgrounds as intended.

Is there anyway I can show a gray semi-transparency over any elements with a certain class (”disabled”)?

.disabled {
background-color: #666;
width: 100%;
height: 100%;
-moz-opacity: 0.7;
opacity: 0.7;
filter: alpha(opacity=70);
}

The first rule provides opacity levels in Gecko based browsers (Camino, Firefox, SeaMonkey), the second to Safari (and Opera I think), and the third is an IE specific one, which I suspect is not valid code, but which works.

Francky - Search Form experiments with css

Results

Tested in FF2, IE6, Opera9 under WinXP:
valid html | valid css | IE-proof 1 hacky | font-scaling / zooming allowed | disabling (background) images allowed | disabling css allowed…

… but some work for accessibility still remaining;
see for instance TheManInBlue

Does anyone know of any good sites or tutorials on this subject. I don’t want to use a template or anyone else’s theme or CSS style. Any thoughts?

Take a look at:
Urban Giraffe
How to design your own wp theme
Blank wp Theme
Four blank wp themes

And for completeness:
How to write a wp plugin

Nothing about templating in there but if you get that far give me a shout and help then.

I know there is a far better list at the css-d site (rounded corners) but I wanted to list some of the techniques I had found. So here goes:
Look at the source code
Nifty Corners: rounded corners without images (Uses CSS and JS).
In this article, we’ll show how customised borders and corners can be applied to fully fluid and flexible layouts with dynamic content, using sound and semantically logical mark-up.
“Bullet-Proof” Rounded Corners
Liquid rounded corners
Liquid corners playgarden

In order to make the actual corners you can try this:
To create rounded graphics in Photoshop first make a square or rectangle with the rectangular marquee tool. Before you fill it with a colour go to select>modify>smooth. Type in a number - usually between 4 and 12 is good. This essentially rounds the corners for you. Next, (or first) click on the colour palette square in the tools. Make a color you like. Fill your rounded marquee element with that colour.
CSS Rounded Box Generator (Beta)

And there we go. Onto less boxy and more rounded designs. So why is my site so boxy at the moment?

default: 100%(relative) =1em(relative– but causes a resizing bug in IE if used on the body) =16px(absolute– but IE can’t scale pixel font- sizes)

Q: Hi, I need some help with this. I am using Wordpress and I would like to get a dotted border around the different categories on the sidebar.

A: Apply the border style to the outer elements, the uo and ol, not to the li’s. The following will get you started.
#sidebar ul, #sidebar ul ol {
margin: 0;
padding: 0;
border: 2px dotted #ccc;
}

If you want the border only on the inner lists, try this instead:
#sidebar ul ul, #sidebar ul ol {
margin: 5px 0 0 10px;
border: 2px dotted #ccc;
}