After much digging through code, firebugging, etc., I figured out that the problem has to do with position:relative and position:absolute.

It would appear that position:relative will trump position:absolute no matter what the z-index. Very confusing and frustrating.

The fix I ended up using was to add a inline style of position:static on the tags that were being made relative. This fixed it and I didn’t have to edit the JQueryUI generated CSS.

Set the parent element to have height:100%. It should work now. For clarity sake, here’s some sample code:
<div style="height:100%">
<div style="float:left;width:100px;">left stuff</div>
<div style="float:right;width:100px;">right stuff</div>
<div style="clear:both;">Clear</div>
</div>

This one line:

li {
display:inline;
}

That’s it. The rest is just decoration and making it look right.

If your style sheet has this line at the top Safari won’t display certain background colors.

@charset “utf-8″;

When you create an HTML file in Dreamweaver and add CSS directly to the HTML file, it will automatically insert this into the style section. If you then copy the entire style section and create an external stylesheet, it will then remove all of your background colors. Luckily, it’s an easy fix. Just remove the charset. It’s not needed for CSS unless you’re using a foriegn language that has non-ascii characters (in the code, not the text).

I long thought it impossible to have a drop down fall over a flash movie as you would often want in a header of a website.

However, I just saw a website where they accomplished this. After investigating, I found a JQuery library that allows you to do this.

It involves a new way of embedding flash into pages. With just a div tag and a few lines of javascript you can easily embed flash AND have the opportunity to display drop downs over them.

Here’s the link showing it in action:
http://flowplayer.org/tools/demos/flashembed/wmode.html

If you know of any other ways, please pipe up and let us know.

Here’s another link for a great CSS drop down menu:
http://htmldog.com/articles/suckerfish/dropdowns/

Update
It turns out that it’s not the awesomeness of jquery tools that allows you to do this. It’s simply a parameter wmode=transparent that allows it. Jquery tools does look really cool, however.

Another good link for CSS menus is http://purecssmenu.com/ It is an online CSS menu generator.

Unfortunately, this often wipes out the default p tag padding and margin. The following style will restore a p to it’s normal margin (it doesn’t have a padding).

Each browser styles the p tag differently, thus this restores it to what it would look like in Firefox, creating a uniform look. Exactly what we’re going for.
p{
margin: 1em 0px;
}

Source

Here’s a link on how to use CSS Style Resets correctly:
Resetting Yoru Styles with CSS Reset

I just recently found two very useful resources when it comes to making div tags float and pad correctly:

First explains and gives a fix for the odd fact that IE5 and IE6 will double the left margin of an element that has a float:left in it.

The fix is awesomely simple. You just set display:inline;.

http://www.positioniseverything.net/explorer/doubled-margin.html

The other explains gives a fix for the fact that IE5 and IE6 treat padding differently. Per CSS specifications, padding should add to the overall width. So, if you have a 100px div tag with 20px padding on all sides, it should be 140px wide.

The previous versions of IE keep the width exactly and simply pad inward rather than outward. All fine and dandy, except all other browsers don’t.

This is a bit more complicated, here’s the overall hack:
div.content {
width:400px;
voice-family: "\"}\"";
voice-family:inherit;
width:300px;
}
/* CSS1 UAs should see and use 2nd width */

html>body .content { width:300px }

http://tantek.com/CSS/Examples/boxmodelhack.html

http://www.positioniseverything.net/explorer/floatIndent.html