IIRC, when I did this in the past, I had to add an onclick handler to the button for IE. Also watch any hover effects you have for anchors, because in IE, it'll render through the button (it won't in Firefox, Safari, or Opera).
-- Kevin On 1/31/08 10:00 AM, in article [EMAIL PROTECTED], "Mark Horn" <[EMAIL PROTECTED]> wrote: > Geoff, or others :) > > I found the posting below suggesting making links/buttons/submits look > the same as described at > http://particletree.com/features/rediscovering-the-button-element/ > and used by Jumpstart (http://files.doublenegative.com.au/jumpstart/) > > I tried this out and all looks/works great in FireFox but does not > work correctly in IE. Any ideas on how to tweak these for IE? or any > other Best Practice on how to support this type of thing? > > The original question was Best Practice for cancel an edit page. ie. > have a Submit button that is 'Save' a link that is 'Cancel' (don't > want validation) and want to have them together and look good. > > [Save] [Cancel] > > Thanks, > Mark > > ------------------------------------- > > Re: [T5] best practice to cancel edit page > from Tapestry User by jeffrey ai <[EMAIL PROTECTED]> > > That's great to know! > Thanks for your tips, Geoff. > > Cheers, > Jeffrey Ai > > > Geoff Callender-2 wrote: >> >> Hi Jeffrey, >> >> What you do is change the submits and the links to look the same, >> which is not quite the same as the browser-generated button, but on >> the plus-side they'll look the same in any browser. This approach is >> used in many commercial sites eg. banking sites. One place that >> describes button-styling is >> http://particletree.com/features/rediscovering-the-button-element/ >> . >> >> eg. Here are 3 "buttons" on a UserEdit page: >> >> <div class="buttons"> >> <input type="submit" value="Save"/> >> Refresh >> Cancel >> </div> >> >> and here's some css to style them to look the same: >> >> .buttons a, .buttons input { margin:0 7px 0 0; background- >> color:#f5f5f5; border:1px solid #dedede; border-top:1px solid #eee; >> border-left:1px solid #eee; font-family:"Lucida Grande", Tahoma, >> Arial, Verdana, sans-serif; font-size:100%; line-height:130%; text- >> decoration:none; font-weight:bold; color:#565656; cursor:pointer; >> padding:5px 10px 6px 7px; /* Links and submits */ } >> .buttons input { width:auto; overflow:visible; padding:4px 10px 3px >> 7px; /* IE6 */ } >> .buttons input[type] { padding:5px 10px 5px 7px; /* Firefox */ line- >> height:17px; /* Safari */ } >> *:first-child+html input[type] { padding:4px 10px 3px 7px; /* IE7 */ } >> .buttons input img, .buttons a img { margin:0 3px -3px 0 !important; >> padding:0; border:none; width:16px; height:16px; } >> >> A fuller example is in the code of JumpStart. >> >> Cheers, >> >> Geoff >> http://files.doublenegative.com.au/jumpstart/ >> >> On 22/12/2007, at 4:40 AM, jeffrey ai wrote: >> >>> >>> Geoff, >>> >>> I am not quite familiar with CSS. >>> I think ActionLink or PageLink could only be rendered to an Anchor >>> Link. >>> I doubt CSS can change its look like to a button. >>> >>> Cheers, >>> Jeffrey Ai >>> >>> >>> Geoff Callender-2 wrote: >>>> >>>> Another technique is to use an ActionLink or PageLink for cancel and >>>> refresh functions. To make the submit button and ActionLink share >>>> the >>>> same styling use css. I think Howard recommends this approach. >>>> >>>> Cheers, >>>> Geoff >>>> >>>> On 21/12/2007, at 4:37 AM, jeffrey ai wrote: >>>> >>>>> >>>>> Homburg, >>>>> >>>>> I noticed the same problem too. If you have a normal cancel button >>>>> in a T5 >>>>> form as your save button, a post request will be sent back to the >>>>> page to >>>>> go through the validation method and even onSuccess() method. >>>>> >>>>> My solution to this problem is to create an ActionLinkButton >>>>> component. It's >>>>> almost the same with the ActionLink component, Instead of create a >>>>> normal >>>>> link, it creates a button link like below: >>>>> >>>>> <input type="button" value="cancel" >>>>> onclick="parent.location='/xxx/YOURPAGE.cancel'" id="cancel"/> >>>>> >>>>> In your page, you could have an onActionFromCancel() method to do >>>>> whatever >>>>> redirection you want. >>>>> >>>>> Cheers, >>>>> Jeffrey Ai >>>>> >>>>> >>>>> >>>>> Sven Homburg-2 wrote: >>>>>> >>>>>> hi there, >>>>>> >>>>>> who can me explain the best practice to cancel edit page? >>>>>> >>>>>> i have a save- and cancel button (both submit components) >>>>>> surrounded by >>>>>> a form component. >>>>>> >>>>>> if user press the cancel button, the edit form should make nothing >>>>>> than >>>>>> leave the page. >>>>>> without prepare, validation, etc >>>>>> >>>>>> is this possible? >>>>>> >>>>>> -- >>>>>> best regards >>>>>> S.Homburg >>>>>> >>>>>> >>>>>> >>>>>> --------------------------------------------------------------------- >>>>>> To unsubscribe, e-mail: [EMAIL PROTECTED] >>>>>> For additional commands, e-mail: [EMAIL PROTECTED] >>>>>> >>>>>> >>>>>> >>>>> >>>>> -- >>>>> View this message in context: >>>>> http://www.nabble.com/-T5--best-practice-to-cancel-edit-page-tp14427892p14 >>>>> 441353.html >>>>> Sent from the Tapestry - User mailing list archive at Nabble.com. >>>>> >>>>> >>>>> --------------------------------------------------------------------- >>>>> To unsubscribe, e-mail: [EMAIL PROTECTED] >>>>> For additional commands, e-mail: [EMAIL PROTECTED] >>>>> >>>> >>>> >>>> --------------------------------------------------------------------- >>>> To unsubscribe, e-mail: [EMAIL PROTECTED] >>>> For additional commands, e-mail: [EMAIL PROTECTED] >>>> >>>> >>>> >>> >>> -- >>> View this message in context: >>> http://www.nabble.com/-T5--best-practice-to-cancel-edit-page-tp14427892p1445 >>> 9523.html >>> Sent from the Tapestry - User mailing list archive at Nabble.com. >>> >>> >>> --------------------------------------------------------------------- >>> To unsubscribe, e-mail: [EMAIL PROTECTED] >>> For additional commands, e-mail: [EMAIL PROTECTED] >>> >> >> >> --------------------------------------------------------------------- To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED]
