Welcome to WebmasterWorld Guest from 54.159.50.111

Forum Moderators: not2easy

Message Too Old, No Replies

Sliding door links. they ain't sliding, and they ain't linking

the usual need-help-asap kind of thing

     
5:52 pm on Dec 22, 2006 (gmt 0)

Preferred Member

10+ Year Member

joined:Aug 11, 2005
posts:386
votes: 0


EDIT: I got word back from a friend who's using FF and he says it works fine... I'm running IE6, and this is the only PC available to me right now... does this code work for any of you IE6 users?

2 hours of code tweaking, 2 attempts to validate the code (HMTL validated; CSS Validator for some reason is not working for me)... I got nothin.

I've got a horizontal list of links as images (yes, this latest bit of code does not have the links wrapped in a list... standards shmandards, I did that already and I got nowhere), and for some reason that is surely very simple, there's no hotspot being registered for the cursor, and hovering over the links does not slide the image.

I just can't look at this anymore... if anyone can show me a blatant error, I'd be grateful.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
body {
background: #202e38 url(blip.png) 0 0 repeat;
color: #efefef;
font-family: "lucida grande", lucida sans unicode, lucida sans, trebuchet ms;
font-size: 12px;
margin: 0;
padding: 0;
}
#wrapper {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='plate.png',sizingMethod='crop');
border-color: #000;
position: absolute;
top: 0;
left: 50%;
width: 848px;
height: 612px;
overflow: auto;
margin: 30px 0 0 -424px;
z-index: 1;
}
#logo {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='logo.png',sizingMethod='crop');
position: absolute;
top: 0;
left: 50%;
width: 230px;
height: 110px;
margin: 0 0 0 -115px;
z-index: 99;
}
#mainpic {
background: transparent url(main1.jpg) 0 0 no-repeat;
position: absolute;
top: 49px;
left: 49px;
width: 752px;
height: 412px;
}
#nav {
margin: 0;
padding: 0;
background: red;
}
#nav a:link {
z-index: 50;
display: block;
margin: 0;
padding: 0;
border: 0;
width: 104px;
height: 100px;
text-decoration: none;
background-position: 0 -100px;
text-indent: -10000px;
overflow: hidden;
}
#nav a:visited {
z-index: 50;
display: block;
margin: 0;
padding: 0;
border: 0;
width: 104px;
height: 100px;
text-decoration: none;
background-position: 0 -100px;
text-indent: -10000px;
overflow: hidden;
}
#nav a:hover {
z-index: 50;
display: block;
margin: 0;
padding: 0;
border: 0;
width: 104px;
height: 100px;
text-decoration: none;
background-position: 0 0;
text-indent: -10000px;
overflow: hidden;
}
#nav a:active {
z-index: 50;
display: block;
margin: 0;
padding: 0;
border: 0;
width: 104px;
height: 100px;
text-decoration: none;
background-position: 0 0;
text-indent: -10000px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="logo">
</div>
<div id="mainpic">
</div>
<div id="nav">
<a href="http://www.example.com" style="position: absolute; top: 463px; left: 48px; background-image: url(example_example.png);">example</a>
<a href="http://www.example.com" style="position: absolute; top: 463px; left: 156px; background-image: url(example_example.png);">example</a>
<a href="http://www.example.com" style="position: absolute; top: 463px; left: 264px; background-image: url(example_example.png);">example</a>
<a href="http://www.example.com" style="position: absolute; top: 463px; left: 372px; background-image: url(example_example.png);">example</a>
<a href="http://www.example.com" style="position: absolute; top: 463px; left: 480px; background-image: url(example_example.png);">example</a>
<a href="http://www.example.com" style="position: absolute; top: 463px; left: 588px; background-image: url(example_example.png);">example</a>
<a href="http://www.example.com" style="position: absolute; top: 463px; left: 696px; background-image: url(example_example.png);">example</a>
</div>
</div>
</body>
</html>

[edited by: Don_Hoagie at 5:58 pm (utc) on Dec. 22, 2006]

6:16 pm on Dec 22, 2006 (gmt 0)

Preferred Member

10+ Year Member

joined:Aug 11, 2005
posts:386
votes: 0


So this is interesting...

By removing this from the #wrapper element:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='plate.png',sizingMethod='crop');

The links work in IE.

#*$! Microsoft?