[RESOLVED] Problem: CSS script working in IE but not firefox

[orangeIV]

Hello, I'm using CSS to do a rollover effect. I've used a similar technique before, and it has always worked in both Firefox and IE. Today I used a slightly modified method, giving the rollover an absolute position, and I found it works in IE but not firefox. Here is the HTML:

<div class="homecolumn2">
<a id="games2" href="games.htm"></a>
</div>

..and here is the CSS:

a#games2 {width: 200px; height: 200px; background: url('../images/gameslogo.gif'); overflow:visible; background-repeat: no-repeat;}
a#games2:hover {width: 300px; height: 200px; position: absolute; left: 530px;}

.homecolumn2
{
posistion: absolute; top: 0px;
width: 200px;
padding: 0px 0px 0px 0px;
float: right;
}


Can anybody see what the problem is?

[ray326]

Nit: CSS isn't a "script".

"posistion:" perhaps? We really need to see a link to a sample page.

[Centauri]

Not sure what you are trying to achieve here...

As Ray points out, you have a syntax error, but even without that error the coding does not make a lot of sense. The float right on .homecolumn2 will not do anything if it is positioned absolute. Changing the size and position of #games2 on hover would cause weird effects - when the link is hovered it will move away from the cursor position, thereby unhovering itself...

More info needed.

[felgall]

Does it work in Opera?
Does it work in Safari?

With IE does it work in version 6 or in version 7 or in both?

[orangeIV]

I've tried it in Opera and Safari and it doesn't work in those browsers either. Here is a link to a sample page:http://www.zendurl.com/orangeiv

[Centauri]

a#dice {width: 200px; height: 200px; background: url('images/gameslogo.gif'); overflow:visible; background-repeat: no-repeat; display: block;}
height and width cannot be assigned to an inline element without converting it to a block.

edit: I might also add that all pages should have a valid doctype and encoding declaration, ..... and the tables are not needed, and incorrectly used.