div position % or px (zooming)

Hi,

http://aalets.co.uk/epc/

on that page i have a div that shows when you hover over the 2nd button "Energy Assessor Training Training"

the problem with it is that if you hold CTRL and scroll on your mouse(changes zoom on your browser) then the div moves all over the place,

is there any way to fix the movement of this div?
I have tried to use % instead of px but it still moves,

Thanks

 

Do you mean the div which contains

Commercial EPC Course
Domestic EPC Course
Combined EPC Course

???

 

yeah that one, the 3 buttons that show up,
the div is currently set to float, so does that mean it will be in different places when you zoom in or out?

 

Have you tried to write "position: absolute" instead of "position:relative;"

.uniquename{
	width:165px;
	[COLOR="Red"]position:relative;[/COLOR]
	left:14%;
	top:130px;
	background-image: url(../images/tabs3.gif);
	padding:1;
	line-height: 25px;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration:none;
	color:#4C88C6;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 0.85em;
	background-repeat: no-repeat;
	
 }

Code (markup):

in the file css/epc.css

 

yeah I did, same problem,

I have just noticed, dreamweaver cs4 allows you to create drop down buttons with that SpryButtons in INSERT window, I should have known this

Ill give this function a go, I checked the source code of the site I was copying and they use the same thing,

http://www.rigmadenenergytraining.co.uk/

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script> 

Code (markup):

Thanks

 

I assume this is fixed since it works fine in FF, Chrome and Opera.

 

I'm confused as to why you need to dick with positioning since there's nothing on the page that warrants it.... though the vbscript garbage before your doctype is screwing IE back into quirks mode, you might want to clean up your validation errors, and you've easily got twice as many div as needed and have a nonsensical heading order.

 

Typical WYSIWYG editor garbage.