IE7 Wierd проблема с пробелами - PullRequest
Новая
       18

IE7 Wierd проблема с пробелами

0 голосов
/ 20 октября 2011

Привет всем и доброе утро!

Проблема, с которой я столкнулся сегодня, связана с отображением в IE7 (шок, ужас) моего сайта, находящегося в процессе разработки. Ниже приведен код, предназначенный для создания страницы шириной <div> с изображением слева (стрелка), а затем с двумя строками текста справа от изображения, затем держателем индикатора выполнения <div> с еще одна <div> внутри, которая будет расширена и сужена, чтобы заполнить индикатор выполнения. 

<div class="courseItem">
            <img src="images/courses-arrow.jpg" width="41" height="41" alt="->" />
            <p><span class="title">Intermediate Microsoft Excel 2010</span><br />
            <strong>Last accessed:</strong> 21st September 2011</p>
            <div class="courseProgress">
                <div class="progressContainer">
                    <div class="progressFill" style="width: 60px">
                    </div>
                </div>
                <p>50%</p>
            </div>
            <div class="clearBoth"></div>
        </div>

Теперь, в чем проблема, которую вы спрашиваете? Ну, проблема в том, что по какой-то причине, и это действительно озадачило меня, первый из этих барных делителей (всего их 4, все точно так же, как в приведенном выше коде, без изменений, что когда-либо) имеет большой пробел сам и его граница, которая заставляет другие 3 бара внизу отталкиваться.

Вот CSS; 

.courseItem {
margin: 0px 0px 15px 0px;
border-bottom: 1px solid #b0dff7;}

.courseItem img {
float: left;
margin: 0px 20px 15px 0px;}

.courseItem p {
font-size: 11px;
color: #999999;
margin: 5px 0px 0px 0px;
padding: 0;
float: left;}

.courseItem p span.title {
margin: 0;
padding: 0;
font-weight: bold;
font-size: 12px;
color: #00154d}

.courseItem .courseProgress {
float: right;}

 .courseItem .courseProgress p {
width: 50px;
font-size: 20px;
color: #52b9ed;
margin: 7px 0px 0px 10px;}

 .courseItem .courseProgress .progressContainer {
margin: 15px 0px 0px 0px;
padding: 0;
width: 120px;
height: 12px;
background: url(../images/courses-empytprogress.jpg) no-repeat;
float: left;}

.courseItem .courseProgress .progressContainer .progressFill {
margin: 1px 0px 0px 0px;
height: 10px;
max-width: 120px;
background: url(../images/courses-fillprogress.jpg) repeat-x;
float: left;}

Это визуальное представление

http://img1.uploadscreenshot.com/images/orig/10/29204251178-orig.jpg

Заранее спасибо.

(извините за длинную затяжку, просто пытаюсь нарисовать картинку)

Ответы [ 2 ]

0 голосов
/ 20 октября 2011

Удалите свойство float:left .div p и добавьте display:inline-block;.Затем определите CSS-свойство clear:both для класса .clearBoth.

Fiddle: http://jsfiddle.net/Jqhe8/

Фиксированный CSS: 

.courseItem p {
    font-size: 11px;
    color: #999999;
    margin: 5px 0px 0px 0px;
    padding: 0;
    display: inline-block; /*Removed float, added display*/
}
.clearBoth { /*Define clear:both!!!*/
    clear: both;
}
0 голосов
/ 20 октября 2011

В вашем коде вы не очистили его parent div, а .clear class так не работает;первый clear parent div, потому что child div's содержит float.Напишите так 

.courseItem {
    border-bottom: 1px solid #B0DFF7;
    margin: 0 0 15px;
    overflow: hidden;
}
...