CSS problems

[jozza800]

Hi, im an old fashioned web designer, using html tables for layout. I thought it was about time i moved onto using CSS.

Im alright with stylesheets for text formatting, but im having a bit of a mare when it comes to page layout using <divs>.

Current example http://protechwindows.com/New_ProtechWindows/

The problem as you can see is that in firefox i end up with what appears to be a 20px gap between the header an the content, which i want to be flush. Like it is in IE, but the problem with IE is that the small amount of text is repeated outside of the content div (f that makes sense.

Any ideas?

Thanks


CSS Code

/* CSS Document */
/* CONTENT HOLDER */
#wrapper {
	width:900px;
	margin:0;
	padding:0;
	position:absolute;
	left:0;
	top:0;
	}

/* HEADER */
#header {
	width:900px;
	padding:0;
	margin:0;
	height:80px;
	background:  url("../images/header_repeat.jpg") repeat-x 100%;
	}
	
#header h1 {
	font: 32px arial;
	letter-spacing: -.05em;
	color:#ccc;
	border:none;
}

/* LINKS */
a,a:link,a:link,a:link,a:hover {background:transparent;text-decoration:none;cursor:pointer} 
a:link {color:#339900}  
a:hover,a:active {color:#069}

a.email:link {color:#339900}  
a.email:hover,a:active {color:#069}


/* NAVIGATION */	
#nav {
	width:200px;
    float:left;
	background-color:#DAFFC8;
	padding:0px 0px 0px 0px;
	}
	
#nav ul {
	list-style-image: url(../images/img02.gif);
	
}

#nav li {
	border-bottom: 1px solid #1C4E02;

	
}

#nav li li {
	padding-left: 40px;
	
}

#nav a {
	color:#339900;
	font:12px arial;
	text-docoration:none
}

#nav a:hover {
	color:#BDC7B7;
}

#nav a.main_cat {
	color:#272E24;
	font:14px arial bold;
}

#nav a.main_cat:hover {
	color:#BDC7B7;
}

#content {
	float:right;
	width:699px;
	height:100%;
	background-color:#BDC7B7;
	padding:0px 0px 0px 0px;
	}
	
#content p {
	color:white;
	}
	
#footer {
	width:900px;
	height:20px;
	padding:0px;
	background-color:black;
	}

 

[jozza800]

Thanks Marlus123.

Id figured out that it was the <h1> tag. I just removed it ans styled the header div, but your is better as it allows me to keep the <h1> tag.

whats the difference between setting the body margins to 0 rather than absolute positioning?