Button element's click effect

[Keleth]

Today I was trying to create a text button that would look similar to the link next to it. With the exception of getting text-decoration: underline working, I noticed a peculiar behavior. When I click the button, regardless of the fact that I've removed the background and borders, the text shifts to the right and down a bit. I can't figure out what property is moving the text, which I would like to stop.

Does anyone have any idea?

[sniperman]

it would be helpful if you could provide a working example. i'm only guessing but it seems like another container in HTML could be causing this, or CSS itself depending on whether you positioned the effect to display:absolute; (moving the element on click) or perhaps the onclick font-size increased. There seems to be a parameter change in CSS which is different to the element in HTML.

Could you provide an example of your CSS properties?

[Keleth]

This is all the CSS affecting the element, as told by Firebug.



background:transparent none repeat scroll 0 0;
color:#AA0000;
height:auto;
width:auto;
border:medium none;
font-family:'Lucida Grande',Verdana,Arial,Sans-Serif;
font-size:13px;
border-collapse:collapse;
border-spacing:0;
text-align:justify;
line-height:1.1em;


I included the irrelevant ones for the sake of thoroughness.

[bluewalrus]

Need your whole code or atleast more than that. that only tells what the button does in it's normal state and nothing about what's around it that could be affecting it, as well as the hover, and or onlick, on mouseover states.

[Keleth]

A link to my css sheet. There is no inline.

http://pnpo.rhovisions.com/styles/pnpo.css

If not sufficient, I can make a small page to show what's going on.

[sniperman]

The only link in your CSS I saw for your initial explanation was


a:hover {
color: #13D;
/* text-decoration: underline;*/
}


There is nothing there to assume a value in the hover property moves the text button. There could be a slight chance that the underline decoration on an image button (which you use) repositions the button because it has to render a line underneath the image. In the case that text-decoration: underline on an image button renders a line and displaces the image, you could always use a negative top margin to rectify the decoration. But different browsers render decoration differently so you would have to tell me which browser you use.

Do you really need an image button with underline? Why not use a CSS Rollover effect with the underline on the second image. You can view a demonstration and explanation of one I use below.

[removed link by request]