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

Home Forums CSS [Solved] Circle Navigation with vertically aligned text (IE7)

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #183757

    I’m looking for a little assistance with this problem I’ve been fighting for several days now. I have a project that will be using circles of many sizes for navigation purposes. Therefore, I’ve setup image sprites and used them as the background of a elements within a div. Some of the circles will overlap and others will be standalone. The real catch here is making it work in IE7 which is a requirement due to a corporate intranet restriction.

    I’ve tried the vertical align code I’ve found on this site but so far I have not been able to make it work in IE7 like I need. I’m trying to keep this as simple as possible and reusable.

    Any help is appreciated! Thanks in advance.


    vertical-align only works on inline or inline-block elements AFAIK.

    This Pen works in IE7 tested with ‘IE Tester’.

    I would rename .circlecontainer to .circle and .circle to something like .circleContent Since the circle background is actually applied to the outer wrapper.

    In reality you could remove the inner div and just position the a‘s also.

    To use z-index then you need to set a position property (e.g position: relative;).

    Maybe to make this more reusable to could use a display: table; hack inside the .circlecontainer div so that text of variable size and length would always be centred but I’ll let you figure that one out.

    Hope this helps



    This works great. Thank You!

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.