CODEWITHSUNDEEP
css
jean-pierre A
jean-pierre A

Reputation: 1

alternative for css float and clear with ie7

I have a page with this elements:

<body>
    <div class="C2">
        <div class="Ban">
            <div class="blockWithLabel position BankCode">
                <span>BankCode</span>
                <br />
                <input type="text"/>
            </div>
            <div class="blockWithLabel position BranchCode">
                <span>BranchCode</span>
                <br />
                <input type="text" style="width:500px"/>
            </div>
            <div class="blockWithLabel position AccountNumber">
                <span>AccountNumber</span>
                <br />
                <input type="text"/>
            </div>
            <div class="blockWithLabel position CheckDigits">
                <span>CheckDigits</span>
                <br />
                <input type="text"/>
            </div>
            <div class="blockWithLabel position BankName">
                <span>BankName</span>
                <br />
                <input type="text"/>
            </div>
            <div class="position validator">
                <div class="validator">VALIDATOR</div>
            </div>
        </div>
    </div>
</body>

I want to apply this style:

        .Ban { overflow:hidden }
    div.blockWithLabel { display:inline-table; overflow:none; }

    .C2 { background-color: blue; }
    .C2 div.blockWithLabel { background-color:yellow; margin:2px;}
    .C2 div.position { float:left}

With all browsers, I have (if the width of the screen is enough big) 6 elements in the same line

Now, I want to make breaks using

.C2 div.position.AccountNumber, .C2 div.position.validator { clear:left }

The problem is that with IE7, AccountNumber appears in a new line, but the next elements CheckDigit and BankName doesn't appear in the same line but in the previous !!

How can I fix it ?

Upvotes: 0

Views: 273

Answers (1)

Tschallacka
Tschallacka

Reputation: 28722

use conditional comments for IE7

<!--[if lte IE 7]>
<style type="text/css">
    /* hide other layout for other browsers by 
       setting display to none 
    */
    .C2 {
        display:none;
    }
</style>
Use ie7 formatting here with tables instead of divs.
<table>
    <TR>
        <T...................
<![endif]-->

Upvotes: 1

Related Questions