CSS issue: Floating div disappears completely

[shajducko]

Ok, so here's the issue. I wanted a simple quotation box. I created a div container, slapped a div inside of it and floated to the left and then put in my text. Low and behold, IE doesn't render the top border of the container box. So I'm messing around and I put the quotation text into it's own div and now it doesn't render the first floating div at all! The funny thing is, this ALL works if I just float the box to the right instead of the left.

Here's the site:

http://www.phase2.net/boji/

The issue is the central box in the first news post. The relevant CSS is:

.quote {
color: #303138;
padding: 10px 10px 10px 10px;
background-color: #7d8193;
margin: 20px;
border: 1px dashed #5b5d6b;
font-style: italic;
}

.lquotemark {
float: left;
font-size: 5em;
line-height: 1em;
color: #5b5d6b;
width: 30px;
margin-right: 15px;
}

.quotation {
margin-left: 45px;
}

Any help would be appreciated.

[shajducko]

Nevermind, my solution was to change the div containing the quotation text into a p tag. Then I had to set the p tag padding to something greater than the width of the quotation mark. If I tried to do it with margin, it would set the text properly, but would overlap the quotation mark and only show the top half of it.

/sigh. I hate IE.