Grow your CSS skills. Land your dream job.

Weird hover behavior for webfont

  • # March 15, 2013 at 1:33 pm

    It works

    # March 15, 2013 at 1:39 pm

    interesting… i wonder if it’s a chrome issue..

    # March 15, 2013 at 1:49 pm

    @Pualie_d hmmm.. removed inline-block.. Still not working though. I added inline-block so that the click area for cursor woud not extend across the whole row but only the text.

    What is interesting is the inline block seems to be causing the issue with color artifacts.

    # March 15, 2013 at 3:10 pm

    I was mentioning, to fix HTML first before you do any testing, because invalid syntax might not render your design correctly.

    # March 15, 2013 at 4:25 pm

    the syntax is only minor differences, I don’t see how that would cause issues. I especially don’t like the whole roles thing and would rather uses classes.

    # March 15, 2013 at 4:34 pm

    >What is interesting is the inline block seems to be causing the issue with color artifacts.

    Sorry, that was the issue I was fixing. I haven’t looked at the other thing yet.

    # March 15, 2013 at 4:57 pm

    You have `div` elements declared outside of HTML Doctype declaration, this has nothing to do with CSS and “rules”. I’ve coded a sample structure for you, you can modify it if you like, but it’s valid syntax… you can eliminate `role` or just add appropriate classes to the HTML elements.

    [Role is part of WAI-ARIA](http://www.w3.org/WAI/intro/aria), it’s for assisted technologies and screen readers.

    # March 15, 2013 at 9:19 pm

    ok, You’re right I did have order out of place, but outside of that I think my markup is fine.

    # March 16, 2013 at 12:58 am

    Ok, cleared cache and works. Still not too sure what to do about in-line block. @Paulie_D do you recommend anything else for getting the desired results?

    # March 16, 2013 at 4:13 am

    Would you use inline-block by default for whatever you are using this for?

    If not then your problem is resolved.

    # March 16, 2013 at 4:45 pm

    Yes. Any idea as to why this would cause the color artifacts to go wrong? Possibly the inline-block is not extending the whole width of the h1 s ?

    # March 16, 2013 at 6:19 pm

    At a guess, it’s a browser rendering issue as the font is italicized.

    # March 19, 2013 at 4:22 pm

    Hmmm… the font style is italicized, however it’s actually regular. I wonder if it’s an issue with font-squirrel?

    # March 20, 2013 at 2:22 am

    @wragen22 Instead of setting it as “italic”, set it as “oblique” and see if that solves it.

    # March 20, 2013 at 7:06 am

    With the display on the h1 set to inline or inline block the text is actually rendering partly outside of the…erm…h1 ‘block’.

    As such, it’s not being affected by the hover color change.

    **I have no idea why this should be so** but a few pixels of horizontal padding fixes the color issue.

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

You must be logged in to reply to this topic.

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