Help needed with css button

Discussion in 'HTML' started by Jim S, Sep 24, 2007.

  1. Jim S

    Jim S Guest

    On this site www.jimscott.co.uk I use CSS to make my buttons. The trouble
    is that the number of characters determines the size of the button.
    I would like to make 'active' buttons on this site www.priorysingers.org.uk
    in the grey button section moving me from page to page. That is; I would
    like the button to be the same size whatever the text (of course assuming
    the text is not to big)
    OR am I confined to using graphics?
    Maybe javascript would do it, but I've never ventured there :eek:?
    --
    Jim S
    Tyneside UK
    www.jimscott.co.uk
    Jim S, Sep 24, 2007
    #1
    1. Advertising

  2. Jim S

    John Hosking Guest

    Jim S wrote:
    > On this site www.jimscott.co.uk I use CSS to make my buttons. The trouble
    > is that the number of characters determines the size of the button.
    > I would like to make 'active' buttons on this site www.priorysingers.org.uk
    > in the grey button section moving me from page to page. That is; I would
    > like the button to be the same size whatever the text (of course assuming
    > the text is not to big)


    Try adding display:block; width:24em; margin:.6em auto; to your
    buttonise rulesets for http://www.jimscot.pwp.blueyonder.co.uk/ .

    Similar approach for the http://www.priorysingers.org.uk/ site (although
    the <a>-within-a-<p>-within-a-<table>-within-a-<td> of a table inside
    another table is already overkill in my book). Starting over wouldn't be
    bad.

    And I don't know what you mean by "active" buttons; aren't they all?

    GL

    --
    John
    Pondering the value of the UIP: http://improve-usenet.org/
    John Hosking, Sep 24, 2007
    #2
    1. Advertising

  3. Jim S

    dorayme Guest

    In article <>,
    Jim S <> wrote:

    > On this site www.jimscott.co.uk I use CSS to make my buttons. The trouble
    > is that the number of characters determines the size of the button.
    > I would like to make 'active' buttons on this site www.priorysingers.org.uk
    > in the grey button section moving me from page to page. That is; I would
    > like the button to be the same size whatever the text (of course assuming
    > the text is not to big)
    > OR am I confined to using graphics?
    > Maybe javascript would do it, but I've never ventured there :eek:?


    Hi Jim again,

    If you were keen to do the minimum, you could try these changes:


    div.buttons {

    border: 2px outset #E8E8E8;
    background: #E8E8E8;
    color: black;
    width: 400px;
    margin: auto;
    text-align: center;
    }


    a.button_links:link {

    background: #E8E8E8;
    color: black;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    font-weight: normal;
    }


    (I leave the visited etc to you)

    and in the relevant html:

    <div class="buttons">
    <a class="button_links" href="bells/index.html">CHRIST
    CHURCH BELLRINGERS' WEBSITE</a></div>


    <div class="buttons">
    <a
    class="button_links"href="Other_picture_sites/morephotos.html">OTH
    ER LOCAL AREA PHOTO SITES</a></div>

    (There is trouble with your design and mark up, but I know from
    before that you seek very practical help. BTW, Jim, I have a very
    good friend who rings bells in Sydney and wherever she goes in
    the world it is quite a community.)

    --
    dorayme
    dorayme, Sep 24, 2007
    #3
  4. Jim S

    dorayme Guest

    In article <>,
    John Hosking <> wrote:

    > Jim S wrote:
    > > On this site www.jimscott.co.uk I use CSS to make my buttons. The trouble
    > > is that the number of characters determines the size of the button.
    > > I would like to make 'active' buttons on this site www.priorysingers.org.uk
    > > in the grey button section moving me from page to page. That is; I would
    > > like the button to be the same size whatever the text (of course assuming
    > > the text is not to big)

    >
    > Try adding display:block; width:24em; margin:.6em auto; to your
    > buttonise rulesets for http://www.jimscot.pwp.blueyonder.co.uk/ .


    O, that's clever John. Less messing about than my suggestion...
    Well done.

    --
    dorayme
    dorayme, Sep 24, 2007
    #4
  5. Jim S

    Jim S Guest

    On Tue, 25 Sep 2007 00:44:37 +0200, John Hosking wrote:

    > Jim S wrote:
    >> On this site www.jimscott.co.uk I use CSS to make my buttons. The trouble
    >> is that the number of characters determines the size of the button.
    >> I would like to make 'active' buttons on this site www.priorysingers.org.uk
    >> in the grey button section moving me from page to page. That is; I would
    >> like the button to be the same size whatever the text (of course assuming
    >> the text is not to big)

    >
    > Try adding display:block; width:24em; margin:.6em auto; to your
    > buttonise rulesets for http://www.jimscot.pwp.blueyonder.co.uk/ .
    >
    > Similar approach for the http://www.priorysingers.org.uk/ site (although
    > the <a>-within-a-<p>-within-a-<table>-within-a-<td> of a table inside
    > another table is already overkill in my book). Starting over wouldn't be
    > bad.
    >
    > And I don't know what you mean by "active" buttons; aren't they all?
    >
    > GL


    Thanks John.
    They weren't really buttons in the 'priory' site so they weren't active
    like mine.
    Is there any way of centralising the text in the box you suggested?
    --
    Jim S
    Tyneside UK
    www.jimscott.co.uk
    Jim S, Sep 25, 2007
    #5
  6. Jim S wrote:
    > On Tue, 25 Sep 2007 00:44:37 +0200, John Hosking wrote:
    >

    <snip>

    >> Try adding display:block; width:24em; margin:.6em auto; to your
    >> buttonise rulesets for http://www.jimscot.pwp.blueyonder.co.uk/ .
    >>
    >> Similar approach for the http://www.priorysingers.org.uk/ site (although
    >> the <a>-within-a-<p>-within-a-<table>-within-a-<td> of a table inside
    >> another table is already overkill in my book). Starting over wouldn't be
    >> bad.
    >>
    >> And I don't know what you mean by "active" buttons; aren't they all?
    >>
    >> GL

    >
    > Thanks John.
    > They weren't really buttons in the 'priory' site so they weren't active
    > like mine.
    > Is there any way of centralising the text in the box you suggested?


    add text-align: center;

    This might help you in your further exploration:
    http://www.w3.org/TR/CSS21/propidx.html

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Sep 25, 2007
    #6
  7. Jim S

    Jim S Guest

    On Mon, 24 Sep 2007 22:23:27 -0400, Jonathan N. Little wrote:

    > Jim S wrote:
    >> On Tue, 25 Sep 2007 00:44:37 +0200, John Hosking wrote:
    >>

    > <snip>
    >
    >>> Try adding display:block; width:24em; margin:.6em auto; to your
    >>> buttonise rulesets for http://www.jimscot.pwp.blueyonder.co.uk/ .
    >>>
    >>> Similar approach for the http://www.priorysingers.org.uk/ site (although
    >>> the <a>-within-a-<p>-within-a-<table>-within-a-<td> of a table inside
    >>> another table is already overkill in my book). Starting over wouldn't be
    >>> bad.
    >>>
    >>> And I don't know what you mean by "active" buttons; aren't they all?
    >>>
    >>> GL

    >>
    >> Thanks John.
    >> They weren't really buttons in the 'priory' site so they weren't active
    >> like mine.
    >> Is there any way of centralising the text in the box you suggested?

    >
    > add text-align: center;
    >
    > This might help you in your further exploration:
    > http://www.w3.org/TR/CSS21/propidx.html


    Thanks AND vertical-align: middle; too.
    BUT although the horizontal one works in IE, the vertical one does not :eek:(
    --
    Jim S
    Tyneside UK
    www.jimscott.co.uk
    Jim S, Sep 25, 2007
    #7
  8. Jim S wrote:
    > On Mon, 24 Sep 2007 22:23:27 -0400, Jonathan N. Little wrote:


    >>
    >> This might help you in your further exploration:
    >> http://www.w3.org/TR/CSS21/propidx.html

    >
    > Thanks AND vertical-align: middle; too.
    > BUT although the horizontal one works in IE, the vertical one does not :eek:(


    If you look at the link I provided your will see that vertical-align:
    applies to inline-level and 'table-cell' elements

    http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align

    of which DIV are not a member. Now you could apply display: table-cell;
    to the DIV or A, *but* (did you guess correctly?) don't expect MSIE to
    accommodate. If your texts it only only line then setting the block's
    height=line-height will do what you wish...

    <!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>vertical center</title>

    <style type="text/css">

    a.fauxbutton {

    /* convert the inline element */
    display: block;

    /* color and style it like a button */
    color: #000; background-color: #aaa;
    border: 3px outset #aaa;
    font-family: sans-serif; text-decoration: none;

    /* make the width in relative em's to hold your text */
    width: 15em;

    /* center your text horizonatally */
    text-align: center;

    /* now to center vertically make height=line-height */
    height: 2em; line-height: 2em;
    }

    a:hover { background-color: #ccc; }

    </style>

    </head>
    <body>

    <p>Let's try to make a button for you:
    <a href="http://www.example.com" class="fauxbutton">A fake Button</a>
    </p>
    </body>
    </html>



    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Sep 25, 2007
    #8
  9. Jim S

    Jim S Guest

    On Tue, 25 Sep 2007 11:02:17 -0400, Jonathan N. Little wrote:

    > Jim S wrote:
    >> On Mon, 24 Sep 2007 22:23:27 -0400, Jonathan N. Little wrote:

    >
    >>>
    >>> This might help you in your further exploration:
    >>> http://www.w3.org/TR/CSS21/propidx.html

    >>
    >> Thanks AND vertical-align: middle; too.
    >> BUT although the horizontal one works in IE, the vertical one does not :eek:(

    >
    > If you look at the link I provided your will see that vertical-align:
    > applies to inline-level and 'table-cell' elements
    >
    > http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align
    >
    > of which DIV are not a member. Now you could apply display: table-cell;
    > to the DIV or A, *but* (did you guess correctly?) don't expect MSIE to
    > accommodate. If your texts it only only line then setting the block's
    > height=line-height will do what you wish...
    >
    > <!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>vertical center</title>
    >
    > <style type="text/css">
    >
    > a.fauxbutton {
    >
    > /* convert the inline element */
    > display: block;
    >
    > /* color and style it like a button */
    > color: #000; background-color: #aaa;
    > border: 3px outset #aaa;
    > font-family: sans-serif; text-decoration: none;
    >
    > /* make the width in relative em's to hold your text */
    > width: 15em;
    >
    > /* center your text horizonatally */
    > text-align: center;
    >
    > /* now to center vertically make height=line-height */
    > height: 2em; line-height: 2em;
    > }
    >
    > a:hover { background-color: #ccc; }
    >
    > </style>
    >
    > </head>
    > <body>
    >
    > <p>Let's try to make a button for you:
    > <a href="http://www.example.com" class="fauxbutton">A fake Button</a>
    > </p>
    > </body>
    > </html>


    Thanks Jonathan
    I can do all that, but of course when I do, the one word buttons are only
    the height of the word and two longer words are twice as high.
    If I make the button 48px high then the single word stays at the top in IE
    regardless of the vertical-align: middle; command.
    To make matters even worse Firefox totally disregards the dimensions
    altogether and displays the button in a single line or varying length.
    What I am after is a button version of the grey boxes in
    www.priorysingers.org.uk
    --
    Jim S
    Tyneside UK
    www.jimscott.co.uk
    Jim S, Sep 25, 2007
    #9
  10. Jim S

    Jim S Guest

    Jim S, Sep 25, 2007
    #10
  11. Jim S wrote:
    > OK I'm nearly there.
    > Using a different stylesheets for one-line and two-line buttons I have
    > got to this http://priorysingers.org.uk/testingIndex_1.html
    > It works fine in IE, but not in Firefox or Opera.


    Well I would avoid "position: absolute" if I were you, can get you into
    trouble. Personally your links are in a list so I would use a list!
    You just set their width and if your want the links centered vertically
    you can tweak the single line links...

    <!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: 3px 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; }

    </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 &amp; 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
    Jonathan N. Little, Sep 25, 2007
    #11
  12. Jim S

    Jim S Guest

    On Tue, 25 Sep 2007 14:22:41 -0400, Jonathan N. Little wrote:

    > Jim S wrote:
    >> OK I'm nearly there.
    >> Using a different stylesheets for one-line and two-line buttons I have
    >> got to this http://priorysingers.org.uk/testingIndex_1.html
    >> It works fine in IE, but not in Firefox or Opera.

    >
    > Well I would avoid "position: absolute" if I were you, can get you into
    > trouble. Personally your links are in a list so I would use a list!
    > You just set their width and if your want the links centered vertically
    > you can tweak the single line links...
    >
    > <!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: 3px 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; }
    >
    > </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 &amp; 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>


    Mm. Tried that here http://priorysingers.org.uk/testingIndex.html
    I reality I'm just back where I started,except the borders seem bevelled in
    Firefox when they didn't before.
    I still mean to get to moving buttons.
    --
    Jim S
    Tyneside UK
    www.jimscott.co.uk
    Jim S, Sep 25, 2007
    #12
  13. Jim S wrote:
    > On Tue, 25 Sep 2007 14:22:41 -0400, Jonathan N. Little wrote:
    >
    >> Jim S wrote:
    >>> OK I'm nearly there.
    >>> Using a different stylesheets for one-line and two-line buttons I have
    >>> got to this http://priorysingers.org.uk/testingIndex_1.html
    >>> It works fine in IE, but not in Firefox or Opera.

    >> Well I would avoid "position: absolute" if I were you, can get you into
    >> trouble. Personally your links are in a list so I would use a list!
    >> You just set their width and if your want the links centered vertically
    >> you can tweak the single line links...
    >>
    >> <!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: 3px 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; }
    >>
    >> </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 &amp; 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>

    >
    > Mm. Tried that here http://priorysingers.org.uk/testingIndex.html
    > I reality I'm just back where I started,except the borders seem bevelled in


    Don't want the bevel then change

    border: 3px outset #ccc; to border: 3px solid #000;

    > Firefox when they didn't before.


    You missed an important point, in my example the class "singles"

    ul.buttonbar a.singles { margin-top: .65em; }

    was ONLY applied to the links that were one line of text.

    your "style1" (BTW bad name, style1 means nothing) that replaces my
    "singles" you have applied to ALL your links including the 2 line
    ones... to fix just remove from those...


    <ul class="buttonbar">
    <li><a href="Index.html" class="style1">Home</a></li>
    <li><a href="Page_2.html" class="style1">About Us</a></li>
    <li><a href="Page_3.html">Current Programme</a></li>
    <li><a href="Page_4.html">Contacts &amp; Information</a></li>
    <li><a href="Page_5.html">Become a Patron</a></li>
    <li><a href="Page_6.html">Past Performances</a></li>
    <li><a href="Page_7.html" class="style1">About our Area</a></li>
    </ul>

    > I still mean to get to moving buttons.


    ? Don't know what you mean by this.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Sep 25, 2007
    #13
  14. Jim S

    Jim S Guest

    8<
    >>
    >> Mm. Tried that here http://priorysingers.org.uk/testingIndex.html
    >> I reality I'm just back where I started,except the borders seem bevelled in

    >
    > Don't want the bevel then change
    >
    > border: 3px outset #ccc; to border: 3px solid #000;
    >
    >> Firefox when they didn't before.

    >
    > You missed an important point, in my example the class "singles"
    >
    > ul.buttonbar a.singles { margin-top: .65em; }
    >
    > was ONLY applied to the links that were one line of text.
    >
    > your "style1" (BTW bad name, style1 means nothing) that replaces my
    > "singles" you have applied to ALL your links including the 2 line
    > ones... to fix just remove from those...
    >
    >
    > <ul class="buttonbar">
    > <li><a href="Index.html" class="style1">Home</a></li>
    > <li><a href="Page_2.html" class="style1">About Us</a></li>
    > <li><a href="Page_3.html">Current Programme</a></li>
    > <li><a href="Page_4.html">Contacts &amp; Information</a></li>
    > <li><a href="Page_5.html">Become a Patron</a></li>
    > <li><a href="Page_6.html">Past Performances</a></li>
    > <li><a href="Page_7.html" class="style1">About our Area</a></li>
    > </ul>
    >
    >> I still mean to get to moving buttons.

    >
    > ? Don't know what you mean by this.


    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.
    --
    Jim S
    Tyneside UK
    www.jimscott.co.uk
    Jim S, Sep 25, 2007
    #14
  15. Jim S wrote:

    > I still mean to get to moving buttons.


    Okay I think I know what you mean. You want to make the "buttons" to
    look like they depress like real buttons. Well your can*

    The '*' means of course MSIE will not cooperate without some hacks...

    For real modern web browsers just add:

    ul.buttonbar li:active { border-style: inset; }

    All this does is when you mouse down on a link the parent LI's borders
    swap from outset to inset style giving the appearance of a button.

    Now MSIE will not work because it does not support :hover and :active
    pseudo-classes on any elements other than A elements with HREF
    attributes (i.e., links). So your either need to use some JavaScript
    hack or use MSIE's special "behavior" property with their special HTC
    file. I fine the latter easiest. You need to add a special class for IE
    for the target element. The class name is "active" relating to the
    pseudo-class "active" that other browser will use. I kept the names the
    same to keep the purpose clear...

    /* supporting browser will use this pseudo-class rule */
    ul.buttonbar li:active { border-style: inset; }

    /* MSIE will use this real class rule, not the '.' not ':' */
    ul.buttonbar li.active { border-style: inset; }

    /* use MSIE's special behavior to attach the HTC the LI elements */
    ul.buttonbar li { behavior: url(IEFixes.htc); }

    Here is the code for the HTC, plain text file named "IEFixes.htc" I
    modified it to streamline a bit...

    //--------------------------- start cut ---------------------------
    <public:component>
    // For MSIE use JScript to attach JS functions to compensate
    // for missing pseudo-class support
    // from Vladdy http://www.vladdy.net/Demos/IEPseudoClassesFix.html
    // updated for html4.01 jnl 3/06
    <public:attach event="onmouseover" onevent="DoHover()">
    <public:attach event="onmouseout" onevent="RestoreHover()">
    <public:attach event="onmousedown" onevent="DoActive()">
    <public:attach event="onmouseup" onevent="RestoreActive()">
    <script type="text/jscript">
    function DoHover(){
    element.className += ' hover';
    }
    function DoActive(){
    element.className += ' active';
    }
    function RestoreHover(){
    element.className = element.className.replace(/\shover\b/,'');
    }
    function RestoreActive(){
    element.className = element.className.replace(/\sactive\b/,'');
    }
    </script>
    </public:component>
    //---------------------------- end cut ----------------------------

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Sep 25, 2007
    #15
  16. Jim S

    Jim S Guest

    On Tue, 25 Sep 2007 16:21:24 -0400, Jonathan N. Little wrote:

    > Jim S wrote:
    >
    >> I still mean to get to moving buttons.

    >
    > Okay I think I know what you mean. You want to make the "buttons" to
    > look like they depress like real buttons. Well your can*
    >
    > The '*' means of course MSIE will not cooperate without some hacks...
    >
    > For real modern web browsers just add:
    >
    > ul.buttonbar li:active { border-style: inset; }
    >
    > All this does is when you mouse down on a link the parent LI's borders
    > swap from outset to inset style giving the appearance of a button.
    >
    > Now MSIE will not work because it does not support :hover and :active
    > pseudo-classes on any elements other than A elements with HREF
    > attributes (i.e., links). So your either need to use some JavaScript
    > hack or use MSIE's special "behavior" property with their special HTC
    > file. I fine the latter easiest. You need to add a special class for IE
    > for the target element. The class name is "active" relating to the
    > pseudo-class "active" that other browser will use. I kept the names the
    > same to keep the purpose clear...
    >
    > /* supporting browser will use this pseudo-class rule */
    > ul.buttonbar li:active { border-style: inset; }
    >
    > /* MSIE will use this real class rule, not the '.' not ':' */
    > ul.buttonbar li.active { border-style: inset; }
    >
    > /* use MSIE's special behavior to attach the HTC the LI elements */
    > ul.buttonbar li { behavior: url(IEFixes.htc); }
    >
    > Here is the code for the HTC, plain text file named "IEFixes.htc" I
    > modified it to streamline a bit...
    >
    > //--------------------------- start cut ---------------------------
    > <public:component>
    > // For MSIE use JScript to attach JS functions to compensate
    > // for missing pseudo-class support
    > // from Vladdy http://www.vladdy.net/Demos/IEPseudoClassesFix.html
    > // updated for html4.01 jnl 3/06
    > <public:attach event="onmouseover" onevent="DoHover()">
    > <public:attach event="onmouseout" onevent="RestoreHover()">
    > <public:attach event="onmousedown" onevent="DoActive()">
    > <public:attach event="onmouseup" onevent="RestoreActive()">
    > <script type="text/jscript">
    > function DoHover(){
    > element.className += ' hover';
    > }
    > function DoActive(){
    > element.className += ' active';
    > }
    > function RestoreHover(){
    > element.className = element.className.replace(/\shover\b/,'');
    > }
    > function RestoreActive(){
    > element.className = element.className.replace(/\sactive\b/,'');
    > }
    > </script>
    > </public:component>
    > //---------------------------- end cut ----------------------------


    Thanks Jonathan.
    I'm going to take a break as me head hurts :eek:)
    I know it's just fluff, but simple folk are easily impressed and it keeps
    my brain ticking over.
    --
    Jim S
    Tyneside UK
    www.jimscott.co.uk
    Jim S, Sep 25, 2007
    #16
  17. 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 &amp; 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
    Jonathan N. Little, Sep 25, 2007
    #17
  18. Jim S

    Jim S Guest

    On Tue, 25 Sep 2007 16:31:27 -0400, Jonathan N. Little wrote:

    > 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 &amp; 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>


    You got me going again.
    Yes, that works in FF and Opera browsers.
    Where exactly do I put the "public component" bit?
    --
    Jim S
    Tyneside UK
    www.jimscott.co.uk
    Jim S, Sep 25, 2007
    #18
  19. 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.


    You want buttons something like these of mine? They appear to depress
    when hovered, then after going to the page, they are no longer a button,
    ... 'cause you're *there*!

    http://freezeblock.com/

    BTW, your page falls apart when I increase the text size so I can read
    it (your buttons).

    --
    -bts
    -Motorcycles defy gravity; cars just suck
    Beauregard T. Shagnasty, Sep 26, 2007
    #19
  20. Beauregard T. Shagnasty wrote:
    > 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.

    >
    > You want buttons something like these of mine? They appear to depress
    > when hovered, then after going to the page, they are no longer a
    > button, .. 'cause you're *there*!
    >
    > http://freezeblock.com/


    Slick. Any reasonably popular/current browsers you've seen issues with,
    with those?


    --
    Blinky RLU 297263
    Killing all posts from Google Groups
    The Usenet Improvement Project moved to this site August 28th:
    http://improve-usenet.org
    Blinky the Shark, Sep 26, 2007
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Chris Kettenbach

    css help needed div/span

    Chris Kettenbach, Dec 29, 2004, in forum: HTML
    Replies:
    1
    Views:
    433
    Jim Michaels
    Feb 4, 2006
  2. MagicFreebiesUK.co.uk

    Help needed regarding css and menus

    MagicFreebiesUK.co.uk, Apr 10, 2005, in forum: HTML
    Replies:
    7
    Views:
    377
    William Hamby
    Apr 12, 2005
  3. Spartanicus

    Re: help needed with CSS layout

    Spartanicus, Jul 5, 2005, in forum: HTML
    Replies:
    0
    Views:
    393
    Spartanicus
    Jul 5, 2005
  4. Martin Clark
    Replies:
    46
    Views:
    1,125
    Martin Clark
    Mar 22, 2006
  5. Ryan Macy

    Ideas needed & help needed!

    Ryan Macy, Jul 19, 2006, in forum: Ruby
    Replies:
    2
    Views:
    504
    Ryan Macy
    Jul 19, 2006
Loading...

Share This Page