new website with css problems

[reggyp]

hi all,

i have been desiging a site for my local cricket club Eggborough Power Station Cricket club 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
{

}

[Toon]

Have a read about resets

A Killer Collection of Global CSS Reset Styles • Perishable Press

Didn't see a reset in your css so this might be a good place to start.

[reggyp]

aha! that has helped with the position of my links in the post it note section.

when i change the post it from absolute to relative, and test how the css works on other pages the post it can appear from half way down the page to out of the screen completely, also i get extra empty scrollable content and i dont know how to stop that

[Toon]

This might be the next read then

Floatutorial: Some definitions

[reggyp]

float didnt work unfortunately, but after another few hours of searching the answer was simple :/ i had to set negative margins for the div so the "space" was removed from where it would have been in the document flow!
simple when you know how!

[james]

You also have a CS problem - Comic Sans... Really ruins what is otherwise a good looking site!

[reggyp]

what would you suggest? i really have tried a load of standard fonts without getting the look i wanted :/

[Toon]

Try Trebuchet

Trebuchet font family : MyFonts

[reggyp]

i have made trbuchet the default (not uploaded yet),

i do now have another problem (others are all sorted now)

since i didnt have a doc type i have added this one:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

but by doing so i have caused a few other problems:
In IE the page itself is centered, but my relative divs are in the correct position but off to the left?

in firefox the whole page is aligned left see screens

my code 1st

* 
{
    padding: 0;
    margin: 0;
    
}

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: Trebuchet, Times New Roman, Times, serif;
    line-height: 100%;
    padding: 20px 0px 8px 0px;
    margin:0;
    font-size: 20px;
} 

#champs
{
    position: relative;
    left: 850px;
    top: 200px;
    background-image: url(imagestest/champs.png);
    background-repeat: no-repeat;
    width: 222px;
    height: 170px;
    margin: -170px -222px;
    clear: both;
    float: left;

}


#capn
{
    position: relative;
    left: 900px;
    top: 0px;
    background-image: url(imagestest/captain.png);
    background-repeat: no-repeat;
    width: 160px;
    height: 276px;
    margin: -276px;
    float: left;
    clear: both;
}


body {
    font-family: Trebuchet, Arial, Verdana, Helvetica, Sans-serif;
    font-size: 15px;
    color: #000000;
    text-align: center;
    font-size: 13px;
    width: 100%;
    
}

#container 
{
    width: 599px;
    text-align: center;
    margin-left: auto;
     margin-right: auto;
}

#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);
    width: 599px;/* was 599px */
    height: auto;
    margin: 0;
    padding: 0;
    text-align: left;
}

#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: 242px;
    height: 235px;
    position: relative;
    left: 70px;
    top: 80px;
    clear:both;
    text-align: right;
    margin: -242px -235px;
    float: left;
}

ul#sidelinks
{
    list-style-type: none;
    padding: 3em;
    
}

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;
}

#images
{
    width: 500px;
    height: 600px;
    padding-left: 0px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 5px;
}

div.thumbnail
{
    width: 120px;
    float: left;
    margin: 10px 50px 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
{

}

www.eggboroughpscc.co.uk/IE.jpg

www.eggboroughpscc.co.uk/fireforx.jpg

[Toon]

A List Apart: Articles: Fix Your Site With the Right DOCTYPE!