On this page:
<!-- m --><a class="postlink" href="http://www.nga.gov/exhibitions/2005/dada/cities/index4.shtm">http://www.nga.gov/exhibitions/2005/dad ... ndex4.shtm</a><!-- m -->
The white navigation boxes on the left appear in a different place on IE for the PC than on Firefox. I need them to be in the exact same place because these will be highlighted button states. I have tried absolute positioning the div and relative positioning the parent div and that didnt help. Any thoughts? thanks
DanChange;<div id="menutop" style="z-index:2; visibility:visible; top:82px; left:7px; position:absolute;">
and add to the css.leftnav-cities img {vertical-align:bottom;}
Why place 2 menus on top of each other?thanks. But now the top layer is about 10px too high on IE and still correct on firefox.
I am placeing two on top of each other, because once I set the upper layer to "visible:hidden", it becomes an on-state for when an item has been clicked on. I know of no other way to do this. But if you do, please share. thanksThis page may help...
<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A//www.nga.gov/exhibitions/2005/dada/cities/index4.shtm">http://jigsaw.w3.org/css-validator/vali ... ndex4.shtm</a><!-- m --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>image rollover</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
color:#000;
background: #fff;
margin:0;
}
ul {
margin:0;
padding:0;
list-style: none;
}
li a {
display:block;
width:100px;
height:25px;
}
#a {background: url(Image.jpg) no-repeat 0 0;
}
#a:hover {
background: url(hoverImage.jpg) no-repeat 0 0
}
#a:visited {
background: url(visitedImage.jpg) no-repeat 0 0
}
</style>
</head>
<body>
<ul id="links">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w3c.org" id="a" title="the title"></a></li>
</ul>
</body>
</html>thanks. I implemeneted your code, but it doesnt work because my code is linked with javascript, and it doesnt recognize anything as visited and they all stay on:
<!-- m --><a class="postlink" href="http://www.nga.gov/exhibitions/2005/dada/cities/index6.shtmIsnt">http://www.nga.gov/exhibitions/2005/dad ... 6.shtmIsnt</a><!-- m --> there some sort of javascript "onclick="change img src to zurich-on.gif" and turn of any other on states?
<!-- m --><a class="postlink" href="http://www.nga.gov/exhibitions/2005/dada/cities/index4.shtm">http://www.nga.gov/exhibitions/2005/dad ... ndex4.shtm</a><!-- m -->
The white navigation boxes on the left appear in a different place on IE for the PC than on Firefox. I need them to be in the exact same place because these will be highlighted button states. I have tried absolute positioning the div and relative positioning the parent div and that didnt help. Any thoughts? thanks
DanChange;<div id="menutop" style="z-index:2; visibility:visible; top:82px; left:7px; position:absolute;">
and add to the css.leftnav-cities img {vertical-align:bottom;}
Why place 2 menus on top of each other?thanks. But now the top layer is about 10px too high on IE and still correct on firefox.I am placeing two on top of each other, because once I set the upper layer to "visible:hidden", it becomes an on-state for when an item has been clicked on. I know of no other way to do this. But if you do, please share. thanksThis page may help...
<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A//www.nga.gov/exhibitions/2005/dada/cities/index4.shtm">http://jigsaw.w3.org/css-validator/vali ... ndex4.shtm</a><!-- m --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>image rollover</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
color:#000;
background: #fff;
margin:0;
}
ul {
margin:0;
padding:0;
list-style: none;
}
li a {
display:block;
width:100px;
height:25px;
}
#a {background: url(Image.jpg) no-repeat 0 0;
}
#a:hover {
background: url(hoverImage.jpg) no-repeat 0 0
}
#a:visited {
background: url(visitedImage.jpg) no-repeat 0 0
}
</style>
</head>
<body>
<ul id="links">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w3c.org" id="a" title="the title"></a></li>
</ul>
</body>
</html>thanks. I implemeneted your code, but it doesnt work because my code is linked with javascript, and it doesnt recognize anything as visited and they all stay on:
<!-- m --><a class="postlink" href="http://www.nga.gov/exhibitions/2005/dada/cities/index6.shtmIsnt">http://www.nga.gov/exhibitions/2005/dad ... 6.shtmIsnt</a><!-- m --> there some sort of javascript "onclick="change img src to zurich-on.gif" and turn of any other on states?