Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Jul 2002
    Location
    The Netherlands
    Posts
    252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Keep XP button style while adding background image

    Hi guys,

    I have a few buttons on my website and when using 'value="text"', the buttons appear in the default XP style (with the nice shadow and yellow mouseover effect). Now I want to add an icon to the button that should appear left of the text. I used the following style properties for this: <input type="button" value="Save" style="background: url(icons/save.gif) no-repeat; padding-left: 10px" />.

    Now the problem is, that while adding additional style to a button, the XP style completely dissapears and the button looks like the buttons originally did in older browsers.

    Is there a way to add an icon to a button, without loosing the nice XP look?

    Thanks in advance,

    Cheers, Michiel

  • #2
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try the button element, it accepts content like an <img> between the opening and closing tags.

    Quote Originally Posted by w3.org
    Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to "image", but the BUTTON element type allows content.
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #3
    Regular Coder
    Join Date
    Jul 2002
    Location
    The Netherlands
    Posts
    252
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi mcdougals4all,

    thanx for your quick reply! I now use the following: '<button type="button" value="Save"><img src="icons/save.gif" /> Save</button>'. With some additional styling, this appears to be working just fine!

    Cheers, Michiel

  • #4
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Your welcome.
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #5
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hello!

    I'm dealing with the same problem described above. Could you give an example of the style you used on <button type="button".... > in order to make it look like XP buttons do ? please, I really need this feature.

    Thanks in advance!

  • #6
    Regular Coder
    Join Date
    Jul 2002
    Location
    The Netherlands
    Posts
    252
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi dandrei,

    sorry for my delayed response. Underneath you'll find the html and css I use to get a button look like an XP button.

    Code:
    <style type="text/css">
    <!--
    button {
      margin-left: 5px;
      margin-right: 5px;
      width: 115px;
      text-align: left;
      font-family: arial;
      font-size: 11px;
    }
    
    button img {
      margin-left: 1px;
      margin-right: 10px;
      float: left;
    }
    -->
    </style>
    
    
    <button type="button"><img src="icons/save.gif" /> Save changes</button>

    Hope that works for you too!

    Cheers, Michiel

  • #7
    Regular Coder
    Join Date
    Jul 2005
    Posts
    352
    Thanks
    1
    Thanked 0 Times in 0 Posts
    http://www.huntingground.net has some information about changing the XP style button and examples and it may give you some help about doing that.

    Hope this helps,
    MW2005


  •  

    Posting Permissions

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