Forum | Bryan Hadaway's Web + Tech Blog

1. 

   steven
   Member

   Currently my website uses an image map to get around the hover state for a circle.

   I'm attempting to re-create my website without an image map and use CSS3 circles. This works nicely on Firefox but on Safari and Chrome (haven't tested with IE yet) it doesn't quite work right. As you begin to mouse over a CSS3 circle, if coming in from a 'corner' the hover state fires like it were a square. I only want the hover state to fire when the mouse is actually over the circle. Firefox does this but the others don't.

   Does anyone have any suggestions?

   Here's my testing site for CSS3 circles: http://www.StevenHeld.com/test
   and current site using image maps: http://www.StevenHeld.com

   Posted 6 months ago #
2. 

   Bryan Hadaway
   Bryan Hadaway

   Hi steven,

   Before we go further I actually have a pretty extensive article I've written on CSS circles here:

   http://bryanhadaway.com/how-to-create-circles-with-css/

   You might want to check that out and try updating your code. IE is notoriously an all around bad browser. Very slow to keep up with other browsers especially with CSS3 support.

   So officially, CSS circles do not work in IE. Another reader shared a possible workaround for IE here:

   http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

   Thanks, Bryan

   Bryan Hadaway: Web & Graphic Designer
   Design: http://calmestghost.com/ | Blog: http://bryanhadaway.com/

   Posted 6 months ago #
3. 

   steven
   Member

   I did read your article -that's how I thought you'd be a good one to ask. But it looks like your circles do the same 'square' state on hover. I was just wondering if I could solve that since my design doesn't suite a 'square' hover state very well.

   I added a testing circle surrounded by a dotted line to emphasize my issue, here - http://www.StevenHeld.com/test

   Posted 6 months ago #
4. 

   Bryan Hadaway
   Bryan Hadaway

   Hi steven,

   My code should work fine in all the latest versions of standards-compliant browsers.

   What exact browser version are you having the problem with and on what operating system?

   Thanks, Bryan

   Posted 6 months ago #
5. 

   steven
   Member

   Mac OSx 10.6.8

   Firefox: 6.0 (works great)
   Safari: 5.1.1 (square hover state)
   Chrome: 15.0.874.120 (square hover state)

   Thanks for your help. I'm a designer and not much of a developer. Although, I know more than most designers.

   Posted 6 months ago #
6. 

   Bryan Hadaway
   Bryan Hadaway

   Hi steven,

   I've tested my code and it actually works in the latest versions of all the major browsers including IE (at least for Windows).

   Try updating to the latest browser versions and check again. Latest stable versions as of Nov 10, 2011:

   - Firefox 8

   - Chrome 15

   - Safari 5

   - Internet Explorer 9

   Now just to double check, you've visited http://bryanhadaway.com/how-to-create-circles-with-css/ recently (I have made some updates to the code) and this is where the hover state is square or do you mean on your own site this is occurring?

   If the latter, can I get a link?

   I don't see why just because you're on Mac it would be all that different?

   I'll be happy to keep at it until we get it resolved so don't give up.

   Thanks, Bryan

   Posted 6 months ago #
7. 

   Bryan Hadaway
   Bryan Hadaway

   UPDATE: Okay, I checked out http://www.stevenheld.com/test/ and I see it isn't fully working like my examples in my article.

   You're absolutely welcome to copy the code I've shared and use it/update it for your use.

   Thanks, Bryan

   Posted 6 months ago #
8. 

   steven
   Member

   I will certainly pull out my code and try yours. I'm sure the current code on my site has a lot of unnecessary elements from when I was trying to get the hover state to work.

   I'll let you know how that goes. I'm at work now so it'll be later tonight.

   Thanks for looking into this. You rock.

   Posted 6 months ago #
9. 

   steven
   Member

   After testing out your code, I still get the same problem on Safari and Chrome on the Mac and even on the PC. You said you were able to get Safari and Chrome to behave correctly on your end with hover states over circles but I couldn't reproduce that. I checked to make sure the browsers were up to date.

   It seems to be an issue with only those browsers. I'm glad to see that the latest IE actually behaves correctly but I was really hoping to have Safari behave correctly. Since, many other designers in my field are using macs and that browser.

   At this time, I think I'll just wait to update my code and continue to use an image map until css3 border radius has consistent results in all major browsers.

   Unless you have any other ideas I could try?

   Thanks,
   Steven

   Posted 6 months ago #
10. 

    Bryan Hadaway
    Bryan Hadaway

    Hi steven,

    To be clear, testing the code on your own site is where you're having hover state issues? Have you viewed my article in all browsers? If you haven't please do so.

    Perhaps there is conflicting code on your site causing havoc? Do you check your code for errors?

    HTML Validator: http://validator.w3.org/
    CSS Validator: http://jigsaw.w3.org/css-validator/

    Also, if you don't use Firebug, I highly recommend it:

    http://tidythemes.com/want-to-learn-css/

    (or perhaps you're already using the native Safari code inspector)

    I'm definitely willing to spend as much time on this as long as you're willing cause this is a head scratcher and I definitely want to get to the bottom of it.

    Thanks, Bryan

    Posted 6 months ago #
11. 

    steven
    Member

    Thanks for wanting to look into this further.

    I get the problem on your site as well as mine using Safari or Chrome.

    Problem: The hover state fires when the mouse is over the 'square' of where the css3 circle would be if border radius wasn't applied to create the circle.

    On firefox and IE9 the hover state fires when the mouse is over the circle area only. This is the behavior I am looking for. BUT on Safari and Chrome, the hover state fires within the 'square'

    This problem can be seen more clearly when the css3 circle is much larger. Try 400px or more.

    I've created a css3 large circle with hover state on a testing page here: http://www.StevenHeld.com/test It uses your code.

    Posted 6 months ago #
12. 

    Bryan Hadaway
    Bryan Hadaway

    Hi steven,

    Thank you for clarifying. So, on hover state the circles don't actually become squares, that square area just activates the hover state. Okay, I understand now. I was stuck on that it made it visually a square because that's what your code was doing in an original test I did.

    Okay, phew! Haha, I thought I was going crazy. Unless, you're doing something really creative or precise where your circles are really close or overlapping or something like that I think it's absolutely negligible and you should use it over bloated JS hotspots.

    Thanks, Bryan

    Posted 6 months ago #

RSS feed for this topic

Reply

You must log in to post.