- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
Viewing 3 posts - 1 through 3 (of 3 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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.
http://codepen.io/Roadrnr/pen/buLxe
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
Jack
This works great. Thank You!