•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 455,970 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,773 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 907 | Replies: 4
 |
•
•
Join Date: Feb 2006
Location: Leeds innit
Posts: 29
Reputation: 
Rep Power: 3
Solved Threads: 0
Light Poster
Help, page won't work in IE 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
Etc, etc, you get the idea, it goes on like this for a while, here's the next section:
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:
And here is the HTML
#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);
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Any Idea's please help, i'm well and truly stuck!!
<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>
Last edited by punkrockbboy : Nov 21st, 2007 at 9:40 pm. Reason: Needed to add to the description
•
•
Join Date: Mar 2007
Location: Brisbane, Australia
Posts: 215
Reputation:
Rep Power: 2
Solved Threads: 13
Posting Whiz in Training
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.
•
•
Join Date: Feb 2006
Location: Leeds innit
Posts: 29
Reputation:
Rep Power: 3
Solved Threads: 0
Light Poster
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...
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...
Last edited by punkrockbboy : Nov 23rd, 2007 at 11:23 am.
•
•
Join Date: Jan 2007
Posts: 2,604
Reputation:
Rep Power: 7
Solved Threads: 119
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.
- 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.
Daylight-saving time uses more gasoline
|
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
- Updated : Simple ASP.Net Login Page (ASP.NET)
- Getting a blank asp page (ASP)
- My main page is "http://rl.webtracer.cc/-/?bayzm" no matter what i do to change it... (Viruses, Spyware and other Nasties)
- Need Help Creating a Search Page (ColdFusion)
- Cant view logon page for Kent State University (Windows NT / 2000 / XP / 2003)
- "page cannot be displayed" only w/ router (Networking Hardware Configuration)
- Multiple links to the same page (Search Engine Optimization)
- IE won't load page with exe files (Web Browsers)
Other Threads in the HTML and CSS Forum
- Previous Thread: What's the difference?
- Next Thread: Print option in Flash
