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;
	}

 

[Markus123]

The margin at the top (in firefox) is coming from the margin on the H1 you're using for the logo-text, if you cancel out the margin:

#header h1 {
	font: 32px arial;
	letter-spacing: -.05em;
	color:#ccc;
	border:none;
	margin: 0;
}

It'll get rid of it.

In IE, as far as I can see appears to be a bug which I haven't come across before, but after messing for a while, if you remove the two comments in the HTML above the #content div it doesn't do it any more... I have no idea why you'd need to do this, but you often have to do strange things to accommodate IE.


One last thing, which isn't required but I'd recommend it, rather than absolutely positioning the wrapper div to 0,0 I'd set the margin to 0 for the body tag, it'll look the same, just if you want to center the layout at a later point it'll be easier.

body {
	padding: 0;
	margin: 0;
}

#wrapper {
	width:900px;
}

 

[MarcLister]

Quite a good response Markus123. I have set my css for my html files to have margin and padding set to 0 for body and * or html. Means I can set margins and paddings for elements myself.

 

[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?

 

[Tripnologist]

In IE, as far as I can see appears to be a bug which I haven't come across before, but after messing for a while, if you remove the two comments in the HTML above the #content div it doesn't do it any more... I have no idea why you'd need to do this, but you often have to do strange things to accommodate IE.

It's what I call the IE comment bug. Not exactly sure on all the details but it often occurs when there are <!-- --> comments and the last child div touches the right side of a parent div. The solution is quite easy. Feed IE margin-right: -3px to the last child div (in this case, #content) and it should sort it.