Formatting circles to be compatible under all browsers

[methuselah90]

What would be the best way of formatting the DIV below so that it works on all browsers (i.e. Google Chrome, Safari, IE, Firefox)?

It currently looks alright in Chrome but does not look very good in Firefox or IE!

I would like the numbers centred in the middle of the circle and the line passing through it.

Here is my code below: http://jsfiddle.net/W8bx9/

CSS

.circle {
    width: 60px;
    height: 60px;
    background-color: #110436;
    color: white;
    border-radius: 30px;
    float: left;
    margin: 10px;
    position: relative;
    top: -8px;
}
.circle_small {
    width: 60px;
    height: 60px;
    background-color: #e1dae8;
    color: white;
    border-radius: 30px;
    float: left;
    margin: 10px;
    position: relative;
    top: -8px;
}
.circle_small h3 {
    position: relative;
    color: white;
    border: none !important;
    text-align: center;
}
.circle h3 {
    position: relative;
    color: white;
    border: none !important;
    text-align: center;
}
#line {
    width: 420px;
    position: relative;
    left: -40px;
    top: -50px;
    border: 1px solid #e1dae8;
    height: 0px;
    color: #330066;
    border-style: dashed;
    z-index: -1;
}
#timeline {
    padding-top: 20px;
    margin-bottom: -10px;
}

HTML

<div id="timeline">
    <div id="r0" class="circle_small">
        <h3>P</h3>
    </div>
    <div id="r1" class="circle">
        <h3>1</h3>
    </div>
    <div id="r2" class="circle_small">
        <h3>2</h3>
    </div>
    <div id="r3" class="circle_small">
        <h3>3</h3>
    </div>
    <div id="r4" class="circle_small">
        <h3>4</h3>
    </div>
    <div id="r5" class="circle_small">
        <h3>A</h3>
    </div>
    <hr id="line">
</div>

[LastMitch]

jeansymolanza

What would be the best way of formatting the DIV below so that it works on all browsers (i.e. Google Chrome, Safari, IE, Firefox)?

I think you need to play around with it. border-radius is hard to adjust all browsers. You have to play around with it because no one really knows how you want the circle to look like except you.

Read this (unless you look and read this before):

http://www.ejhansel.com/css-border-radius-for-modern-browsers-webkit-mozilla-opera-firefox-safari-and-chrome/

[JorgeM]

The native border-radius property is not supported on pre IE version 9. You could try to use vendor prefixes, or just use images if you really didnt want to go with that option.

If you have a website and you have analytics (collecting data about your visitors) take a look and see which browsers are hitting your site so you can make an informed decision about how you want to handle the use of cirlces on your site.

Here is an example of how to use the border-radius property.