Hack hack hack... or?

1

Hey guys,

I recently delved a little into css based layouts instead of those messy tables.

So with some help of some tutorials i created a pretty basic layout, except using my own values instead. But when showed in our most fav bug browser the ■■■■ left menu just… dissapears!

here is the link:

http://e.domaindlx.com/lowenf/css/index.htm

Do i need one of the hundred hacks to fix this? And how the hell are you supposed to found out which hack to apply? :hangover: They all got named from their authors, not having a handy name to actually describe what the hack is about…

I’ve tried some different stuff, originaly I used a list for the links in the leftnav (so to style them later). So i read about the 1 point smith manoeuvre. Now the menu does show, but like in the middle of the rightnav o_O I also tried removing the list, using <br />'s instead, but now it didn’t show at all!
Firefox displays the page fine.

here the code:


/* 4 main containers */
#container{
	margin: 50px auto;
	width: 70%;
	text-align:left;
	border:1px solid black;
}

#top{
	background-color:#999999;
	border-bottom: 1px solid black;
	padding: .5 em;
}
#middle{
	position:relative;
	background-color:#0099CC
}
#bottom{
	background-color:#003366;
	border-top: 1px solid black;
	clear:both;
}

/* layout in #middle */

#leftnav{
	left: 1em;
	padding: 1em;
	margin: 0;
	float: left;
	width: 100px;
}

#rightnav{
	margin-left: 150px;
	padding: 1em;
	max-width: 36em;
}

/* content for middle */
#leftnav-con{

}

#rightnav-con{

}


/* elements */
body{
	margin:0px;
	padding: 0px;
	text-align:center;
}

h1, h2, h4{
	margin: 0;
}

/*1 point smith manoeuvre*/
ul, ol, dl {
	position: relative;  
}