problems with css and my website

[reggyp]

hi all,

i have been desiging a site for my local cricket club www.eggboroughpscc.co.uk i have used css and tested it on my resolution 1280x1024.
i know this isnt a standard res for most people but i have tried making the site available for 1024x768 but i am having some problems.

i only started with css about a week ago and my coding is taken from various tutorials around the web and looks terrible ( i am still learning )

could someone please take a look at where i am going wrong with this site and guide me to the fixes it requires to work in browsers with lower resolutions.

i will post my css code below ( please dont laugh)

p.s.
i do have a problem with scaling bg for my content the bg i made isnt seemless and as such will cause me problems once content gets too long any way i can sort this out?

html, body {
text-align: center;
background-image: url(imagestest/background.jpg);
background-attachment: fixed;
background-color: #000000;
}
h1, h2, h3, h4, h5, h6
{
color: #872020;
font-family: comic sans MS, Times New Roman, Times, serif;
line-height: 100%;
padding: 20px 0px 8px 0px;
margin:0;
font-size: 20px;
} 
/* images outside of container */
#champs
{
position: absolute;
left: 950px;
top: 350px;
background-image: url(imagestest/champs.png);
background-repeat: no-repeat;
width: 222px;
height: 170px;
}
#capn
{
position: absolute;
left: 950px;
top: 16px;
background-image: url(imagestest/captain.png);
background-repeat: no-repeat;
width: 160px;
height: 276px;
overflow: hidden;
margin:0;
}
/* end of images outside */
body {
font-family: comic sans MS, Arial, Verdana, Helvetica, Sans-serif;
font-size: 15px;
color: #000000;
text-align: center;
font-size: 13px;
}
#container 
{
width: 599px;
margin: auto;
text-align: left;
}
#header 
{
background-image: url(imagestest/banner.png);
background-repeat: no-repeat;
width: 599px;
height: 231px;
}
#topmenu
{
background-image: url(imagestest/links.png);
background-repeat: no-repeat;
width: 599px;
height: 100px;
margin: none;
padding: 0;
}
ul#menu 
{
margin-left: 70px;
padding-left: 0;
list-style-type: none;
float: left;
width: 500px;
padding: 0;
}
ul#menu li
{
display: inline;
}
ul#menu a
{
display: block;
float: left;
padding: .1em .5em;
text-decoration: none;
}
ul#menu a:link img
{
border-style: none;
}
ul#menu a:visited img
{
border-style: none;
}
#contentbox
{
background-image: url(imagestest/contentbg2.png);
background-repeat: repeat-x;
width: 599px;/* was 599px */
height: auto;
margin: 0;
padding: 0;
}
/* test for affiliate links */
#page2 
{
background-image: url(imagestest/contentbg2.png);
width: auto;/* was 599px */
height: auto;
margin: 0;
padding: 0;
padding-left: 75px;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 5px;
}
#news
{
height: auto;
width: auto;
padding-left: 75px;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 5px;
}
#sidebar
{
background-image: url(imagestest/postit.png);
background-repeat: no-repeat;
width: 242;
height: 235;
position: absolute;
left: 100px;
top: 90px;
padding: 15px 0px 0 0px;
text-align: left;
}
ul#sidelinks
{
list-style-type: none;
}
ul#sidelinks a
{
text-decoration: none;
color: #000;
}
ul#sidelinks a:link img
{
border-style: none;
}
ul#sidelinks a:visited img
{
border-style: none;
}
#footer
{
margin:0;
}
/* sponsors section */
#images
{
width: 599px;
height: 600px;
}
div.thumbnail
{
width: 100px;
float: left;
margin: 10px 0px 0px 0px;
padding: ;
}
div.thumbnail img
{
border-style: none;
border: 1px solid #656464;
}
/* League Table data */
table.helpT
{ 
text-align: center;
font-family: Verdana;
font-weight: normal;
font-size: 11px;
color: #404040;
width: 500px;
background-color: #fafafa;
border: 1px #6699CC solid;
border-collapse: collapse;
border-spacing: 0px; 
}
td.helpHed
{ 
border-bottom: 2px solid #6699CC;
border-left: 1px solid #6699CC;
background-color: #BEC8D1;
text-align: left;
text-indent: 5px;
font-family: Verdana;
font-weight: bold;
font-size: 11px;
color: #404040; 
}
td.helpBod
{ 
border-bottom: 1px solid #9CF;
border-top: 0px;
border-left: 1px solid #9CF;
border-right: 0px;
text-align: left;
text-indent: 10px;
font-family: Verdana, sans-serif, Arial;
font-weight: normal;
font-size: 11px;
color: #404040;
background-color: #fafafa; 
}
table.sofT
{ 
text-align: left;
font-family: Verdana;
font-weight: normal;
font-size: 11px;
color: #404040;
width: 500px;
background-color: #fafafa;
border: 1px #6699CC solid;
border-collapse: collapse;
border-spacing: 0px; 
}
/* extra divs */
#extradiv1
{
}
#extradiv2
{
}
#extradiv3
{
}
#extradiv4
{
}
#extradiv5
{
}

[swa66]

font-family: comic sans MS, Times New Roman, Times, serif;

is better written as

font-family: "comic sans MS", "Times New Roman", Times, serif; 

On that note, do validate your CSS.
Absolute positioning will make a flexible with very hard.

[Xapti]

The main problem is that you're using absolute positioning for the design, which is not very flexible. To design with floats/CSS, you should keep things flexible, as that's how they work best for the user, enabling better cross browser support. Objects should just be positioned using the "float" property, and then assign a width if you want, such as in em units.

It's also hard to see exactly how good/bad your design is when you give the CSS code, but not the HTML. One thing to look for in HTML code, aside from how the CSS affects it (cause we really have no idea what most of your CSS does really, just have to assume you have certain elements on your HTML page in certain orders) is if you have a doctype. Make sure you include a valid doctype, such as html 4.01 strict.

[g1smd]

The use of relative URLs for calling images, might mean that some pages fail to load their background images.

I would start the URL with a "/" and specify the full path for each image in that case.

Make sure that your HTML validates. If you style a container and its end tag is missing, or is incorrectly nested, you may get unwanted style-bleed into other parts of the page.