Forum Moderators: not2easy
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]
By removing this from the #wrapper element:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='plate.png',sizingMethod='crop');
The links work in IE.
#*$! Microsoft?
