Log in

View Full Version : CSS Popup position is different in IE and Mozilla....



diesel13
06-27-2007, 10:10 PM
Hello! Would love any feedback anyone has on an issue I'm having...

If you view this page: http://www.ipagio.com/blue1/index2.html , you will see 3 boxes in the middle of the page with the numbers one, two, and three in them on the left..... these boxes will display css popup text when they are hovered over.... the position of the popup text is set via a span tag in the CSS and position is perfect in IE and is center, but is offcenter in Mozilla as it shows a bit higher than it should ... I'm sure there is probably a pretty obvious mistake I've made, but I'm just not catching it!

The css is :

.menu1325 li{display:inline}
.menu1325 li a{float:left; color:#153564; padding:0px 22px; text-decoration:none; border-bottom:#153564 8px solid; border-right:#153564 8px solid; border-left:#153564 8px solid; border-top:#153564 8px solid; margin-right:7px; margin-top:0px}
.menu1325 li a:hover{color:#6996bd; border-bottom:#6895bc 8px solid; border-right:#6895bc 8px solid; border-left:#6895bc 8px solid; border-top:#6895bc 8px solid; margin-right:7px; background-color:#F0F0F0; margin-top:0px}
.menu1325 li .current{color:#6996bd; border-bottom:#6895bc 8px solid; border-right:#6895bc 8px solid; border-left:#6895bc 8px solid; border-top:#6895bc 8px solid; margin-right:7px; background-color:#F0F0F0; margin-top:0px}
.menu1325 a span{display:none}
.menu1325 a:hover span{display:block; position:absolute; top:106px; left:0; width:320px; padding:5px; margin:0px; z-index:100; text-align:left; background:white; font:14px Arial; color:#606060;}

Thank you so much for your feedback....!

Trace.

Jas
06-28-2007, 10:05 PM
I have noticed that FF and IE handle px values differently. You might try a % instead, but I don't know what else you can do. Hopefully someone else will. . .

Veronica
06-28-2007, 11:13 PM
Actually. it's off in both IE6 and FF, and Opera. Seems to be too high by 10 pixels or so.

Jas
06-29-2007, 06:59 PM
Actually. it's off in both IE6 and FF, and Opera. Seems to be too high by 10 pixels or so.

Hmm. What version is everyone using? I have IE 6 on right now.

alexjewell
06-30-2007, 12:41 AM
Just drop px unless working with absolutes, like images.

Go with percents and em's.

diesel13
07-01-2007, 04:37 AM
Hmm... I tried ems and % ... couldn't get ems to work period and the % showed the exact same problem... well I do need to get this done and I've hit the wall trying by myself.... so I will shoot $20 via paypal person or their favorite charity to the first post solving the problem.... :)

Trace