SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sliding Doors on Button - IE8 issue

    I have this CSS:

    Code:
    a.LinkButton
    {
    background: transparent url('/Images/ButtonLeft.png') no-repeat top left;
    display: block;
    float: right; 
    font: normal 12px Arial; 
    line-height: 15px; 
    height: 23px; 
    padding-left: 9px; 
    text-decoration: none;
    margin-left: 5px; 
    }
    
    a:link.LinkButton, a:visited.LinkButton
    {
    color: #494949; 
    }
    
    a.LinkButton span
    {
    background: transparent url('/Images/ButtonRight.png') no-repeat top right;
    display: block;
    padding: 4px 9px 4px 0; 
    }
    
    a.LinkButton:active
    { 
    background-position: bottom left;
    }
    
    a.LinkButton:active span
    { 
    background-position: bottom right;
    }
    and this HTML:

    Code:
    <a class="LinkButton" href="Whatever"><span>Button Text</span></a>
    So, a pretty standard "sliding doors" technique to cater for varying text widths. In Firefox and IE7 (I've not been able to check IE6) it works as expected - if the mouse button is held down anywhere on the button, the image moves as expected.

    BUT, in IE8, that only happens if the mouse button is held down on the left side of the button. If it's held over the right side (actually more likely, as it's bigger!) the graphic does not change.

    Please can someone spot what I'm doing wrong?

    Thanks, Nick

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It looks like its related to this bug. There doesn't seem to be a solution either apart from using :focus (just for ie8) instead of :active but of course that leaves the element highlighted until focus is removed.

    Why don't you just change it to work on :hover instead of on :active.
    Code:
    a.LinkButton:hover span

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the prompt answer Paul. It does indeed look like I have chanced across that bug.

    Why "active" rather than "hover"? Well, my customer wants the button to highlight when the user clicks and not when the user hovers......


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
  •