|
|
Posted by Jonathan N. Little on 09/25/07 20:31
Jim S wrote:
> Sorry I DO want the bevel, but my original set-up gave me a bevel in IE,
> but not in Firefox or Opera. Your list method gave me bevels in Firefox,
> but No buttons at all in Opera - just the text.
>
> By moving buttons, what I mean is a button that APPEARS to depress when
> clicked-on as my CSS buttons do in my own website.
Well see my followup post for details but your need a bevel if your want
to simulate the button press. Your buttons on http://www.jimscott.co.uk/
have a bevel. Can make it smaller...
Don't know what your problem is, my code works for all FF MSIE and Opera
here is demo again with smaller bevels... here it is again. NOTE you
will need to create the IEFixes.htc file in notepad that you can copy
from my other post in order for MSIE support.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>template</title>
<style type="text/css">
ul.buttonbar {
font: .8em/1.4 sans-serif; list-style: none; width: 8em;
}
ul.buttonbar li {
margin: 1px; height: 3em; background-color: #ccc;
border: 2px outset #ccc;
}
ul.buttonbar a {
display: block; text-align: center; text-decoration: none;
}
/* tweak the single lines links */
ul.buttonbar a.singles { margin-top: .65em; }
/* make it look like a pressing button, no MSIE without JS|HTA hacks */
ul.buttonbar li:active,
ul.buttonbar li.active { border-style: inset; }
/* attach HTC file for MSIE */
ul.buttonbar li { behavior: url(IEFixes.htc);}
</style>
</head>
<body>
<ul class="buttonbar">
<li><a class="singles"href="#">Home</a></li>
<li><a class="singles" href="#">About Us</a></li>
<li><a href="#">Current Programme</a></li>
<li><a href="#">Contacts & Information</a></li>
<li><a href="#">Become a Patron</a></li>
<li><a href="#">Past Performances</a></li>
<li><a class="singles" href="#">About our Area</a></li>
</ul>
</body>
</html>
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Navigation:
[Reply to this message]
|