Problem with displaying table, chart and images on 1 page

[stephen675]

Hi guys,

To start - I have about a day or two of CSS experience and I'm trying to create output that has an output table on the left side, image thumbnails and corresponding images in the middle (hover functionaltity) and a graph output on the right that uses data from the output table and a google javascript to display output as a pie chart. The issues are as follows:

a) Using Firefox and a 1440x900 screen: No problem
b) Using Firefox and a 1080x760 screen: Table on left truncates with only the right half being displayed
c) Using IE 7 and *any* screen size: A complete joke...

Here's the code I'm using:
table {
top: -7;
float: left;
left: -811px;
width:240px;
position:relative;
font-size:11px;
color: #000000;
margin: 10px 0;
background: #FFFFFF;
border-collapse: collapse;
}

.fromtable {
top:3px;
float: right;
border: 1px outset #e6e6e6;
background: #000000;
}

/* Pie Chart */
.results_table {
margin-top: 3px;
margin-right: 7px;
float: right;
clear: both;
}

body {
font-family:verdana, arial, sans-serif;
font-size: .9em;
color: #333333;
margin:0px;
padding:0px;
}
img {
border:none;
padding:0px;
margin:0px;
}

th {
background: #e6e6f6;
text-align: left;
text-transform: uppercase;
letter-spacing: .1em;
font-size: .9em;
padding: 2px 5px;
}
td {
border: 1px solid #ddd;
font-size: .9em;
padding: 2px 5px;
}

input[type="button"]{
position: absolute;
bottom: 20px;
left: 0px;
font-family:verdana, arial, sans-serif; font-size:12px;
font-weight:bold;
left: 10px;
width: 180px;
margin-top:5px;
}

/* Voted Gallery CSS */
ul#votedgallery {
top: 5px;
left: 311px;
width: 720px;
height:589px;
position:absolute;
background:#E8E8E8 url("lib_img/imagegallery.png") no-repeat scroll 50% 50%;
list-style-type:none;
list-style-position:outside;
margin:0px auto;
padding:0px;
}

ul#votedgallery li {
padding:0px;
margin:4px 0px 0px -55px;
}
ul#votedgallery li img {
display:block;
padding:0px;
margin:0px;
}

ul#votedgallery li a span {
display:none;
}

ul#votedgallery li a:hover span {
position:absolute;
width:800px;
height:600px;
top:0;
left:0;
display:block;
border:none;
}

Thanks in advance for your help.

[edited by: eelixduppy at 5:36 pm (utc) on Jan. 5, 2009]
[edit reason] disabled smileys [/edit]

[stephen675]

Anybody willing to help? Please. :)