Results 1 to 6 of 6

Thread: CSS Popup position is different in IE and Mozilla....

  1. #1
    Join Date
    Jun 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default CSS Popup position is different in IE and Mozilla....

    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.

  2. #2
    Join Date
    Jan 2007
    Posts
    629
    Thanks
    10
    Thanked 28 Times in 28 Posts

    Default

    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. . .
    --Jas
    function GreatMinds(){ return "Think Like Jas"; }
    I'm gone for a while, but in the meantime: Try using my FTP script | Fight Bot Form Submissions

  3. #3
    Join Date
    Feb 2007
    Posts
    293
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Actually. it's off in both IE6 and FF, and Opera. Seems to be too high by 10 pixels or so.

  4. #4
    Join Date
    Jan 2007
    Posts
    629
    Thanks
    10
    Thanked 28 Times in 28 Posts

    Default

    Quote Originally Posted by Veronica View Post
    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.
    --Jas
    function GreatMinds(){ return "Think Like Jas"; }
    I'm gone for a while, but in the meantime: Try using my FTP script | Fight Bot Form Submissions

  5. #5
    Join Date
    Mar 2006
    Location
    Cleveland, Ohio
    Posts
    574
    Thanks
    6
    Thanked 5 Times in 5 Posts

    Default

    Just drop px unless working with absolutes, like images.

    Go with percents and em's.
    Thou com'st in such a questionable shape
    Hamlet, Act 1, Scene 4

  6. #6
    Join Date
    Jun 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default $20 to person that can solve this....

    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •