CSS positioning help needed please

Discussion in 'CSS' started by fadetoblack22, Oct 30, 2008.

  1. #1
    I am using css to get tool tips on images:

    http://www.my-plague.net/hover.php

    It works exactly how I want it to in Firefox, with the tool tip just under the image.

    However in IE and Opera the tooltip appears on the image. The css used is on the page as well.

    The unusual thing is that Opera and FF are usually the same and IE the one that things don't work in. This time Opera doesn't work as well.

    Can someone help me out please :)
     
    fadetoblack22, Oct 30, 2008 IP
  2. fadetoblack22

    fadetoblack22 Well-Known Member

    Messages:
    2,399
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    160
    #2
    Can no one help with this?
     
    fadetoblack22, Nov 3, 2008 IP
  3. mypsdtohtml

    mypsdtohtml Guest

    Messages:
    96
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #3
    the tooltip probably is based in javascript rather than CSS, CSS is always different in
    different browsers
     
    mypsdtohtml, Nov 3, 2008 IP
  4. fadetoblack22

    fadetoblack22 Well-Known Member

    Messages:
    2,399
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    160
    #4
    Are you saying that I should use javascript rather than css?
     
    fadetoblack22, Nov 3, 2008 IP
  5. justinlorder

    justinlorder Peon

    Messages:
    4,160
    Likes Received:
    61
    Best Answers:
    0
    Trophy Points:
    0
    #5
    The same css don't display the same layout in different browsers . Tricks and css skills must be applied to let they look the same in different browsers .
     
    justinlorder, Nov 7, 2008 IP
  6. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #6
    Not tested.

    You have failed to use a DTD, which puts IE into silly mode and puts Opera into IE-wannabe mode.

    IE requires that an AP's positioned ancestor have layout. You may do this by first making the ancestor {display: inline-block;}, then resetting it to whatever it should be.
    
    a.info {
      display: inline-block;
      }
    
    a.info {
      display: inline;
      }
    Code (markup):
    Note that your markup is invalid. <body> may not have an inline child element.

    cheers,

    gary
     
    kk5st, Nov 7, 2008 IP
  7. fadetoblack22

    fadetoblack22 Well-Known Member

    Messages:
    2,399
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    160
    #7

    Thanks for the help. It looks like its still doing the same thing after the changes :(
     
    fadetoblack22, Nov 7, 2008 IP