Sizing to any screen resolution.

[tcbisthewaytobe]

I have struggled with this problem for a very long time. I cannot seem to perfect the web page I am making to resize to any screen resolution. The website appears just as I want it to in the 1024 x 768 screen resolution. It also is acceptable in 1366 x 768 as well. The problem is that in any other screen resolution the Iframe I have in place deviates to the left or right. This also holds true for any links or text I have on the screen.

I am trying to use a background image fixed in the center of the site and the iframe, links, and so on to remain in the perfect position no matter what screen resolution. I have tried to use tables and div settings to fix the problem, but it persists. Could the problem be that I create the iframe in the page instead of the CSS?

www.tbunn.webs.com/home1.htm (this is my example using div settings.)

www.tbunn.webs.com/newhome.htm (this is my example using tables.)

the only one that half way works is the tables version. I will also include the code for my CSS file. This problem has literally eluded me for 2 years. I could really use some tips on how to fix this specifically. I assumed using a table with percentage values and cells using pixel values would work. I just can't seem to figure it out.

Thankyou very much,
Travis Bunn.


(CSS code follows.)

BODY {
margin: 0;
padding: 0;
scrollbar-face-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #000000;
scrollbar-arrow-color: #E9DC9B;
background: #000000 url(images/Travbg2.jpg) fixed center top no-repeat;
cursor: crosshair;
}

#page {100%
}

#transparent {
filter: chroma(#D6E4F1);
}
A {
COLOR: #3E8295;
FILTER: blur;
FONT-FAMILY: Verdana, verdana, arial;
FONT-SIZE: 10px;
FONT-STYLE: normal;
LINE-HEIGHT: normal;
TEXT-DECORATION: none;
}
A:hover {
COLOR: #000000;
FILTER: blur (Add=5,Strength=5,Direction=180);
HEIGHT: 0px;
TEXT-DECORATION: none;
}
.def {
COLOR: #3E8295;
FONT-FAMILY: Verdana, verdana, arial;
FONT-SIZE: 10px;
}
.heart {
COLOR: #FFFFFF;
FONT-FAMILY: Verdana, verdana, arial;
FONT-SIZE: 10px;
}
.black {
COLOR: #000000;
FONT-FAMILY: Verdana, verdana, arial;
FONT-SIZE: 10px;
}
.td {
COLOR: #000000;
FONT-FAMILY: Verdana, verdana, arial;
FONT-SIZE: 08px;
}
.link {
COLOR: #3E8295;
FONT-FAMILY: Verdana, verdana, arial;
FONT-SIZE: 12px;
}