CSS Image rollover

[stickfigure]

Heres My Site (http://dhforums.atspace.com/)

I want to have an image rollover on the top part of my site (Affiliates section) so that when someone hovers the logo of the affiliate, the image that says "affiliates" chages to a different image... Ive seen it before and without JS, but cant find it and really didnt understand it... :o
I want it to be only in my CSS, so my html can stay the same for different Style sheets...Thnx in Advance... :D

Here's what I kinda want: This shows it, but I dont understand it... (http://johnp.co.nz/techstuff/2x_css_rollover_demo.htm)

MY CSS:
body {
background: url(images/jeans.jpg);
text-align: center;
margin: 0px 0px 0px 0px;
padding: 0px;
min-width:765px;
overflow: auto;
font: 12px/15px Arial, Helvetica, sans-serif;
}
.site { margin-right: auto; margin-left: auto; position: relative; width: 765px; text-align: center; clear: both;}
#navtop {background: url(images/affilspc.jpg) no-repeat; width: 192px; height: 35px; margin: 0px; float: left;}
#affilname {background: url(images/affilname.jpg) no-repeat; width: 229px; height: 35px; margin: 0px; float: left;}
#afills {width: 344px; height: 35px; margin: 0px; float: left;}
#side {float: left;}
a.afil1 { width: 46px; height: 35px; display:block; background:url(images/affil1.jpg) no-repeat; }
a.afil2 { width: 47px; height: 35px; display:block; background:url(images/affil2.jpg) no-repeat; }
a.afil3 { width: 47px; height: 35px; display:block; background:url(images/affil3.jpg) no-repeat; }
a.afil4 { width: 48px; height: 35px; display:block; background:url(images/affil4.jpg) no-repeat; }
a.afil5 { width: 47px; height: 35px; display:block; background:url(images/affil5.jpg) no-repeat; }
a.afil6 { width: 49px; height: 35px; display:block; background:url(images/affil6.jpg) no-repeat; }
a.afil7 { width: 47px; height: 35px; display:block; background:url(images/affil7.jpg) no-repeat; }
.afil0 { width: 13px; height: 35px; background:url(images/affil0.jpg) no-repeat; }
#topnav { width: 192px; height: 200px; float: left;}
a.topnav1 { width: 192px; height: 44px; display:block; background:url(images/topnav1.jpg) no-repeat; }
a.topnav2 { width: 192px; height: 33px; display:block; background:url(images/topnav2.jpg) no-repeat; }
a.topnav3 { width: 192px; height: 34px; display:block; background:url(images/topnav3.jpg) no-repeat; }
a.topnav4 { width: 192px; height: 40px; display:block; background:url(images/topnav4.jpg) no-repeat; }
a.topnav5 { width: 192px; height: 49px; display:block; background:url(images/topnav5.jpg) no-repeat; }
#banner { width: 573px; height: 200px; background:url(images/sbbanner.jpg) no-repeat; float: left;}
#navi { width: 765px; height: 22px;}
#topnavspc { width: 159px; height: 22px; background:url(images/topnavspc.jpg) no-repeat; float: left;}
a.tut1 { width: 33px; height: 22px; display:block; background:url(images/tut1.jpg) no-repeat; }
a.tut2 { width: 21px; height: 22px; display:block; background:url(images/tut2.jpg) no-repeat; }
a.tut3 { width: 68px; height: 22px; display:block; background:url(images/tut3.jpg) no-repeat; }
a.tut4 { width: 27px; height: 22px; display:block; background:url(images/tut4.jpg) no-repeat; }
a.tut5 { width: 69px; height: 22px; display:block; background:url(images/tut5.jpg) no-repeat; }
a.tut6 { width: 44px; height: 22px; display:block; background:url(images/tut6.jpg) no-repeat; }
.tutspc { width: 7px; height: 22px; background:url(images/tutspc.jpg) no-repeat; }
a.graph1 { width: 68px; height: 22px; display:block; background:url(images/graph1.jpg) no-repeat; }
a.graph2 { width: 49px; height: 22px; display:block; background:url(images/graph2.jpg) no-repeat; }
a.graph3 { width: 54px; height: 22px; display:block; background:url(images/graph3.jpg) no-repeat; }
a.graph4 { width: 51px; height: 22px; display:block; background:url(images/graph4.jpg) no-repeat; }
a.graph5 { width: 50px; height: 22px; display:block; background:url(images/graph5.jpg) no-repeat; }
a.graph6 { width: 52px; height: 22px; display:block; background:url(images/graph6.jpg) no-repeat; }
.graphspc { width: 13px; height: 22px; background:url(images/graphspc.jpg) no-repeat; }
#mid {background: url(images/index_34.jpg) no-repeat; width: 765px; height: 22px; float: left;}
#body, #footer { clear: both;}
.title {background: url(images/titbac.jpg) no-repeat; width: 609px; height: 54px; float: left; text-align: left;}
.qlinks {background: url(images/qlinks.jpg) no-repeat; width: 156px; height: 54px; float: left;}
.content {background: url(images/contbac.jpg) repeat-y; width: 785px; clear: both; overflow: auto;}
.cbody {width: 550px; margin: 2px 0px 0px 25px; text-align: justify; float: left; clear: left;}
.cnav {width: 140px; margin: 0px 0px 0px 615px; text-align: right; clear: right;}
.footcopy {background: url(images/footbac1.jpg) no-repeat; width: 609px; height: 59px; float: left; clear: left;}
.footside {background: url(images/footbac2.jpg) no-repeat; width: 156px; height: 59px; float: left; clear: right;}
p {
font: 12px/15px Arial, Helvetica, sans-serif;
text-align: justify;
color: #666666;
margin-top: 0px;
margin-bottom: 0px;
padding-bottom: 5px;
padding-top: 8px;
border-bottom: 1px dotted #999999;
}
h1 {
font: bold 18px "Courier New", Courier, mono;
font-weight: bold;
text-transform: capitalize;
color: #5A8784;
margin-top: 0px;
padding: 20px 0px 10px 90px;
word-spacing: 1pt;
margin-bottom: 0px;
}
h2 {
font: bold 14px Arial, Helvetica, sans-serif;
text-transform: capitalize;
color: #D69443;
padding: 7px 0px 5px 0px;
margin-top: 0px;
margin-bottom: 0px;
}
h4 {
color: #999999;
padding-bottom: 0px;
text-transform: uppercase;
padding: 0px 0px 0px 0px;
font-weight: normal;
font: 10px Arial, Helvetica, sans-serif;
text-align: left;
margin-top: 0px;
margin-bottom: -5px;
}

[_Aerospace_Eng_]

Add display:inline; to the .cbody CSS. Your problem was a double margin problem. It occurs when a left or right margin is given to a floated element. IE doubles the margin. The solution is to make it display:inline;. As for the rollovers check out this example (http://prdesignz.inraged-inc.com/contest4/index2.html). The rollovers for each button are all just one image. When the button is mousedover the background position is changed making it look like its another image. Yes its done in all CSS.

[stickfigure]

IE Issues fixed, but for the Image rollover: I think i see what you're talking about, but i dont how it's done :confused:
How do I do that?
This is the kind of Rollover I want: This shows it, but I dont understand it... (http://johnp.co.nz/techstuff/2x_css_rollover_demo.htm)

[stickfigure]

Plz help someone, before I commit suicide over this stuff! :eek:

[_Aerospace_Eng_]

You aren't even trying. You can't expect someone to just give you the code. The link you gave us has the code in staring at you right in the face, just view the source.

[stickfigure]

Sorry, ive been using a public computer latley, due to technical issues with my computer, so I cant view the source. But i'll view it, I just thought there was an easier and better way to go about the code...

Thanks for the input Aero...

[iota]

http://www.webdevtips.com/webdevtips/style/rollover.shtml