Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Weird hover behavior for webfont

  • This topic is empty.
Viewing 14 posts - 16 through 29 (of 29 total)
  • Author
    Posts
  • #128381
    wragen22
    Member

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

    #128383
    wragen22
    Member

    @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.

    #128391
    Alen
    Participant

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

    #128406
    wragen22
    Member

    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.

    #128409
    Paulie_D
    Member

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

    #128411
    Alen
    Participant

    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.

    #128429
    wragen22
    Member

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

    #128441
    wragen22
    Member

    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?

    #128444
    Paulie_D
    Member

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

    If not then your problem is resolved.

    #128494
    wragen22
    Member

    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 ?

    #128506
    Paulie_D
    Member

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

    #128816
    wragen22
    Member

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

    #128906
    chrisburton
    Participant

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

    #128923
    Paulie_D
    Member

    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 14 posts - 16 through 29 (of 29 total)
  • The forum ‘CSS’ is closed to new topics and replies.