Problems with template's interaction with index

My site is evereadyhardware.net or http://www.fortune3.com/evereadyhardware.

(CSS template and HTML Index code are below)

Designed the template using CSS.
The index is done with HTML tables (oy!).

The problem I am having is that the Home Page looks different from all of the other pages. This problem occurs in both HTML and CSS.

The Cart, though floated right, keeps getting mixed up with the Content area and the footer's margins act differently in the Home page and in other pages.

When I log in with my test user, the problems disappear even on the home page.

2 columns within a content div

I have a div id titled "content", and inside that div, I have two div classes for two columns, left and right. Here is my index:

Index Page

And here is my CSS:

@charset "UTF-8";
/* CSS Document */
 
body {
	background-color:#cc99ff;
}
 
#wrapper {
	margin:0 auto;
	padding:0;
	width: 954px;
}
 
#content {
	height: 300px;
	width:940px;
	background-image:url(../images/contentbackground.png);
	background-repeat:repeat;
	padding: 7px;
}
 
#footer {
	height:25px;
	background-color:#663399;
	clear:both;
}

Margin : Auto Container isn't centering

Dear Forum,

I've been busy for the past few hours trying to figure out some unknown problem I've encountered before in my experience with CSS.

The problem is as follows:
I have a container in which another div is contained called content. In the 'content' div all my web content will follow. The container div is there to make sure my webpage is aligned in the center.

In my html code it basically goes like this:

doctypes and declerations
body

content: bla bla bla

/body
/html

... The css code is:

body
{

CSS Rollover Positioning Text

Sorry I suck at css and most of the time I just try different properties to get my way. But this time I can't seem to get what I want.

I just started on this site

As you can see, I already designed the menu and what I'm stuck on is the menu rollovers. It's just a simple background hover image for the menu links but I can't seem to position the text without moving the background image too.

Please help, thanks.

z-index problem in ie7 with fixed header element and transparency

I've mocked up a page using 960.gs that has has several elements fixed in a div under which the content of the of the page is to flow. The background of this div is a CSS gradient, and has a height of 100% (if the gradient is applied to to the actual body of the page it doesn't actually extend the whole width of the page). As the user scrolls up, the content is to be viewable behind an opaque menu.

http://bit.ly/f2a4rC

The layout works as I want in FF and Chrome, but the content of the page scrolls over the fixed upper area in IE7.

Syndicate content