0

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>
3
Contributors
2
Replies
8
Views
4 Years
Discussion Span
Last Post by JorgeM
0

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/

Edited by LastMitch: grammer

0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.