Web Tutorial: The Pie Chart, Safari Edition

Safari, Safari, how do I detest thee? Probably not as much as I hate Internet Explorer, but Safari just needs to keep this up and it'll be a really strong contender. That aside, today we'll be revisiting The Pie Chart we did back in January. It never ran on Safari, and we'll fix that today. Before we begin, let's see what the current code produces on Safari.

Holy cow, that won't do at all. The old rounded corner div with overflow trimmed off trick, just doesn't work here.

We're just going to have to overlay the damn thing. First, shift the graph_container div downwards a hundred pixels, like so.

            #graph_container
            {
                height: 400px;
                width: 400px;
                margin: 100px auto 0 auto;
            }

Easy does it...

Now just after the graph_container div, add a div with an id of safari_wrapper. Then put a div inside that with an id of safari_mask.

        <div id="graph_container">
            <div id="label_wrapper">
                <div id="label_quad_wrapper">

                </div>
            </div>

            <div id="pie_container">
                <div id="quad_wrapper_left" class="quad_wrapper">

                </div>

                <div id="quad_wrapper_right" class="quad_wrapper">

                </div>
            </div>
        </div>

        <div id="safari_wrapper">
            <div id="safari_mask">

            </div>
        </div>

        <div id="legend_container">

        </div>

Now we'll style safari_wrapper. It'll go right over graph_container, so it should have the exact height. But we want it to fit the full width of the screen. And since it's an overlay, the position property needs to be set to absolute. We'll generously give it a z-index of 2500 to ensure it goes right over everything. Making sure top and left properties are 0 will place the overlay in the top left corner of the screen.

And then we temporarily set the background color to a translucent orange so you can see what's going on.

            #quad_wrapper_left .pie_quad
            {
                margin-left: 100%;
            }

            #safari_wrapper
            {
                height: 400px;
                width: 100%;
                top: 0px;
                left: 0px;
                position: absolute;
                z-index: 2500;
                background-color: rgba(255,100,0,0.5);
            }

            #label_wrapper
            {
                height: 100%;
                width: 100%;
                margin-right: -100%;
                float: left;
                position: relative;
                z-index: 2000;
            }

Oh wait, it doesn't fit exactly over graph_container. That's because we shifted graph_container downwards by 100 pixels, remember? No biggie. All is going as planned.

Let's style safari_mask next. We give it a lovely cyan border for now. Width and height are the same as graph_container. The margin property has been set to align the div horizontally center of its parent, safari_wrapper. The border-radius property at 50% makes it circular.

            #safari_wrapper
            {
                height: 400px;
                width: 100%;
                top: 0px;
                left: 0px;
                position: absolute;
                z-index: 2500;
                background-color: rgba(255,100,0,0.5);
            }

            #safari_mask
            {
                height: 400px;
                width: 400px;
                margin: 0 auto 0 auto;
                position: relative;
                border-radius: 50%;
                border: 1px solid #00FFFF;
            }

            #label_wrapper
            {
                height: 100%;
                width: 100%;
                margin-right: -100%;
                float: left;
                position: relative;
                z-index: 2000;
            }

You may notice that the circle is a little thin, and it's not aligned with the chart. No problemo.

How much did we adjust graph_container's position by? 100 pixels? Let's give safari_mask a 100 pixel thick border!

            #safari_mask
            {
                height: 400px;
                width: 400px;
                margin: 0 auto 0 auto;
                position: relative;
                border-radius: 50%;
                border: 100px solid #00FFFF;
            }

Now isn't that just all sorts of nice?

Get rid of the background color.

            #safari_wrapper
            {
                height: 400px;
                width: 100%;
                top: 0px;
                left: 0px;
                position: absolute;
                z-index: 2500;
                /*background-color: rgba(255,100,0,0.5);*/
            }

Ah, we're getting there.

Make the border of safari_mask white!

            #safari_mask
            {
                height: 400px;
                width: 400px;
                margin: 0 auto 0 auto;
                position: relative;
                border-radius: 50%;
                border: 100px solid #FFFFFF;
            }

And we're golden!

Cheap tricks!

Yeah I know. This ain't the most elegant solution in the world. What can I say? Fuck Safari.

Now, wasn't that ins-pie-ring? Heh heh.
T___T