Text Misalignment in a Flexbox Item

[iwato]

BACKGROUND:  Recently I designed a filler page that is called with AJAX.  When the AJAX call is made a css style sheet is called in addition to the filler.  For the most part the style-sheet appears to work.  Even the styling for the flex-box that is included in the filler works in part.  Simply, it appears to be breaking on inheritance, and I do not know how to override it.

The HTML

<div id='yp_container'>
    <div class='yp_item'>
        <div class='yp_param'>Visitor ID:</div>
        <div id='current_visitorId' class='yp_value'></div>
    </div><!-- end div.line_item -->
    <div class='yp_item'>
        <div class='yp_param'>IP Address:</div>
        <div id='current_visitIp' class='yp_value'></div>
    </div><!-- end div.line_item -->
    <div class='yp_item'>
        <div class='yp_param'>Total Visits:</div>
        <div id='current_totalVisits' class='yp_value'></div>
    </div><!-- end div.line_item -->
    <div class='yp_item'>
        <div class='yp_param'>City:</div>
        <div id='current_cities' class='yp_value'></div>
    </div><!-- end div.line_item -->
    <div class='yp_item'>
        <div class='yp_param'>Referral URL:</div>
        <div id='current_referral_url' class='yp_value'></div>
    </div><!-- end div.line_item -->
</div><!-- end div#yp_container -->

CSS Style-Sheet (Relevant Code Only)

/***************************************************
Visitor Info (Flexbox)
***************************************************/
#yp_container {
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	width:100%;
}

.yp_item {
	display: -webkit-flex;
	display: flex;
	flex-direction: row;
	justiy-content: space-between;
}

.yp_param { 
	text-align: -webkit-right;
	text-align: -moz-right;
	padding-right: 2em;
}

.yp_value { 
	text-align: -webkit-left;
	text-align: -moz-left;
}

 

You may observe the result by clicking on the words Your Profile under the sub-heading User Profile in the Grammar Captive navigation bar.

Roddy

[iwato]

This problem has been resolved with the realization that I was viewing flexbox in MacOS 10.7.5 Firefox and Chrome environments.  Fortunately, I made good use of my frustration and made the CSS code more robust by "overspecifying" the various flex-items.

I do have another question about CSS, but unrelated to this one that I will post in a different entry.

Roddy