CSS - Help With Functionality/debugging

so im working on the relatively lame site for some pocket cash, and ive run into a weird bump in the road with CSS. if one uses safari or firefox on a mac or firefox on a PC and goes to this page they will notice that rolling over one of the squares in the menu will cause a colored border to appear. this works on all browsers ive tried except windows IE. im stuck, ive tried some thing, but have never had this problem in the past. i have included the css in the index page, so one can view it w/ by viewing the source.

ok, i really am at my wits end here and could use any assistence you guys can give. this is a little complicated to explain, but here goes.

i have this page: http://www.woowooberry.com/photo.html

the page uses a style sheet called style.css.

the problems:
1. i just realised that my ie6 browser at work makes this page use an old version of the stylesheet, even AFTER i uploaded the new one to my site via ftp. when checking the site at home, this is not an issue. but it is an issue on my work computer and every other computer at work where the site is loaded for the first time! ghosts in the shell? i have no clue.

2. the little boxes on the above page represent links to images. the boxes should be a dark grey and only turn blue AFTER being visited. this does not happen on any computer. or they are grey, for about one round...meaning if i refresh the page they all turn blue without being visited. the following is the TRUE css i have for it (which, from problem #1, may not be the css your computer uses...as i said, i do not know):
Code:

.newbutton:link {
	FONT-SIZE: 10px; 
	COLOR: #000000; 
	FONT-FAMILY: tahoma,arial; 
	BACKGROUND-COLOR: #a4a4a4; 
	TEXT-DECORATION: none
}
.newbutton:visited {
	FONT-SIZE: 10px; 
	COLOR: #000000; 
	FONT-FAMILY: tahoma,arial; 
	BACKGROUND-COLOR: #00f4e0; 
	TEXT-DECORATION: none
}
.newbutton:hover {
	FONT-SIZE: 10px; 
	COLOR: #ffffff; 
	FONT-FAMILY: tahoma,arial; 
	BACKGROUND-COLOR: #f44b39; 
	TEXT-DECORATION: none
}
.newbutton:active {
	FONT-SIZE: 10px; 
	COLOR: #000000; 
	FONT-FAMILY: tahoma,arial; 
	BACKGROUND-COLOR: #00f4e0; 
	TEXT-DECORATION: line-through
}

ok. couple of other problems but i'll leave that for later. these two are the major ones. again, any help you guys can give would greatly lower my blood pressure at this point. thanks.

Hey everyone,

I'm learning CSS right now and recoding my existing site to use it. I've come into a few stumbling blocks and could use some help.

First off, the site is meldstudios.com/newcode

I am having a problem getting my sub nav to show up. I need it to function as well, but right now I'd just like to see it.

In addition, the html text that is below the divs is supposed to overlay on top of it. Right now, that isn't happening and I believe it is pushing the footer out of whack. I'm not sure if I am not calling it in correctly in the html or what, but something is off.

Finally, the thumbs and both navs have rollover states. I have read about using a transparent gif to set the hover states and visited states, but do people still use gif's? What is the best way to go about creating rollovers in CSS without the need for java script.

My live site is meldstudios.com Take a look as that may explain what I am trying to do. Any help is greatly appreciated.

I have included the parts of the CSS that are relevant below.

#pagenav {
width: 599px;
height: 35px;
margin-top: 45px;
z-index: 100;
float: left;

}

#about {
background:url(images/aboutButton.jpg) no-repeat top left;
float: left;
width:113px;
height:35px;
}

#portfolio {
background:url(images/portfolioButton.jpg) no-repeat top left;
float: left;
width:120px;
height:35px;
}

#resume {
background:url(images/resumeButton.jpg) no-repeat top left;
float: left;
width:96px;
height:35px;
}

#downloads {
background:url(images/downloadsButton.jpg) no-repeat top left;
float: left;
width:134px;
height:35px;
}

#contact {
background:url(images/contactButton.jpg) no-repeat top left;
float: left;
width:133px;
height:35px;
}

/*------------ sub nav --------------------------------------------------- */

#subnav {
width: 598px;
height: 23px;
margin-top: 50px;
z-index: 101;
}

#identity + branding {
float: left;
width:188px;
height:23px;
background-image: url(images/identityButton.jpg);
background-repeat: no-repeat;
}

#print + advertising {
float: left;
width:171px;
height:23px;
background-image: url(images/printButton.jpg);
background-repeat: no-repeat;
}

#applied design {
float: left;
width:127px;
height:23px;
background-image: url(images/appliedButton.jpg);
background-repeat: no-repeat;
}

#web design {
float: left;
width:114px;
height:23px;
background-image: url(images/webButton.jpg);
background-repeat: no-repeat;
}

/*------------ content --------------------------------------------------- */

#content {
width: 902px;
height: 495px;
height: 650px;
float: left;
margin-left: auto;
margin-right: auto;
}

#leftColumn {
width: 599px;
height: 495px;
float: left;
}


#largeGraphicArea {
width: 599px;
height: 363px;
float: left;
}

#smallBoxWithText img {
width: 599px;
height: 142px;
float: left;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}

#smallBoxText p {
width: 400px;
padding-left: 20px;
padding-right: 20px;
z-index: 3;
float: left;
text-align: left;
}


/*------------- right column --------------------------------------------------- */

#rightColumn {
width: 301px;
height: 495px;
float: left;
}

#titleGraphic {
width: 301px;
height: 361px;
float: left;
z-index: 1;
}

.titleGraphicText p {
width: 250px;
padding-left: 10px;
padding-right: 10px;
z-index: 2;
float: left;
}

I want a background image on an element that is a specific size where the background changes when hovered and the element functions as a link. I don't want text for the link to be visible.

I tried doing this as an a tag but the background is only visible for the height of the text unless I make the text huge and then make it transparent and that doesn't work in IE as the text is still visible

I want it to be a specific width and height. It is on the opposite side of a nav bar from my main nav that is a horizontal list so I want is to retail the size of my nav.

I don't want the background to be two different images for plain and hover so I was using background placement and moving the bg image on hover.

I thought I could then do this as a single li but I have not had success.

What is the simplest way to achieve this? I would like to keep the text somehow for accessibility but not have it visible.