Member Avatar for 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>
  • 3 Contributors
  • 2 Replies
  • 99 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

This layout problem usually comes from positioning hacks (floats + negative top) and putting the dashed line into the normal flow (an hr with z-index:-1). A more robust, cross‑browser approach is to (1) draw the horizontal dashed line as a positioned pseudo‑element on the timeline container and (2) render each circle as an inline element that centers its label with Flexbox (with an inline‑block / line-height fallback for old IE). That avoids stacking surprises and keeps the dashed line visually centered through every circle.

As @jeansymolanza noted, border-radius used to be fiddly; is correct that very old IE had no native support. Today border-radius and basic Flexbox are supported in current browsers — but provide the fallback below if you must support legacy IE8/9.

Example (modern + fallback):

#timeline {
  position: relative;
  padding: 30px 0;
}

#timeline::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  border-top: 2px dashed #e1dae8;
  z-index: 1;
}

.circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #110436;
  color: #fff;
  margin: 0 10px;
  position: relative;
  z-index: 2;
}

/* fallback for very old browsers */
.circle.fallback { display: inline-block; line-height: 60px; text-align: center; }
.circle h3 { margin: 0; }

Quick troubleshooting:

  • Remove default margins from headings (margin:0) — they often shift vertical centering.
  • Don’t use negative z-index on the line; ensure the container is position:relative so pseudo‑element stacking works.
  • If supporting IE8, use image fallbacks or a tool like CSS3 PIE for rounded corners.
  • Test with the actual browsers your analytics show; progressive enhancement is usually acceptable for timelines.

Recommended Answers

All 2 Replies

Member Avatar for Member #949455

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 Member #949455 because: grammer
Member Avatar for 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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.