homepage Welcome to WebmasterWorld Guest from 54.234.59.94
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Sliding door links. they ain't sliding, and they ain't linking
the usual need-help-asap kind of thing
Don_Hoagie




msg:3197430
 5:52 pm on Dec 22, 2006 (gmt 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]

 

Don_Hoagie




msg:3197443
 6:16 pm on Dec 22, 2006 (gmt 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?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved