www.webdeveloper.com
Results 1 to 5 of 5

Thread: problem with on mouse over css. help appreciated

  1. #1
    Join Date
    Jun 2006
    Posts
    7

    Unhappy problem with on mouse over css. help appreciated

    Hi Guys,

    I have used the css code from this page:
    http://www.dynamicdrive.com/style/cs...-image-viewer/

    for my site:

    http://www.chantik.in/theodyssey/gallery.html
    css file: http://www.chantik.in/theodyssey/cssgallery.css

    Viewing this page with IE is fine, no problems at all.......

    However, there is a problem when viewing it with firefox. in my site there are 2 parts where i have incorporated this css script. at the top of the page, the script works fine, but at the bottom of the page (where it says please move your mouse over the image for the full size)the light yellow colored background thing doesn't stretch all the way.

    Basically i want users to click on the image on the left side, and for the full-sized image to pop up on the white part (to its right)

    And how come they don't pop up in line with each other?

    Any help is greatly appreciated. Thanks.

    Kind Regards,
    Akshay

  2. #2
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    They don't "pop up in line with each other" because of this coding:
    Code:
    .thumbnail{
    position: relative;
    z-index: 0;
    }
    The relative positioning means that the thumbnail positions itself relative to the link it is "attached" to. You can change this by using absolute positioning.
    Reference: http://www.w3schools.com/css/css_positioning.asp

    (Also, did you know that there are duplicates of your photo/mouseovers occuring at the top right, outside your page's container? - Fx, version 1.5)

    I don't see the background issue you referred to.

    KDLA
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

  3. #3
    Join Date
    Jun 2006
    Posts
    7
    Quote Originally Posted by KDLA
    They don't "pop up in line with each other" because of this coding:
    Code:
    .thumbnail{
    position: relative;
    z-index: 0;
    }
    The relative positioning means that the thumbnail positions itself relative to the link it is "attached" to. You can change this by using absolute positioning.
    Reference: http://www.w3schools.com/css/css_positioning.asp

    (Also, did you know that there are duplicates of your photo/mouseovers occuring at the top right, outside your page's container? - Fx, version 1.5)

    I don't see the background issue you referred to.

    KDLA
    KDLA,

    Thanks for the reply. I got them to pop up in line with each other.

    Yes i know there are duplicates of the photo/mouseovers outside my container. They are there to show people how the actual pop up should look like. If you move you mouse over these images, the pop up includes an enlarged image with a 1px dotted line surrounding the image.

    so how come when you move your mouse over the images (in firefox) within the container, the pop up doesn't include this 1px dotted line surrounding the image? it works fine with IE. It is just pissing me off cos I only use Firefox!

    Again, any Help appreciated. Thanks man,

    Regards,
    Akshay

  4. #4
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    It works for me. I see the dotted border on all four image rollovers. (see attached screenshot). Viewed in Fx 1.5.

    KDLA
    Attached Images Attached Images
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

  5. #5
    Join Date
    Jun 2006
    Posts
    7
    Quote Originally Posted by KDLA
    It works for me. I see the dotted border on all four image rollovers. (see attached screenshot). Viewed in Fx 1.5.

    KDLA
    KDLA,

    After updating my version of Firefox, all is well (page in concern: http://www.chantik.in/theodyssey/gallery2.html )

    But now, when I view it with IE, the following happens
    http://www.chantik.in/theodyssey/ie.JPG

    And, the images go off the pages at the bottom (in both browsers):

    http://www.chantik.in/theodyssey/offscreen.JPG

    Again, any help appreciated. Thanks for all your help.

    Regards,
    Akshay
    Last edited by mp3province; 06-30-2006 at 03:56 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles