Hi

I'm having a problem with CSS layout and I hope someone can help me.

I'm working on the design for this time report system and i'm doing the layout in CSS. It's both fixed and liquid which is difficult for me as i'm a beginner on CSS-layout.

It looks good in IE but in the other borwsers it won't scale down the way i want it to. The divs just jumps down and ens up beneath echother.

Here is the link to the page

I wonder if i've done this completely wrong or if it's just a smaller bug that is easly fixed.

Maybe it's not even possible to do this, I don't know.

Can anyone please help me with this as it's driving me nuts.

Here is the HTML code:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

<html>
<head>
<title>TOJ - Tid och jobbrapportering</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>

<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>

<link href="css/toj.css" rel="stylesheet" type="text/css"/>
</head>

<body>


<div id="wrapper">
<div id="tojlogo"></div>

<div id="wrapperlinks">
	<div id="link_user_on">Anv&auml;ndare</div>
	<div id="link_admin_off"><a href="#" class="linksbutton">Administrat&ouml;r</a></div>
	<div id="link_report_off"><a href="#" class="linksbutton">Intressent</a></div>
</div>

<div id="wrapper_sheet">
  <div id="wrapper_top"> 
    <div id="sheet_top_l_corner"></div>
    <div id="sheet_top_static"></div>
    <div id="tab_on_l"></div>
      <div id="tab_on">Tidkort</div>
    <div id="tab_on_r"></div>
    <div id="tab_off_l"></div>
      <div id="tab_off"><a href="#" class="linksbutton">Egna rapporter</a></div>
    <div id="tab_off_r"></div>
  </div>
  
  <div id="wrapper_middle"> 
    <div id="wrapper_left"> 
    </div>
	<div id="wrapper_main"><br/>
        <table width="75%" border="0" class="helg">
          <tr>
            <td>&nbsp;<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></td>
          </tr>
        </table>
        <br/>
        <br/><br/><br/><br/></div>
  </div>
  
  <div id="wrapper_bottom"> 
  <div id="blad_ned">
    <div id="sheet_bottom_l_corner"></div>
	</div>
  </div>
</div>

	

</div>

</body>
</html>
And here is the CSS:

Code:
body {
	background:url(../bilder/bg.gif) repeat-x #2882A1;
	margin:0;
	padding:0;
}

#wrapper {
	width:100%;
	height:100%;
	}

#tojlogo {
	background: url(../bilder/toj_text.gif) no-repeat bottom;
	width:139px;
	height:59px;
	clear:right;
	}

#wrapperlinks {
	margin:0;
	width:122px;
	height:300px;
	float:left;
	background:url(../bilder/gubbe.gif) no-repeat ;
	}

/* ------ Vänsterlänkar -------*/

#link_user_on {
	margin-top:96px;
	margin-left:0;
	width:97px;
	height:24px;
	padding-top: 7px;
	padding-left: 25px;	
	font-family: verdana,arial,san-serif;
	font-size:12px;
	font-weight:bold;
	color: #fff;
	background: url(../bilder/kn_anvandare_on.gif) no-repeat;
}

#link_user_off {
	margin-top:96px;
	width:97px;
	height:24px;
	background: url(../bilder/kn_anvandare_off.gif) no-repeat;
}

#link_admin_on{
	margin-top:3px;
	width:97px;
	height:24px;
	padding-top: 7px;
	padding-left: 25px;	
	font-family: verdana,arial,san-serif;
	font-size:12px;
	font-weight:bold;
	color: #fff;
	background: url(../bilder/kn_admin_on.gif) no-repeat;
}

#link_admin_off {
	margin-top:3px;
	width:97px;
	height:24px;
	padding-top: 7px;
	padding-left: 25px;	
	font-family: verdana,arial,san-serif;
	font-size:12px;
	font-weight:bold;
	color: #003551;
	background: url(../bilder/kn_admin_off.gif) no-repeat;
}

#link_report_on {
	margin-top:3px;
	left:0px;
	width:97px;
	height:24px;
	padding-top: 7px;
	padding-left: 25px;	
	font-family: verdana,arial,san-serif;
	font-size:12px;
	font-weight:bold;
	color: #fff;
	background: url(../bilder/kn_rapport_on.gif) no-repeat;
}

#link_report_off {
	margin-top:3px;
	left:0px;
	width:97px;
	height:24px;
	padding-top: 8px;
	padding-left: 25px;	
	font-family: verdana,arial,san-serif;
	font-size:12px;
	font-weight:bold;
	color: #003551;
	background: url(../bilder/kn_rapport_off.gif) no-repeat;
}	
/*--- Innehåller bladet*/


#wrapper_sheet{
margin:0;
	float:left;
	height:100%;
	width:90%;
	clear:right;
}
	
/*--------innehåller topdelen i bladet-----*/
	
#wrapper_top {
	float:left;
	height:46px;
	width:100%;
	background: url(../bilder/blad_top.gif) repeat-x;
	clear:right;

		}
	
#sheet_top_l_corner {
	background: url(../bilder/blad_top_v_horn.gif) no-repeat top left;
	float:left;
	width:16px;
	height:46px;

		}
		
#sheet_top_static {
	background: url(../bilder/blad_top.gif) repeat-x left;
	float:left;
	width:40px;
	height:46px;
	}
		
#tab_on_l{
	background: url(../bilder/flik_on_v.gif) no-repeat;
	float:left;
	width:36px;
	height:46px;
	}
		
#tab_on{
	background: url(../bilder/flik_on.gif) repeat-x;
	float:left;
	height:31px;
	font-family:Verdana, Arial, Helvetica, sans-serif; 
	font-size:12px; 
	color:#de8500;
	font-weight:bold;
	padding-top:15px;
	}
		
#tab_on_r{
	background: url(../bilder/flik_on_h.gif) no-repeat;
	float:left;
	width:36px;
	height:46px;
		}
		
#tab_off_l{
	background: url(../bilder/flik_off_v.gif) no-repeat;
	float:left;
	width:36px;
	height:46px;
}
		
#tab_off{
	background: url(../bilder/flik_off.gif) repeat-x;
	float:left;
	height:32px;
	padding-top:14px;
	}
		
#tab_off_r{
	background: url(../bilder/flik_off_h.gif) no-repeat;
	float:left;
	width:36px;
	height:46px;
	}

/*---------Innehåller hela mittendelen inkl vänster kanten*/	

#wrapper_middle {
	width:100%;
	height:100%;
	float:left;
	background:url(../bilder/blad_v.gif) repeat-y top left #E5F7FF;
	}	
		
/*--Innehåller vänsterkanten på bladet som ligger i wrapper_middle---*/
	
#wrapper_left {
	background: url(../bilder/blad_v_anv_aktiv.gif) no-repeat;
	width:16px;
	height:264px;				
	float:left;
	}

		
/*-------Innehåller tidkortet--------*/		
	
#wrapper_main{
	background-color:#bae1f3;
	float:left;
	margin-top:30px;
	height:100%;
	width:95%;
	}		

/*------Innehåller nederkanten på bladet--------*/
	
#wrapper_bottom{
	float:left;
	height:16px;
	width:100%;
	background: url(../bilder/blad_ned.gif) repeat-x top;
clear:both;
	}
	
#sheet_bottom_l_corner {
	background: url(../bilder/blad_ned_v_horn.gif) no-repeat top;
	float:left;
	width:16px;
	height:16px;
		}
I would be so grateful if someone could help me with this.

Thank you!