Search code examples
cssimagealignmentvertical-alignment

CSS image alignment difference between firefox and chrome

I can't get my images to align correctly between all browsers:

enter image description here

I'm wondering if it's a border issue?

Question: would the best way to resolve this be to create a media query? Right now I sort of try to find a good middle ground, but when viewed on a safari mobile app, those few pixels make a big difference. Or is there a better way to contain the image between the .mnhouse, .mnsenate, .ushouse, .ussenate1, .ussenate2 divs?

Here is my relevant HTML: 

<div id="officials">                 
            <div class='mnhouse'>                       
                    <div class="membersublist">
                         <div class="memberLink"><span id="mnhouselink">Show District <i class="fa fa-external-link-square"></i></span></div>       
                        <div id='housemember' class='lcc_gis_member'></div>
                        <div id='housedistrict' class='lcc_gis_memberdistrict'></div>
                    </div>
                    <img id='housephoto' class='mnhouse_img' src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="0" height="0" alt=""/>

            </div>
            <div class='mnsenate'>                      
                    <div class="membersublist">
                        <div class="memberLink"><span id="mnsenlink">Show District <i class="fa fa-external-link-square"></i></span></div>
                        <div id='senatemember' class='lcc_gis_member'></div>
                        <div id='senatedistrict' class='lcc_gis_memberdistrict'></div>
                    </div>
                    <img id='senatephoto' class='mnsenate_img' src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="0" height="0" alt=""/>                   
            </div>
</div>

And here is my relevant CSS:

#officials img {
    height: 100%;
    min-height: 87px;
    max-width: 65%;
    position: relative;
    top: -56px;
    border:none;
}

.membersublist{
    margin-top:15px;
}
.mnhouse, .mnsenate, .ushouse, .ussenate1, .ussenate2 {
    height:87px;
    background-color: #e6e6e6;
    border-top: 1px solid #a7a5a6;
    border-right: 1px solid #a7a5a6;
    border-bottom: 1px solid #a7a5a6;
    border-left: 3px solid #a7a5a6;
}

Here is the demo, in case I miss any relevant code (you need to select a point on the map to open the results).

Solution

  • The issue is your use of negative relative positioning to try to line it up.

    #officials img {
    ...
    position: relative;
    top: -56px;
    ...
}

    Basically you are positioning it relative to the offset created be the text, which can never be counted upon to be 100% consistent across browsers.

    Instead, consider adding positioning to .mnhouse wrapper, and then using absolute positioning to position the images.

    .mnhouse {
    position: relative;
}

#officials img {
    height: 100%;
    min-height: 87px;
    max-width: 65%;
    position: absolute;
    top: 0;
    border:none;
}