SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2003
    Location
    Morges Switzerland
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Link with a push button

    Hello,

    I tried to put a link under a button, like this:
    Code:
    <a href="urlurlurl"><button type="button">Link</button></a>
    it is not placed on a form, just a single button. It validates (xhtml1.1) and works fine in Mozilla Firebird - but not in IE6.0 I searched on several places, but I got too many useles hits, therefore i ask here. I don't want to use javascript, so no 'onclick'.

    Is this an IE problem, or do i do something wrong?

    wimb

  2. #2
    SitePoint Addict Knightime's Avatar
    Join Date
    Jan 2003
    Location
    USA
    Posts
    376
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you mean this?


    HTML Code:
    <a href=[url="http://www.thisurl.netcom/"]http://www.thisurl.netcom[/url] title="Link to thisurl.netcom" target="_blank">
    <img src="pics/button.jpg" alt="desc. of pic" /></a>
    Troy

  3. #3
    SitePoint Zealot
    Join Date
    Mar 2003
    Location
    Morges Switzerland
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, I'm looking for the real <button>. And I like to know why it works good in Mozilla and Opera, but not in IE.

  4. #4
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,054
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by wimb
    Hello,

    I tried to put a link under a button, like this:
    Code:
    <a href="urlurlurl"><button type="button">Link</button></a>
    it is not placed on a form, just a single button. It validates (xhtml1.1) and works fine in Mozilla Firebird - but not in IE6.0 I searched on several places, but I got too many useles hits, therefore i ask here. I don't want to use javascript, so no 'onclick'.

    Is this an IE problem, or do i do something wrong?

    wimb
    There is no element "button type". You need to change this to input type.

    here is a button. You don't need the JavaScript tag to make this work.

    <input type=button value="MyButton" onClick="parent.location='http://MyDomain.com/MyPage.htm'">
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

  5. #5
    SitePoint Zealot
    Join Date
    Mar 2003
    Location
    Morges Switzerland
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Shyflower
    There is no element "button type". You need to change this to input type.
    The element Button has been there since html 4.0

    In my feeling "onclick" is also javascript, because when I disable javascript, it does not work anymore.


    wimb

  6. #6
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,054
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by wimb
    The element Button has been there since html 4.0

    In my feeling "onclick" is also javascript, because when I disable javascript, it does not work anymore.


    wimb
    Boy do I feel dumb!

    Sorry about the element thing.

    However, on looking at the W3C page about buttons, I saw that it was listed under the section about "Forms".Granted, you can make the button appear on the page without using the form tag, but I don't know if you can make it link since it has no href attributes.
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

  7. #7
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The only reason this works in mozilla is a bug - don't rely on it (for those who care: http://bugzilla.mozilla.org/show_bug.cgi?id=127903 , links intercept "onclick" events that should be passed to buttons inside the link)

    But here are two non-javascript ways to do it:
    HTML Code:
    <html><head><title>links with buttons</title>
      <style type="text/css">
      a.button {
        background-color: silver;
        border: 2px silver outset;
        color: black;
        display: block;
        text-align: center;
        text-decoration: none;
        width: 100px;
      }
      
      a.button:active {
        border: 2px silver inset;
      }
      </style>
      </head><body>
      <p>Method 1: the fake button:</p>
      <a href="http://www.sitepointforums.com" class="button">click me!</a>
      
      <p>Method 2: use a form:</p>
      <form action="http://www.sitepointforums.com" method="get">
      <input type="submit" value="click me!">
       <button type="submit">No, click me!</button>
     </form>
      </body></html>
    Fake button pros/cons:
    In browsers like Opera, where form buttons are fairly highly styled and don't look much like buttons do in the OS, the fake button stands out a mile.
    The varying display of outset/inset borders across browsers can lead to odd effects, too.

    Form pros/cons:
    Security-concious browsers will whine at the user about unencrypted form posts (except when used on ssl sites, obviously)

    [edited to include both input type submit and a real button tag in example - both will work]

  8. #8
    SitePoint Zealot
    Join Date
    Mar 2003
    Location
    Morges Switzerland
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    [QUOTE=Shyflower] Boy do I feel dumb! [QUOTE]

    Don't worry, I just discovered this "button" and now I can't get it working as I want, I feel really dumb.

    Thanks blufive, I go to play with your button code.
    The Mozilla bug seems to be for the input type button, but it does exactly the same.


    wimb


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •