Member Avatar for punkrockbboy

Hi, i've been working on this page since yesterday and haven't had any problems up untill now, it's just a simple image gallery for a friends music website i'm building, it works fine in Mozilla, Opera and Safari on my mac and when i tested it on my housemates PC it was fine in Mozilla as well, but in Internet Explorer it just doesn't work.

The idea is you hover over the images and a larger image appears, simple, but can anyone explain what i've done wrong because i really don't know what to do to get it to work in IE...

Here's a link to the page, warning, it is a little image heavy, click at your peril!!

The full HTML and CSS code is pretty long so i'll just leave an example of it here, you can view the code if you need to through the link above i guess

/* Gallery Section */

#gcontainer {
        position: absolute;
        left: 50%;
        margin-left: -395px;
        width: 790px;
        border: none;
        }

/* This hides all the large images */       
#gcontainer a.gallery span {
        position: absolute;
        width: 1px;
        height: 1px;
        top: 0px;
        left: 0px;
        overflow: hidden;
        }

/* This shows the large images on :hover */


#gcontainer a.g002:hover span {
        position: absolute;
        width: 273px;
        height: 340px;
        top: 40px;
        left: -10px;
        z-index: 5;
        }

#gcontainer a.g003:hover span {
        position: absolute;
        width: 340px;
        height: 255px;
        top: 40px;
        left: -70px;
        z-index: 5;
        }

Etc, etc, you get the idea, it goes on like this for a while, here's the next section:

#gcontainer ul {
        padding: 0;
        margin: 0;
        list-style-type: none;
        }

#gcontainer a.gallery, #gcontainer a.gallery:visited {
        display: block;
        cursor: default;
        }

#gcontainer a.g001 {
        position: absolute;
        width: 544px;
        height: 75px;
        top: 0px;
        left: 96px;
        background: url(gallery_images/g001.jpg);
        }

#gcontainer a.g002 {
        position: absolute;
        width: 144px;
        height: 200px;
        top: 75px;
        left: 0px;
        background: url(gallery_images/g002.jpg);
        }

#gcontainer a.g003 {
        position: absolute;
        width: 161px;
        height: 159px;
        top: 75px;
        left: 144px;
        background: url(gallery_images/g003.jpg);
        }

And here is 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" />
<link rel="stylesheet" type="text/css" href="dlock.css" />
<title>Gallery</title>
</head>

<body>

    <div id="gcontainer">
        <ul>
            <li>
              <a class="g001">
                  <span>
                  </span>
              </a>
          </li>

        <li>
              <a class="gallery g002">
                  <span>
                      <img src="gallery_images/p02.jpg" />
                  </span>
              </a>
          </li>

        <li>
              <a class="gallery g003">
                  <span>
                      <img src="gallery_images/p03.jpg" />
                  </span>
              </a>
          </li>

Any Idea's please help, i'm well and truly stuck!!

Edited by mike_2000_17 because: Fixed formatting
  • 4 Contributors
  • 4 Replies
  • 124 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by BeyerCorpuz
Member Avatar for sillyboy

Unfortunately I think IE doesn't support hover for anything other than anchors. BUT since this is a wide spread problem, I believe there is a free js script that takes care of this for you, if you google a but, you should be able to find it. If I knew the name I would tell you, but I can't remember. If you can't find it, let me know and I will look.

Member Avatar for punkrockbboy

Cheers for the response, thing is i'd like to build this using just nice clean HTML and CSS if at all possible.

On this sites index page i have a similar thing where you hover over the navigation links and the image switches between the default image and a active one, and that works just fine in IE, i've tried and tested it on a few PC's with no problems, the only difference between that page and this gallery one is that there is nothing between the <span> tags on the index page.

Or could it be that as i'm preloading the images in the <span> and hiding them behind a 1px x 1px dot with the overflow set to hidden be the problem..?

AHHH, headaches...

Member Avatar for MidiMagic

I wish people would abandon using hover for things. It's annoying:

- It is not accessible, because it won't work with readers for the blind. It also causes trouble with dyslexia.

- Too often the image expansion from one link covers the link the user really wants.

Please use onclick instead of onhover.

Member Avatar for BeyerCorpuz

I'm not sure but your link shows up as gallery.htm in internet explorer. Usually that will cause the page not to work. In Firefox it is gallery.html which is correct.

Good Luck

Chris

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.