Grow your CSS skills. Land your dream job.

Weird hover behavior for webfont

  • # March 3, 2013 at 3:46 pm

    Hi all,
    By adding a simple color change via css to my webfont h1, there is some residue from the previous color. This is only happening on some of the fonts. Any idea how this is happening?

    &:hover {
    @include transition(#4a4a4a .1s ease-in-out);
    color: #4a4a4a;
    }

    [screen-shot](http://i2.photobucket.com/albums/y13/wragen22/screen_zpsa4fefc41.png “screen-shot”)

    Much thanks.

    # March 3, 2013 at 4:13 pm

    We really need to see it in a live link to test/see for ourselves.

    # March 14, 2013 at 2:37 pm

    Here is the link. http://jamilopitts.com/kirby/

    Also, guess while I have your eyes… having trouble getting my logo image to display. I have tried multiple directory src locations including ../ ect but still not working.. :-/

    # March 14, 2013 at 8:27 pm

    anyone?

    # March 14, 2013 at 8:55 pm

    On the italics font in your example, it looks like the “ease-in-out” effect is only going the width of a non-italic font. Have you tried adjusting the width of the transition?

    # March 14, 2013 at 9:13 pm

    You need to increase left and right padding on `h1` element. Issues goes away.

    remove `padding-bottom:0;` and add `padding:0 20px;`

    edited to add..

    where is your image located in your directory structure?

    # March 14, 2013 at 9:45 pm

    The problem with your logo is that your server is serving it with the wrong mime type. It’s being served as “text/plain“ instead of “image/svg+xml“. Add this to your .htaccess file:

    AddType image/svg+xml svg
    AddType image/svg+xml svgz

    # March 14, 2013 at 10:04 pm

    Josh is right, if you load the direct svg path, xml is rendered http://jamilopitts.com/kirby/assets/images/jte.svg

    # March 15, 2013 at 12:49 am

    @joshblackwood tried this…still not working

    # March 15, 2013 at 1:38 am

    It works : http://jamilopitts.com/kirby/assets/images/jte.svg

    You have it as: `/assets/images/jte.svg` in your code.

    Change to: `/kirby/assets/images/jte.svg`

    # March 15, 2013 at 2:16 am

    tried that. still nothing :-/

    # March 15, 2013 at 11:43 am

    Try

    ``

    or

    ``

    # March 15, 2013 at 11:48 am

    And your HTML still has syntax errors.

    # March 15, 2013 at 1:19 pm

    yes, i’ll get to the syntax. the first spits out the svg code, the second does nothing.

    http://jamilopitts.com/kirby/

    # March 15, 2013 at 1:31 pm

    I have no idea why it’s causing the issue but removing **inline-block** from the h1 solves the problem.

    Aren’t [h1] block by default? Why would one change that?

Viewing 15 posts - 1 through 15 (of 30 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".