SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help My Final Project is due tonight

    I need help my final is due tonight and I cant get my image gallery to work in fire fox please help here is the code.... It works fine in IE.... the problem is the photos enlarge when I hover over them in IE but not Firefox I wont get a passing grade if it don't work in all browsers.... Thanks in advance

    CSS

    p{
    font-size:1.5em;
    }

    .thumbnail{
    position: relative;
    display:inline;
    margin:30px;
    z-index: -10;
    }

    .thumbnail:hover{
    background-color: transparent;
    z-index: 1;

    }

    .thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    background-color: lightyellow;
    padding: 5px;
    left: -1000px;
    border: 1px dashed gray;
    visibility: hidden;
    color: black;
    text-decoration: none;
    z-index:50;
    }

    .thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 2px;

    }

    .thumbnail:hover span{ /*CSS for enlarged image on hover*/
    visibility: visible;
    top: -200px;
    left: 60px; /*position where enlarged image should offset horizontally

    */

    }






    the html



    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Tables</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body style="background-image: url(Snowboard.jpg); background-size:

    100%; background-repeat: no-repeat;">



    <div style="width:600px; float: left; margin: 150px 50px 50px 15px;">

    <a class="thumbnail" href="#thumb"><img src="best.jpg" width="200px"

    height="132px" border="0" /><span><img src="best.jpg" /><br />Simply

    beautiful.</span></a>
    <a class="thumbnail" href="#thumb"><img src="best.jpg" width="200px"

    height="132px" border="0" /><span><img src="best.jpg" /><br />Simply

    beautiful.</span></a>

    <a class="thumbnail" href="#thumb"><img src="snowboard2.jpg"

    width="200px" height="132px" border="0" /><span><img

    src="snowboard2.jpg" /><br />So real, it's unreal. Or is it?</span></a>

    <a class="thumbnail" href="#thumb"><img src="jeep.jpg"

    width="200px"height="132px" border="0" /><span><img src="jeep.jpg"

    /><br />Simply beautiful.</span></a>

    <a class="thumbnail" href="#thumb"><img src="jeep.jpg" width="200px"

    height="132px" border="0" /><span><img src="jeep.jpg" /><br />So real,

    it's unreal. Or is it?</span></a>

    <a class="thumbnail" href="#thumb"><img src="jeep.jpg"

    width="200px"height="132px" border="0" /><span><img src="jeep.jpg"

    /><br />Simply beautiful.</span></a>

    <a class="thumbnail" href="#thumb"><img src="jeep.jpg" width="200px"

    height="132px" border="0" /><span><img src="jeep.jpg" /><br />So real,

    it's unreal. Or is it?</span></a>




    </div>


    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam

    nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

    volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation

    ullamcorper suscipit lobortisnisl ut aliquip ex ea commodo consequat.

    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse

    molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero

    eros et accumsan et iusto odio dignissim qui blandit praesent luptatum

    zzril delenit augue duis dolore te feugait nulla facilisi.</p>

    <div id="links"><a href="http://power.arc.losrios.edu">Power

    Server</a>&nbsp;<a href="index.html">Home</a></div>





    </body>
    </html>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Hi thezuk. Welcome to SitePoint.

    Do you have an online version of this? That would be easier to debug. Without the images, it's hard to see what's going on here.

  3. #3
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by thezuk View Post
    I need help my final is due tonight
    What time zone are you in and what time tonight is it due?

  4. #4
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,190
    Mentioned
    17 Post(s)
    Tagged
    4 Thread(s)
    tick tock tick tock tick tock…
    The only code I hate more than my own is everyone else's.

  5. #5
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It's stranger still.
    I copied your code and stuck in a few random images, then noticed something else.
    Your images are all links to nowhere. but in firefox (and chrome, it doesn't work there either) the mouse stays as a pointer when moved over the image. Then I made one of the links point to a web site, and removed your span, so it should be just an image that is a link, and still the cursor still stayed as a pointer, not a hand, on hover, AND the link to the web site didn't work, apart from in IE.
    Then I removed the thumbnail class from the first image, and the cursor became a hand on hover, and the link did work.

    So I played with the css for .thumbnail to detect whatever error you have there.
    Solution: Remove the z-index line for the .thumbnail class and it works.

    PS I think it's important that you learn how to find things out, so I described some of what I did and the clues I spotted to detect the source of the problem.


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
  •