CSS interface vertical tiling problem

[Mort]

I have been meaning too convert my site from tables with images into CSS as it is a fairly simple vector design.

i finally got around to it, altho i'm having a problem, as i need the site to extend vertically so pages can be displayed without an iframe or something

here is the site as it should look (Edit: link was wrong, now linked too correct site, instead of splash page), and here is the layout in CSS

<!--

#Table_01 {
	position:relative;
	left:0px;
	top:0px;
	width:738px;
	height:503px;
}

#css-01 {
	position:absolute;
	left:0px;
	top:0px;
	width:20px;
	height:20px;

	background-color: #fca900;

	border-top: solid 1px #000000;
	border-left: solid 1px #000000;
}

#css-02 {
	position:absolute;
	left:20px;
	top:0px;
	width:128px;
	height:20px;

	background-color: #ffd88c;

	border-top: solid 1px #000000;
	border-left: solid 1px #000000;
}

#css-03 {
	position:absolute;
	left:148px;
	top:0px;
	width:569px;
	height:20px;

	background-color: #ffd88c;

	border-top: solid 1px #000000;
	border-left: solid 1px #000000;
}

#css-04 {
	position:absolute;
	left:717px;
	top:0px;
	width:21px;
	height:20px;

	background-color: #fca900;

	border-top: solid 1px #000000;
	border-left: solid 1px #000000;
	border-right: solid 1px #000000;
}

#css-05 {
	position:absolute;
	left:0px;
	top:20px;
	width:20px;
	height:87px;

	background-color: #ffd88c;

	border-top: solid 1px #000000;
	border-left: solid 1px #000000;
}

#css-06 {
	position:absolute;
	left:20px;
	top:20px;
	width:128px;
	height:87px;

	background-color: #ffeecc;

	border-top: solid 1px #000000;
	border-left: solid 1px #000000;
}

#css-07 {
	position:absolute;
	left:148px;
	top:20px;
	width:569px;
	height:87px;

	background-color: #ffeecc;

	border-top: solid 1px #000000;
	border-left: solid 1px #000000;
}

#css-08 {
	position:absolute;
	left:717px;
	top:20px;
	width:21px;
	height:87px;

	background-color: #ffd88c;

	border-top: solid 1px #000000;
	border-left: solid 1px #000000;
	border-right: solid 1px #000000;
}

#css-09 {
	position:absolute;
	left:0px;
	top:107px;
	width:20px;
	height:375px;

	background-color: #ffd88c;

	border-top: solid 1px #000000;
	border-left: solid 1px #000000;
}

#css-10 {
	position:absolute;
	left:20px;
	top:107px;
	width:128px;
	height:375px;

	background-color: #ffeecc;

	border-top: solid 1px #000000;
	border-left: solid 1px #000000;
}

#css-11 {
	position:absolute;
	left:148px;
	top:107px;
	width:569px;
	height:375px;

	background-color: #ffffff;

	border-top: solid 1px #000000;
	border-left: solid 1px #000000;
}

#css-12 {
	position:absolute;
	left:717px;
	top:107px;
	width:21px;
	height:375px;

	background-color: #ffd88c;

	border-top: solid 1px #000000;
	border-left: solid 1px #000000;
	border-right: solid 1px #000000;
}

#css-13 {
	position:absolute;
	left:0px;
	top:482px;
	width:20px;
	height:21px;

	background-color: #fca900;

	border-bottom: solid 1px #000000;
	border-top: solid 1px #000000;
	border-left: solid 1px #000000;
}

#css-14 {
	position:absolute;
	left:20px;
	top:482px;
	width:128px;
	height:21px;

	background-color: #ffd88c;

	border-bottom: solid 1px #000000;
	border-top: solid 1px #000000;
	border-left: solid 1px #000000;
}

#css-15 {
	position:absolute;
	left:148px;
	top:482px;
	width:569px;
	height:21px;

	background-color: #ffd88c;

	border-bottom: solid 1px #000000;
	border-top: solid 1px #000000;
	border-left: solid 1px #000000;
}

#css-16 {
	position:absolute;
	left:717px;
	top:482px;
	width:21px;
	height:21px;

	background-color: #fca900;

	border-bottom: solid 1px #000000;
	border-top: solid 1px #000000;
	border-right: solid 1px #000000;
	border-left: solid 1px #000000;
}

-->

so could anyone give me a hand as not looked at CSS much before. am guessing i'll need too change the 'absolute' positioning etc.

 

[Mort]

no offense taken mate

am more a php person, i just do all my designs in photoshop and slice em up so i can start building the back end and dynamic stuff. but wanted to check out CSS and everyone has to be a n00b at some point

so pls explain to me the point of CSS designs. i wanted to remake the interface in CSS the way i did, because we have 5 sub sites, all different colours, so i thought it would be better to do it all in code, rather than have the different coloured images in 5 different folders for 5 different sites.

and yes i used slices and imageready to generate the code, but that was just so i could figure it out, i will reconfigure it before i do the finished version



Edit: Just noticed the 1st link in my 1st post was wrong, now linked too correct site, instead of splash page

 

[Mort]

Also, would CSS stop the stupid STUPID bugs in IE where the tables cells are bigger than they should be so they just tile an extra bit of image onto the end / side, altho in FF it works just dandy

as that really bugs me