Mon, 2004-07-26 22:04
I'm redesigning my library's online catalog, and switching all the gif buttons over to CSS. It was working fine until a system upgrade last week, and now it seems to be a choice of either providing the link, or having the text show up as buttons.
In this first example, the text doesn't appear as a button, but the link works.
<a href="/search/aa/aa/1,11566,18181,E/2browse"><img src=""> <span class="button">Extended Display</span> <img src="" alt="Extended Display" border=0 /></a>
In this example, the text looks like a button, but the link doesn't work. (This one was the one that worked before the upgrade.)
<a href=/search/aa/aa/1,11566,18181,B/limit><img src=""> <a href=/ class="button">Limit/Sort</span> <img src="" alt="Limit/Sort" border=0 /></a>
You can see how it appears here: http://catalog.georgefox.edu:2082/search~/a?a
Thanks for any suggestions!
Wed, 2004-07-28 13:07
#1
Problem with CSS buttons
I am not sure about the code you are using - can't see any reason why you have image tags in there!
Here is some old code of mine, which does not use lists, and may suit your purposes. It does work as is, but did have a larger background.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Plumber</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="keywords" content="plumber, plumbing, drain, drain clearing, blocked, blocked drain, hot water, " />
<meta name="description" content=" " />
<style type="text/css">
.nav a:link, .nav a:visited, .nav a:hover, .nav a:active:focus, .navactive a:link, .navactive a:visited, .navactive a:hover, .navactive a:active:focus
{
font-size: 11px;
font-weight: 600;
text-decoration: none;
text-align: center;
width: 130px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 3px 0px;
display: block;
}
* html .nav a:link, .nav a:visited, .nav a:hover, .nav a:active:focus, .navactive a:link, .navactive a:visited, .navactive a:hover, .navactive a:active:focus
{
width: 140px;
w\idth: 130px;
}
.nav a:link, .nav a:visited
{
color: #FFFFFF;
background-color: #FF9900;
border-bottom:#FF6600 solid 2px;
border-right:#FF6600 solid 5px;
border-left:#fdad29 solid 5px;
border-top:#fdad29 solid 2px;
}
.nav a:hover, .nav a:active:focus
{
color: #000099;
background-color: #FF9900;
border-bottom:#993300 solid 2px;
border-right:#993300 solid 5px;
border-left:#FFCC00 solid 5px;
border-top:#FFCC00 solid 2px;
}
.navactive a:link, .navactive a:visited, .navactive a:hover, .navactive a:active:focus
{
color: #000099;
background-color: #FF9900;
border-bottom:#fdad29 solid 2px;
border-right:#fdad29 solid 5px;
border-left:#FF6600 solid 5px;
border-top:#FF6600 solid 2px;
cursor: default;
}
</style>
</head>
<body>
<span class="navactive"><a href="index.htm">Home</a></span>
<span class="nav"><a href="services.htm">Plumbing Services</a></span>
<span class="nav"><a href="drain.htm">Drain Services</a></span>
<span class="nav"><a href="areas.htm">Areas Covered</a></span>
<span class="nav"><a href="program.htm">Maintenance Program</a></span>
<span class="nav"><a href="savemoney.htm">Money Saving Ideas</a></span>
<span class="nav"><a href="contact.htm">Contact</a></span>
<span class="nav"><a href="about.htm">About Us</a></span>
<span class="nav"><a href="careers.htm">Careers</a></span>
</body>
</html>
Regards
Day
Wed, 2004-07-28 15:17
#2
Problem with CSS buttons
Thanks - I'll give it a try!
The image tags are hardwired into the system, unfortunately. In fact, I'm trying to put the CSS buttons into the (interrupted) code where the image should be.