[RE-SOLVED]Convert to

Heya, i have a problem!

My "Register" button is styled to look like a normal hyperlink rather a button. This gives me one pretty annoying problem. When you press my register button the text moves a little to the right, i suppose it’s the button effect that should make it appear the button is being pressed down.

I can’t find any CSS solutions to avoid this, so my next move is to convert the button the an <a> tag, is this possible?

- Try press Register to see what im talking about; http://www.norlins.dk/uchihaproject/foreningens_historie.html

Tryed to convert the <button> to <a> but it just redirect me to startpage:

Button:

<button type="submit" id="wlpeRegisterButton" name="service" value="registernew">Register</button>

My lousy convert:

<a href="registernew" type="submit" id="wlpeRegisterButton" name="service">Register</a>

Thanks

What happens if you use <input id="registerButton" type="submit" ... /> then use CSS to style it?

Hey sott!!

I tryed to insert this: <input id="registerButton" type="submit" name="service" value="registernew" />

Still give me a button with the up/down effect, try look at the page :’(

Hm. I don’t get any such effect, but then I’m using a Mac, and get the nice default Mac button there. On actually looking at it, there’s no reason why it can’t be a link...

However, I believe you could style a button to avoid that shift; sounds like it’s a padding change in the default styling of buttons/pressed buttons.

http://particletree.com/features/rediscovering-the-button-element/

Hey sottwell where do i sign up for your fan club? !!! Thhhaaank you

I got it working with both methods, you were right about the padding:

#member-title-bg-st button[type]{
padding:5px 10px 5px 7px; /* Firefox */
line-height:17px; /* Safari */
}
*:first-child+html button[type]{
padding:4px 10px 3px 7px; /* IE7 */
}

I choose to go with the simple < a href="[~docID-of-registration-page~]">Register</a> because having the <a> rather than <button> also fixes a problem i had in firefox with "button: outline: none;" not working. Its of course not as flexible.. if i suddenly mess around with my registration page, but oh well!

SUPER thanks a bunch!

If you like jquery you could also use this

Quote from: Cipa at May 08, 2009, 08:37 AM

If you like jquery you could also use this

Haven’t messed around with jquery a whole lot, perhaps i should give it a try

Haha just as i thought it was a wrap! If i were to make my log out button an <a> i can’t just use this: [~docID-of-registration-page~] since its suppose to stay on the current active page, and switch to login mode.

[b]THE BUTTON OF PURE EVIL[/b]

<button type="submit" id="wlpeLogoutButton" name="service" value="logout">Log Out</button>

NOW i could use the CSS padding solution, but i were just so happy to have the border: outline bug fixed aswell!

[~[*id*]~] to just stay on the same page.

Quote from: sottwell at May 08, 2009, 11:12 AM

[~[*id*]~] to just stay on the same page.

If you wanna try log in/out to see it in action at some point:
login is: jonas password: relaxx

Right now i have written this:

<a href="[~[*id*]~]">Log Out</a>

Result is nothing happens when you click logout

i guess making a submit button into plain anchor tag is impossible since id, name, value aren’t valid attributes