Проблема неупорядоченного списка в Google Chrome и IE7 - PullRequest
Новая
       17

Проблема неупорядоченного списка в Google Chrome и IE7

1 голос
/ 16 января 2010

Я в процессе разработки онлайн-резюме, но у меня проблемы с Google Chrome и ie7 с неупорядоченным списком. Несмотря на то, что они хорошо отображаются на боковой панели, по какой-то причине в разделе содержимого первая точка маркера перемещается в крайний правый угол контейнера, текст отображается нормально, а все остальные точки маркера и текст располагаются нормально. Эта ошибка не встречается ни в одном другом браузере.

Вот код и снимок экрана с происходящим. 

<h2>Education</h2>
<div class="education">
    <h3>Institution Name</h3>
    <p class="date">Date 1000<br />~ Date 2000</p>
    <p class="description">Vel augue ac a adipiscing? Facilisis. Dictumst vut rhoncus ut scelerisque, duis mid! Amet ultricies parturient cursus amet? Cum, diam sed platea ultrices in, phasellus augue amet.</p>
    <ul>
        <li><span>Masters of Design</span></li>
        <li><span>fagjfjfhdgsdf</span></li>
        <li><span>Random blabble text</span></li>
    </ul>
    </div>

.education ul{margin-left:120px;}
#sidebar{}
.education ul li,
#sidebar ul li{list-style:square; font-size:18px; line-height:18px;}
.education ul li span,
#sidebar ul li span{font-size:13px; color:#3C3225;}
ul{color:#11c9c7;}

Ошибка изображения в IE7 и Google Chrome

Странно, но это работает в IE6 и IE8, поэтому я немного сбит с толку, так как я кодировал не иначе, чем обычно, а боковая панель ul использует тот же код, что и на рисунке, и выглядит нормально. Кто-нибудь знает, что может быть причиной этого?

1 Ответ

5 голосов
/ 16 января 2010

Добавьте это к вашей таблице стилей: 

ul { clear: left; }

Похоже, что ваши (что я предполагаю p теги) абзацы имеют float: left и указанную явную ширину. Тем не менее, ul все еще пытается удержать абзац слева от себя, и выдает этот странный результат.

...