CODEWITHSUNDEEP
htmlcsscross-browser
LCJ
LCJ

Reputation: 22652

Float causes unwanted space between lines in IE7

I have multiple lines with style as listed below. The “searchLine” class is used for each line style. This is working fine in IE8, Chrome and Firefox. But in IE7, there is unwanted space in between each line. This unwanted line can be removed when float left is removed.

  1. What is the reason for this unwanted space when float is used?

Note: I know that we can fix it with overflow:auto instead of float:left. But I am trying to understand the reason for this behavior.

Refer http://jsfiddle.net/Lijo/sSnGA/1/ for complete code. 

    .searchLine
    {
        float: left;
        width: auto;
        min-width: 700px;
        height: auto;
        margin: 1px 1px 1px 1px;
        padding: 0 0 0 0px;
        border: 1px solid Cyan;
    }

REFERENCE:

  1. Div behave incorrectly when “<select>” is used; works fine when “<input>” is used

Upvotes: 0

Views: 91

Answers (2)

DeeDub
DeeDub

Reputation: 1662

If you remove the "float:left" from the .searchLine class, the space disappears.

Upvotes: 0

Rob
Rob

Reputation: 15160

min-width does not work properly, and sometimes not at all, in IE7 though I've forgotten the details. You may need to deal with IE's "haslayout" to fix it.

Upvotes: 1

Related Questions