Timeline divs not showing in Safari 5

Question

I have an outer td, with two float:left divs inside. I have a background color for the outer td, and a different color for the inner two divs. It is working as intended on all browsers but Safari. In Safari (for Windows 5.1.7) the inner divs and their contents are not showing up at all.

Here is the relevant HTML & CSS:

.timeline {
    width: 400px;   
    margin: 0 10px;
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
    border-radius: 5px;
    background-color: grey;
    border: 6px solid #191919;
    box-shadow: 2px 2px 2px black;
}
.timeline p {
    text-align: center;
    font-weight: bold;
    color: white;
}
.timeline p:hover {
    color: grey;
    cursor: pointer;
}
.timeline p:hover + b{
    color: red;
}
.tlleft {
    float: left;
    width: 49%;
    height: 520px;
    margin-right: 1%;
    background-color: #191919;
}
.tlleft b {
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 60px;
    position:relative;
    font-size: 50px;
    left: 189px;
    top: -55px;    
}
.tlright {
    float: left;
    width: 50%;
    height: 520px;
    background-color: #191919;
}
.tlright b {
    font-family: Arial, Helvetica, sans-serif;
    position:relative;
    font-size: 50px;
    right: 11px;
    top: -55px;    
}

#timelinextra {
    box-shadow: 6px 6px 6px #191919;
    background-color: black;  
    border-radius: 10px;
    margin-right:-300px;
    visibility: hidden;
    margin-top: 200px;
    position:fixed;
    width: 600px;  
    right:50%;
}
#timelinextra a {
    background-color:darkgrey;
    border-radius:10px;
    text-align:center;
    padding-right:2px;
    display:block;       
    margin:10px;
    float:right;
    width:22px;  
}
#timelinextra a:hover {
    background-color: white;
    cursor: pointer;
    color: black;  
}
#timelinextra p {
    margin: 10px 40px;
    clear:both;  
}

    <table style="margin-right:20px;margin-bottom:20px;">
        <tr>
            <td style="vertical-align:top;">
                <!--More content here-->
            </td>
            <td class="timeline">
                <div class="tlleft">
                    <p>Born</p><b>&bull;</b>
                    <br /><br />
                    <p>College</p><b>&bull;</b>
                    <br /><br />
                    <p>Started Work</p><b>&bull;</b>
                    <p>Still Working</p><b>&bull;</b>                    
                </div>                    
                <div class="tlright">
                    <br /><br /><br /><br />
                    <p>Primary School</p><b>&bull;</b>
                    <p>Masters & Diplomas</p><b>&bull;</b>
                    <p>Coding Again</p><b>&bull;</b>
                    <br /><br />
                    <p>Still Coding</p><b>&bull;</b>
                    <br />
                </div>
            </td>
        </tr>
    </table>

Here is a JSFiddle for those who prefer to check that. The styling is a little off with the above because I have cut out all unnecessary extras. This is the smallest complete workable example I could create that recreates the issue and I am still none the wiser.

Any suggestions for why the inner divs are not showing in Safari 5, or how I could fix it?

Answer 1

Simplifyyyy Mannn!

Floats, an ordered list and a sprinkling of pseudo-elements

Compatibility:

Safari 3.2+ / IE9+ using nth-child and pseudo elements or Safari 3.1+ / IE8+ with classes and pseudo elements.

• A timeline is a great opportunity to use an ordered list (<ol>); it is an ordered sequence of events.

• Create the bullets with :before pseudo-elements on the list items

• Position with left and right floats using nth-child to select odd and even list items. (nth-child is supported in Safari 5)

• The center line is created with a :before pseudo element on the ordered list element

Full Example

I haven't placed in hover events, but you should have no problem creating those.

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  width: 400px;
  border-radius: 5px;
  background-color: #333;
  border: 6px solid #191919;
  box-shadow: 0 0 0 5px black;
  overflow: hidden;
  padding: 20px;
  border: solid 1px #EEE;
}
.timeline:before {
  content: '';
  display: block;
  height: 100%;
  width: 8px;
  background: #FFF;
  position: absolute;
  left: 50%;
  top: 0;
}
.timeline li {
  text-align: center;
  width: 40%;
  color: #FFF;
  cursor: pointer;
}
li:before {
  content: '';
  display: block;
  position: absolute;
  height: 16px;
  width: 16px;
  background: #000;
  border-radius: 50%;
  left: 50%;
  margin-left: -4px;
  transition: background 0.5s;
}
li:hover:before {
  background: #F00;
}
li:nth-child(even) {
  float: right;
  clear: left;
  margin: 20px 0;
}
li:nth-child(odd) {
  float: left;
  clear: right;
  margin: 20px 0 20px;
}

<ol class="timeline">
  <li>Born</li>
  <li>College</li>
  <li>Started Work</li>
  <li>Still Working</li>
  <li>Primary School</li>
  <li>Masters &amp; Diplomas</li>
  <li>Coding Again</li>
  <li>Still Coding</li>
</ol>