I am fairly new to CSS and am trying to complete this template. Attached are the HTML and CSS for the page. As you can see there should be a white "tab" floating above the banner in the upper right corner, however in Firefox it is floating to the left. I have it positioned absolute and with a fixed width... any ideas??

LT0012
—
2011-04-28T12:40:47Z —
#2

Here is the section of CSS that I'm struggling with. The #main_right_panel is below the .main_right_login_details which is the white tab that floats above the top banner. Here is a link to the site to see what I'm talking about.

You basically just need to add a right position to that absolute element to push it into place. Set position:relative on the container and then the element will be placed to the right of the container and not the viewport.

You have added float to the body which is killing firefox so remove it

You don;t need the dropshadow div as the image can be placed on the container anyway.

You've gone a bit overboard on your comments and there's no need to have all those start comments as the class is information enough.

You can add comments to the end of a container but only do it for the main structural containers and not all container. You have more comments than html and it actually makes it harder to work with. Only comment where necessary especially as comments trip older versions of IE up all the time.

No need for this:

<p class="clear"><br />
<br />
</p>

Use overflow:hidden on the parent or if you want visible overflow then use the clearfix method (see faq on floats - see my sig).

Don't wrap divs around uls when there's no need. The ul is a prefectly good container on its own.

The heading inside your ul needs to be inside a list item as all content must be in the list item in a ul structure.

Just use css and add the extra space you need with padding or margin where appropriate. Breaks are never used just to make space. They are used for natural line-breaks such as in poems, addresses, and between form controls.