Google Chrome and IE7 Unordered List problem

Question

I'm in the process of designing an online resumé, but am having problems in google chrome, and ie7 with an unordered list. While they render fine in the sidebar, for some reason in the content section, the first bullet point, floats to the far right of its container, with the text displaying fine, and all other bullet points and text positioning themselves fine. This bug doesn't happen in any other major browsers.

Here is the code, and a screen shot of what's happening.

<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;}

Bug Images in IE7, and Google Chrome

Weirdly it works in IE6 and IE8, so I'm rather confused as I've coded no differently than I normally would, and the sidebar ul's using the same code as shown render fine. Does anyone know what could be causing this?

Answer 1

Add this to your stylesheet:

ul { clear: left; }

It seems your (what I assume are p tags) paragraphs have a float: left and an explicit width specified. However, the ul is still attempting to keep the paragraph to its left, and producing that strange result.