IE7 and styled label which overrides

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

  •  27-06-2022
  •  | 
  •  

Вопрос

I work on a project and need to be compliant with IE7+. We have some styles who work pretty great but have minor problems with IE7, and the last bug is for labels. The width is forced to 150px and if the label is bigger, it's continue on the next line. However, in IE7, it override on the next bloc. Here is an image :

Bug on IE7

What I want (and it's the result on IE8+ and real navigators) :

wanted result

I extract the problematic css and made an bootstrap :

<!-- DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" -->
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <style type="text/css">
.form_text {
    position:relative;
    clear:both;
    margin:.2em;
    padding-left:150px;
}
.form_text label {
    position:relative;
    *position:absolute;
    float:left;
    width:140px;
    margin:.2em 0 0 -150px;
    text-align:right;
}
    </style>
</head>
<body>
    <p class="form_text">
        <label>My label too long to stay on one line</label><input type="text" />
    </p>
    <p class="form_text">
        <label>A normal label</label> <input type="text" />
    </p>
</body>
</html>

By cutting on the CSS, I found that the problems came from the *position:absolute;, but if I remove it, it does not work either :

Without position absolute

To finish, I know I cant also remove the margin:.2em;, but then the margins are too big.

So, is there any way to correct this ?

If possible, I would like a way without modifying the existing CSS (the one in the demo). But I can add as much as I want.

EDIT

If possible, I would like a solution that does not make me add a class on all too long label.

Это было полезно?

Решение 2

I found a solution, really not perfect but it gives me the wanted result.

First, I reset the blocking CSS attribute :

.form_text label {
    *position:relative;
}

And next, to avoid having IE move my second label, I added an empty div to allow the clear (thanks JQuery) :

$('.form_text').after('<div style="clear:both;font-size:0;height:1px"/>');

I don't realy like this solution since it need JS, however, the :after do not work on IE7 and all the css fix to replace it made the browser hang on my page ...

-- Idea based on the answer of this question : IE7 float right problems

Другие советы

It's not really clear in your OP what you can and can't do with regards to CSS, but I would do something like:

.form_text label { 
    line-height: 0.8; 
}

and / or

.form_text { 
    height: 30px; 
}

Hope this helps.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top