slow css rollover without images

i think i'll start with "hello everyone" as this is my 1st post. now on to the problem:

i am trying to use css to change the colour and background colour of some text in a link when it is hovered over. the trouble is, the colour changes happen very slowly and i can't understand why. i've seen people describe problems like this but only involving images. i'm also using javascript to make an image "fall" down the side of the page (unrelated to the links) and when the colour change is trying to happen it pauses the movement like it's making the whole browser stick. i'm using an anchor tag with class="block" to apply the following css:

Code: Select all

 
a.block:link, a.block:visited, a.block:hover, a.block:active
{
display: block;
width: 55px;
height: 55px;
font: bold 30px "curlz mt";
text-decoration: none;
}
a.block:link, a.block:visited, a.block:active
{
color: #f0f;
background-color: #0f0;
}
a.block:hover
{
color: #0f0;
background-color: #f0f;

i would appreciate any advice on what i'm doing wrong or how to do it better.
thanks a lot folks

How fast is your pc?
Also remove the js from the page, does this affect the problem in anyway?
Also have you got a link?

I shouldn't think this is really a css problem, it's generally lightweight, but js can be quite bulky and messy in some cases and easily crash or freeze a browser on slower computers.

thanks for your reply, i think you've cracked it for me! i was accessing the page on a memory stick. after copying it to the computer it's speeded up. i can't believe it was so simple! i'm such a dope . it never occurred to me that it might be a non-code issue because it only slowed down after i swapped the javascript rollover images i was using originally for css (which i thought would speed it up).

the problem seemed to happen mainly with the code at the end of the stylesheet not working properly/fast enough. if i moved something to the top of the document it would start working again but something else would stop. is it better then to use a few smaller stylesheets than one big one to prevent this happening on slower computers?

I would stick to one stylesheet if you can. I doubt multiple (but smaller sized) stylesheets would reap any benefits in load times, plus you're only increasing the number of HTTP requests the client's browser will have to make.

If the size of your stylesheet is seriously affecting performance, I'd be concerned about the operating efficiency of your computer. CSS is extremely light, and almost any system will handle it well.

I shouldn't really think it's performance, my 600mhz laptop with 128mb ram can handle about 4 tabs in firefox pretty well (or if theres heavy flash content i.e youtube then only 1 tab).

I mean that's pretty attrocious spec.

Although regardless of your spec, it could be that you're running too much at once that's slowing your pc down.

But like ASO said, you want to try and keep http requests minimal to increase performance (more for when it's on a server as opposed to local).

CSS should never effect speed, but graphics, js and so on is another matter.