IE6/7 Column Layout CSS Issue

StackOverflow https://stackoverflow.com/questions/15646704

Question

I'm trying to build a header that has 3 columns (fixed - liquid - liquid) in the header section of my ASP.NET MVC4 layout template and I can't quite get things working with IE6+, Chrome, FF, etc.

Specifically I need it to look like

 |--------------------------------------|
 | wrapper                              |
 | |---------| |----------| |---------| |
 | | left    | |   title  | | right   | |
 | |---------| |----------| |---------| |
 |--------------------------------------|

The catch (aside from having to support IE6 and IE7) is that I need some wrapping to occur when the window gets smaller than 500px; to look something like. This wrapping only needs to happen with browsers that can support media queries. (So for IE < 9 it can squish the 'title' in the above example when resizing smaller).

 |--------------------------------------|
 | header-wrapper                       |
 | |---------|              |---------| |
 | | left    |              | right   | |
 | |---------|              |---------| |
 |                                      |
 | |----------------------------------| |
 | |              title               | |
 | |----------------------------------| |
 |--------------------------------------|

Here is the CSS I've got so far

.content-wrapper {
    margin: 0 auto;
    max-width: 1140px;   
}
.header-wrapper {
    text-align: center;
    vertical-align: text-bottom;
}
.header-left-box {
    float: left;
    width: 160px;
}
.header-right-box {
    float: right;
    margin:auto;    
}
.header-center-box {
    min-width: 200px;
    background:none;
    margin:auto;
    width:50%;
    padding: 4px;
}
.site-logo
{
    background-image:url('/Content/images/logo.png');
    background-repeat: no-repeat;
    background-position: top left;    
    display:block;        
    width:130px;
    height:80px;    
    margin-bottom: 5px;
}

And here is the relevant part of the MVC4 template

<header>
    <div class="content-wrapper header-wrapper">
        <div class="header-left-box">
            <div class="site-logo"></div>      
        </div>
        <div class="header-right-box">
            <nav>
                <ul id="menu"><li>Quit</li></ul>
            </nav>               
        </div>                        
        <div class="header-center-box">
            <p>title</p>
        </div>
    </div>
</header>

I'd prefer a solution that leverages CSS and HTML.

Was it helpful?

Solution 2

The code provided in the question works for everything I need, except for IE6 and IE7.

I decided to add the following to my layout to replace the original body tag.

<!--[if IE 6]> <body class="ie6"> <![endif]-->
<!--[if IE 7]> <body class="ie7"> <![endif]-->
<!--[if gt IE 7]><!--> <body> <!--<![endif]-->

With that in place I can use the following styles as an addition to the styles already defined in the question.

.ie6 .header-wrapper,
.ie7 .header-wrapper {
    text-align: center;
    vertical-align: text-bottom;        
    height: 85px;
}

.ie6 .header-left-box,
.ie7 .header-left-box {    
    float: left;
    width: 25%;
    height: 82px;
}

.ie6 .header-right-box,
.ie7 .header-right-box {
    float: right;
    width: 25%;
    height: 82px;
    text-align: right;    
}

.ie6 .header-center-box,
.ie7 .header-center-box {    
    padding: 4px;       
    margin-left: 26.2%;
    margin-right: 26.2%;
    width: 40%;
}

This handles everything I need the columns to do for all browsers, including the column wrapping in IE6 and IE7.

OTHER TIPS

Additional to Jason's answer, as for browser-specific coding or stylesheets, you can use javascript for browsers other than IE.

if (navigator.userAgent.toLowerCase().indexOf('chrome') != -1) {
    document.write('<link rel="stylesheet" type="text/css" href="style-ch.css" media="all" />');
}

Just like <!--[if IE 6]><![endif]-->, this will run some code (in the above example, load a chrome-specific stylesheet) ONLY when the used browser is the specified one.

Of course you can also specify browser versions, like so: .indexOf('chrome 11')

Make sure this code is declared after declaring the regular/cross-brower stylesheet(s), or it might not work.

I can't see why you would bother with optimizing for IE6 and IE7 though, since these are really friggin old. But that's your personal choice of course :)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top