Float Like a Butterfly….Errr

floatlabRecently whilst putting a .NET web project to bed we had some reports from the field of some rendering issues with Internet Explorer 7.  Of course we had tested IE 7 using the compatibility modes present within later versions of IE but seemingly this does not throw up many issues that arise in the ‘real’ browser

I know, I know…., in an ideal world we’d all have the latest and greatest browsers but in the real world companies are not so ‘lithe’ when it comes IT infrastructure.

One such issue being reported was along the following lines:-

Our application was divided into a standard navigation-detail model with the navigation part of the equation being a host of controls displayed within an accordion located to the left hand side of the screen and the detail being displayed to the right hand side of the screen in line horizontally with the accordion. This was achieved through the div hosting the ‘Detail’ section having a ‘float:right’ instruction within the css like so:-

.mainPageContainer{
    display: inline-block;
    float: right;
    height: 75%;
    width: 74%;
}
 
This seemed to work without issue throughout the entire development cycle… We targeted the following browsers:-
 
Internet Explorer 8/9/10 (and 7 in compatibility mode!)
Chrome
Firefox
Opera
Safari
 
All seemed to display without issue, it was left to ‘the real’ Internet Explorer 7 to lower the tone…. Instead of rendering the detail directly to the right of the accordion IE 7 rendered the details BELOW and to the right of the accordion. The fix turned out to be very simple though NOT obvious to me although with hindsight I do kind of understand, the issue was css related  but not with my mainPageContainer, rather the issue was with my accordionContainer which was defined thus:-
 
.accordionContainer{
    height:650px;
    min-width:20%;
    width:25%;
    display:inline-block;
}
 
It is not obvious, to me at least, that in order for any items placed to the right of the accordion to float right ‘properly’ the accordion container itself should be explicitly be made to float left (which it seems to do very well itself without instruction!). Thus I made the following bold changes:-
 
.accordionContainer{
    height:650px;
    min-width:20%;
    width:25%;
    display:inline-block;
    float:left;
}

 Voila, now even Internet Explorer 7 can now correctly render our application,

 

 
 
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s