SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Aug 2013
    Location
    Seattle, WA
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question a:hover working weirdly

    Hi.

    I'm having an issue with the hover state for some links. The first image is the normal link state, and the second is hovered. For some reason the left tip of the T and the right tip of the r are staying the original green color. I thought maybe it was because I'm not using a Web safe font, but I tried it with Arial, and it did the same thing. I've never seen this before, and have no idea how to fix it.

    Any ideas that might help?

    Screen Shot 2013-08-28 at 3.27.05 PM.png

    Screen Shot 2013-08-28 at 3.29.12 PM.png

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Hi, TriciaJoy, and welcome to the forums.

    The attached images are awaiting approval before we can see them.

    Sending a screen shot alone is like sending your doctor a picture of you and asking him/her why you don't feel well.

    In other words, we need to see the actual web page or a cut-down working example that demonstrates the problem before we can offer accurate advice.

    Please read the following guidelines and get back with us with some code that will help us help you.
    http://www.sitepoint.com/forums/show...Posting-Basics

    Thanks

  3. #3
    SitePoint Member
    Join Date
    Aug 2013
    Location
    Seattle, WA
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply. Sorry about that. The site isn't live, so I didn't know how else to show it.

    Hopefully my code isn't too confusing. It is only my second site, so I'm still getting the hang of it, and organizing my code.

    Here is a CodePen of it. I left out the images, but the problem is most visible with the link to Tumblr near the bottom, above the footer. It also happens on the tip of the descender of the Js in the e-mail address at the top and bottom.

    Also, I just noticed that it doesn't do it in Firefox. Just does it in Chrome and Safari.

    http://cdpn.io/ieFgo

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    This is a speculative answer...

    This seems to be a webkit issue. The anomaly happens in Chrome and Opera, but not FF nor IE8.

    The pixels that smooth those outer-most points at the edges of the text box are outside the box and are not being re-colored when hovered. I added one pixel to the anchors (line 23) and worked around the issue. You might turn up something more definitive by googling.

    Interesting problem.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    It seems to be a webkit bug with the way its sub pixel antialiasing works in certain circumstances which also occurs in transforms and rotations.

    For transformations the fix is to trigger the 3d rendering mode which cures the problem so the same fix could be applied here.

    Add a class to the anchor concerned and add these styles.

    Code:
    a.classname{
      -webkit-transform: rotate(0) translate3d( 0, 0, 0);
    display:inline-block;
    }
    Be careful with rules like this:

    Code:
    * {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-size: 1em;
    	font-style: normal;
    	text-decoration: none;
    	font-family: "Helvetica Neue", "Arial", sans-serif;
    }
    That will kill inheritance and sidestep the purpose of the cascade. Only apply properties that are not inherited via the blanket use of the universal selector otherwise inner elements will not inherit the font-size of the parents. Margin,padding and borders are ok (as they are not inherited) but font size, family and other properties should be applied to the body element instead so that they cascade in the normal way.

  6. #6
    SitePoint Member
    Join Date
    Aug 2013
    Location
    Seattle, WA
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys! I'll try that in the morning.

    The universal css was on the code my boyfriend gave me so I just left it there. I will look into that.

  7. #7
    SitePoint Member
    Join Date
    Aug 2013
    Location
    Seattle, WA
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    This is a speculative answer...

    This seems to be a webkit issue. The anomaly happens in Chrome and Opera, but not FF nor IE8.

    The pixels that smooth those outer-most points at the edges of the text box are outside the box and are not being re-colored when hovered. I added one pixel to the anchors (line 23) and worked around the issue. You might turn up something more definitive by googling.

    Interesting problem.
    Still haven't figured out how to fix it.

    Can you explain what you mean by "added one pixel to the anchors", please?

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Paul's solution didn't fix it? Are you sure you implemented it correctly?

    All I meant was that I added 1px of padding to the anchor.
    (That was oddly worded, wasn't it )

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ronpat View Post
    Paul's solution didn't fix it? Are you sure you implemented it correctly?
    I tested the solution again (just in case) and it seems to work fine for me on that codepen example.

    As you say adding a 1px horizontal padding should work also

  10. #10
    SitePoint Member
    Join Date
    Aug 2013
    Location
    Seattle, WA
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I tested the solution again (just in case) and it seems to work fine for me on that codepen example.

    As you say adding a 1px horizontal padding should work also
    How do I add 1px horizontal padding when the width isn't set? Can you show me? I am confused.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Either give a class to the troublesome element or in your exampe you could do this.

    Code:
    #sketchbook a {
        padding-right: 1px;
    }
    You can add horizontal padding to most anything. You don't need a width to do it.

  12. #12
    SitePoint Member
    Join Date
    Aug 2013
    Location
    Seattle, WA
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Omg duh. Sorry I am braindead lately. Thanks! That fixed it.


Tags for this Thread

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
  •