CSS - My First Css Web Site

Upon initial load, you see a red block over the images. Why does it do that and how can I fix it?
http://www.kubicle.com/beta/

Hey guys. I've been looking for this site that I should have bookmarked when I found but have lost. I can TRY and describe it as best I can.

The main background color was white with, depending on the style you've set, a glass of wine or mug of beer fairly large in size and with a low opacity.

The styles were simple. Purple or yellow. Wine or beer. Mostly black text. I forget how it was you were able to change them, but he used it in some examples.

The menu had list items similar to the naving convention:
liquid 2 column nf
fixed 3 column nfnh
liquid/fixed 3 column
etc.

The header was the whole wording of whatever the menu items were.

Each page he showed examples using css, xhtml and sometimes javascript with the code on the page.

At the bottom of each example it had a group for user comments. Some were empty.

I don't remember any logos at all on the site other than the wine and beer. I think the url was something like: www.site.com/nameNO~/

I found it the same day I found the "seabold why tables are stupid" site. I remember reading a solution to a problem that I've encountered but I don't remember the code, I was just skimming the site. I tried finding other solutions, or the same solution somewhere else with no luck.

Thanks

Hey all. I have not done a great deal of web development, and whatever I have done has been with tables. I have seen a great many debates on the whole table vs div topic, and so this time thought I'd put together a site with divs + css rather than tables + css. so I have a few questions. here is the very simple code I've got so far.

Code:

<?php include("header.php"); ?>

	<div id='container'>
		<div id='header'>
		Header
		</div>

		<div id='rootmenu'>
		menu
		</div>

		<div id='docbody'>

			<div id='content'>
			content
			</div>

			<div id='sidemenu'>
			side
			</div>

		</div>
	</div>
	<div id='footer'>
	Footer
	</div>

<?php include("footer.php"); ?>

and the css file:

Code:

html, body
{
	height:100%;
}

#container
{
	width: 100%;
	height: 100%;
	margin: 0 auto 0 auto;
	margin: 0px auto 0px auto;
}

#header
{
	height: 10%;
	width: 70%;
	background: #000;
	margin: 0px auto 0px auto;
}

#rootmenu
{
	width: 70%;
	background: #fff;
	margin-bottom: 5px;
	margin: 0px auto 0px auto;
}

#docbody
{
	width: 70%;
	height: 85%;
	padding: 0px;
	margin: 0px auto 0px auto;
}

#content
{
	height: 100%;
	width: 80%;
	background: #45f;
	float: left;
}

#sidemenu
{
	height: 100%;
	width: 15%;
	background: #56f;
	float: right;
}

#footer
{
	width: 70%;
	background: #333;
	margin: 0 auto 0 auto;
}

most of this is based on code I've been looking at on sites like oswd.org. I would just like to know that I'm on the right track with my divs and css before putting too much work into the site. it always sucks to realise a serious design flaw at a later time. so please, could I get some suggestions on what I need to change and any important things I should know? cheers.

I've been trying to work this for 3 hours now, and I need help!!
My problem is that I get cursors on 3 of my links but not the other two.

Link to the site is http://borgweb.se/beta <- try the menu

css is:

Code:

body {
	min-width:1024px;
	background-color: #f5f3ec;
	margin-right: 0px;
	margin-left: 0px;
	padding: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
}
#header {
	height:240px;
	width:100%;
	background-color: #1e1303;
	background-image: url(images/topback.png);
	background-repeat: no-repeat;
	background-position: 50%;
	margin-right: auto;
	margin-left: auto;
}
#header-logo{
	max-width:1024px;
	position:relative;
	width:1024px;
	height:240px;
	background-image: url(images/bw_logo.png);
	background-repeat: no-repeat;
	display: block;
	margin-right: auto;
	margin-left: auto;
}
#menu {
	background-image: url(images/menu.png);
	height: 76px;
	width: 75px;
	float: right;
	position: relative;
	top: 80px;
	right: 20%;
}

#home {
	height: 12px;
	position: relative;
	display: block;
	cursor: pointer;
}

#home a {
	background-position: 75px;

}

#aboutme {
	height: 12px;
	position: relative;
	top: -3px;
	cursor: pointer;
}
#portfolio {
	height: 12px;
	position: relative;
	top: -5px;
	cursor: pointer;
}
#blog {
	height: 12px;
	position: relative;
	top: -8px;
	cursor: pointer;
}
#contact {
	height: 12px;
	position: relative;
	top: -10px;
	cursor: pointer;
}
#container {
	width: 1024px;
	margin-right: auto;
	margin-left: auto;
	display: block;
	float: left;
}

html is:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="header">

<div id="header-logo">

	
            	<div id="menu">
                
	            <div id="home" onclick="location.url('#');"></div>

                    <div id="aboutme"></div>

                    <div id="portfolio"></div>

                    <div id="blog"></div>

                    <div id="contact"></div>

		</div>

</div>
</div>
</body>
</html>

So I am just getting into designing with CSS, and really enjoying it. I put up this site for a friend, its my first coded by hand. I did it all with BBedit on a mac, and it looks fine on Safari and Firefox. However, as you can see, it looks terrible on IE, totally unusable, and I would accept any advice on how to fix it. The menu came from seco consultants
and uses whatever:hover to work in IE, though in this case it dont work. The layout is all screwed up too. Anyone want to offer some advice? Here's the site: dobsonfarm.com/connaught

Thanks very much,

Robin Turner