IE & Firefox rendering incorrectly but not in Chrome, Safari & Chromium browsers

Question

All,

There is a double walled circle and a text. Ideally the text should be rendered within the circle but in IE & Firefox , the circle is coming down and the text on the top. The issue can be seen using the below code.

Any help or advice on how to get it fixed in IE & firefox is much appreciated.

 <div class="col-xs-4 col-sm-2"> <div style="margin-top: 20px; position: relative; display: inline-block; max-width: 116px; max-height: 116px;"> <svg width="100%" height="100%" viewBox="0 0 418 418" tabindex="-1"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(-31.000000, -31.000000)" stroke="#9B9B9B" stroke-width="2" fill="#FFFFFF"> <g transform="translate(32, 32)"> <path d="M208,416 C322.875228,416 416,322.875228 416,208 C416,93.124772 322.875228,0 208,0 C93.124772,0 -9.09494702e-13,93.124772 -9.09494702e-13,208 C-9.09494702e-13,322.875228 93.124772,416 208,416 Z"></path> <path d="M208,398.666667 C313.302292,398.666667 398.666667,313.302292 398.666667,208 C398.666667,102.697708 313.302292,17.3333333 208,17.3333333 C102.697708,17.3333333 17.3333333,102.697708 17.3333333,208 C17.3333333,313.302292 102.697708,398.666667 208,398.666667 Z"></path> </g></g></g> </svg> <span style="font-size: 24px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">400</span> </div> </div> 

Answer 1

The styling you have added to the divs pushes the number outside of the SVG. I would just avoid the problem in the first place by using an SVG <text> element that you can position inside the svg.

You might have to fiddle with the x and y values a bit.

ps: There's also a <circle> element you could use instead of a <path> .

 <svg width="100%" height="100%" viewBox="0 0 418 418" tabindex="-1"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(-31.000000, -31.000000)" stroke="#9B9B9B" stroke-width="2" fill="#FFFFFF"> <g transform="translate(32, 32)"> <path d="M208,416 C322.875228,416 416,322.875228 416,208 C416,93.124772 322.875228,0 208,0 C93.124772,0 -9.09494702e-13,93.124772 -9.09494702e-13,208 C-9.09494702e-13,322.875228 93.124772,416 208,416 Z"></path> <path d="M208,398.666667 C313.302292,398.666667 398.666667,313.302292 398.666667,208 C398.666667,102.697708 313.302292,17.3333333 208,17.3333333 C102.697708,17.3333333 17.3333333,102.697708 17.3333333,208 C17.3333333,313.302292 102.697708,398.666667 208,398.666667 Z"></path> </g> </g> </g> <text x="47%" y="49%" style="font-size: 32px;">400</text> </svg> 

Answer 2

I don't know what are your constraints, but to render these circles in particular I'd play with border-radius: 50% and display: flex :

 .circle { border: 2px solid #888; border-radius: 50%; /* make the border a circle */ display: flex; /* align the content vertically and horizontally */ align-items: center; /* same */ justify-content: space-around; /* same */ } 

 <div class="circle" style="width: 100px; height: 100px;"> <div class="circle" style="width: 90px; height: 90px;"> 400 </div> </div>