Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Nov 2006
    Posts
    42
    Thanks
    0
    Thanked 0 Times in 0 Posts

    FF Floating Block Problems

    Hello, I have been having a problem with floating boxes in CSS and firefox

    you see, I put a CSS tooltip feature that uses a floating block to show the data I want displayed, and it works very well in IE and Firefox on text, but I tried to use it on an image and this weird hing happened

    when I set how far I want it from the top, in IE, it sets the distance from the top of the pic, but in FF< it sets the distance from the bottom of the pic

    examples:

    Firefox:

    IE:

    live example here: http://www.freewebs.com/mrdantownsend/photos.html

    here's the CSS code I used for this:

    Code:
    /* pic Hover Box Starts Here */
    
    a.pic               {position:relative;
                          z-index:24;
                          color:#669eff;
                          text-decoration:none;
                         }
    
    a.pic:hover         {z-index:25;
                          color:#ffffff;
                          cursor:help;
                         }
    
    a.pic span.pic     {display: none;
                         }
    
    a.pic:hover span.pic {display:block;
                            position:absolute;
                            top:25px; 
                            left:10px; 
                            width:200px;
                            background-color:#29568f; 
                            color:#ffffff;
                            text-align:center;
                           }
    thanks for any and all help

  • #2
    Regular Coder zro@rtv's Avatar
    Join Date
    Feb 2005
    Location
    on the network
    Posts
    433
    Thanks
    0
    Thanked 1 Time in 1 Post
    after lookin at yr css, not totally sure on yr logic.
    1st of all, tables are not necessary anywhere there, but ya....

    Code:
    a.pic               {position:relative;
                          z-index:24;
                          color:#669eff;
                          text-decoration:none;
    display:block;
    float:left;
                         }
    might help you get back on track.
    Those 'A' (anchor) elements should be block level, I believe. And they should be floated, which means you'll have to clear them at the end.

    Not totally sure if thats what you're looking for.
    The example seems not quite done, so Im not positive about whats goin in those spans.

    You might wanna read up on Z-indexing, positioning, and the display property, tho.

    let us know if thats not what yr lookin for. hope it helps tho!
    ._-zro
    zro@redtv
    zro.redtv.org

    "If HTML and the Web made all the online documents look like one huge book, RDF, schema, and inference languages will make all the data in the world look like one huge database"
    -Tim Berners-Lee, Weaving the Web, 1999

  • #3
    New Coder
    Join Date
    Nov 2006
    Posts
    42
    Thanks
    0
    Thanked 0 Times in 0 Posts
    EDIT: it worked, thanks so much for your help!

    and the spans are used to designate what text will be in the floating box

    so here's an example of the XHTML I used:

    Code:
    <a class="pic" href="images/full_res/block.jpg" alt=""><span class="pic">This is the text that'll be floating</span><img src="images/thumbs/block.jpg" alt="" /></a>
    Last edited by mrdantownsend; 11-06-2006 at 12:13 AM.


  •  

    Posting Permissions

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