Results 1 to 6 of 6

Thread: Button element's click effect

  1. #1
    Join Date
    Jun 2008
    Posts
    40
    Thanks
    2
    Thanked 4 Times in 4 Posts

    Default Button element's click effect

    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?

  2. #2
    Join Date
    Apr 2009
    Location
    Sydney, Australia
    Posts
    118
    Thanks
    16
    Thanked 1 Time in 1 Post

    Default

    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?

  3. #3
    Join Date
    Jun 2008
    Posts
    40
    Thanks
    2
    Thanked 4 Times in 4 Posts

    Default

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

    Code:
    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.

  4. #4
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    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.

  5. #5
    Join Date
    Jun 2008
    Posts
    40
    Thanks
    2
    Thanked 4 Times in 4 Posts

    Default

    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.
    Last edited by Keleth; 07-09-2009 at 11:39 PM.

  6. #6
    Join Date
    Apr 2009
    Location
    Sydney, Australia
    Posts
    118
    Thanks
    16
    Thanked 1 Time in 1 Post

    Default

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

    Code:
    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]
    Last edited by Snookerman; 05-11-2010 at 08:47 AM. Reason: removed link by request

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
  •