Problems Positioning with CSS

[kirstybandm]

Hi,
I've been teaching myself CSS through a mixture of reading books and modifying free scripts I've found online. Anyway, I've designed my website now and everything was looking great on my monitor but when I uploaded it, it appeared differently on the computers in the office that had different sized monitors or used a different resolution to 1024 x 728.

I found out that this was largely due to the fact that I was using absolute positioning not relative.

The page is www.bandm.co.uk/Index.asp

The problem only occurred with the three content boxes in the centre of the page (referenced as .toprow .middlerow and .bottomrow in my CSS file) I've managed to change it so the top two appear as they should in all browsers now.

My problem is '.bottomrow'. With all three rows set at 'position:relative;' the '.bottomrow' doesn't show at all in my browser. I've added a 'z-index' in case it appears underneath '.middlerow' and have tried changing the percentage of the 'top' value. The only way it appears is if I change the 'top' value to 'inherent;' but then it overlaps '.middlerow'.

Below is the external CSS that my page is referencing

/* CSS Document */

body {
color:#333;
background-color:white;
margin:20px;
padding:0px;
font:11px verdana, arial, helvetica, sans-serif;
}
span {color:#FFFFFF;}
h1 {
margin:0px 0px 15px 0px;
padding:0px;
color:#FFFFFF;
font-size:28px;
font-weight:900;
}
h2 {
font:bold 12px/14px verdana, arial, helvetica, sans-serif;
margin:0px 0px 5px 0px;
padding:0px;
}
h3 {
margin:0px 0px 15px 0px;
padding:0px;
color:#999999;
font-size:28px;
font-weight:28px;
}
h4 {
font:bold 10px/12px verdana, arial, helvetica, sans-serif;
margin:0px 0px 5px 0px;
padding:0px;
}
p {
font:11px/20px verdana, arial, helvetica, sans-serif;
margin:0px 0px 16px 0px;
padding:0px;
}
p.footnotes {
font:9px/18px verdana, arial, helvetica, sans-serif;
margin:0px 0px 16px 0px;
padding:0px;
}
.body>p {margin:0px;}
.body>p+p {text-indent:30px;}
.Content>p {margin:0px;}
.Content>p+p {text-indent:30px;}


a.BodyLinks {
color:#000099;
font-size:11px;
font-family:verdana, arial, helvetica, sans-serif;
font-weight:600;
text-decoration:none;
}
a.BodyLinks:link {color:#000099;}
a.BodyLinks:visited {color:#000099;}
a.BodyLinks:hover {color:#FF9900;}

a.HeaderLinks {
color:#FFFFFF;
font-size:11px;
font-family:verdana, arial, helvetica, sans-serif;
font-weight:600;
text-decoration:none;
}
a.HeaderLinks:link {color:#FFFFFF;}
a.HeaderLinks:visited {color:#FFFFFF;}
a.HeaderLinks:hover {color:#FF9900;}


.body {
position:absolute;
width:1500px;
top:-2px;
Left:-1px;
height:40px;
background-color:#000099;
padding:10px;
z-index:4;
}

.toprow {
position:relative;
width:60%;
left:17%;
min-width:50%;
height:20%;
top:18%;
border:1px solid black;
background-color:white;
padding:10px;
z-index:1;
}

.middlerow {
position:relative;
top:20%;
left:17%;
width:60%;
min-width:50%;
height:80%;
min-height:40%;
border:1px solid black;
background-color:white;
padding:10px;
z-index:2;
}

.bottomrow {
position:relative;
top:inherent;
left:17%;
width:60%;
min-width:50%;
height:10%;
border:1px solid black;
background-color:white;
padding:10px;
z-index:3;
}

#navAlpha {
position:absolute;
width:130px;
top:0px;
left:-3px;
padding-top:120px;
padding-left:10px;
background-color:#EBE9E9;
z-index:2;


/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity.
Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it.
IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style
declaration. The incorrect IE5/Win value is above, while the correct value is
below. See http://glish.com/css/hacks.asp for details. */
voice-family: "\"}\"";
voice-family:inherit;
width:128px;
}
/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct
length values to user agents that exhibit the parsing error exploited above yet get
the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */
body>#navAlpha {width:128px;}

.awardcolumn {
position:absolute;
width:130px;
top:470px;
left:0px;
padding:10px;
z-index:2;
}


#navBeta {
position:absolute;
width:130px;
top:0px;
right:0px;
padding-top:120px;
padding-left:10px;
background-color:#EBE9E9;
z-index:3;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:168px;
}
/* Again, "be nice to Opera 5". */
body>#navBeta {width:168px;}

.spotlight {
position:absolute;
width:160px;
Height:auto;
top:278px;
right:0px;
background-color:#EBE9E9;
padding:10px;
z-index:4;
}


Is this something easy that I've missed or have I got it all wrong?

Thanks

Kirsty