Question

Hi all and good morning!

The issue I’m having today is with IE7’s rendering (shock, horror) of my work in progress website. Below is some code that is intended to create a page wide <div> that has an image on the left hand side (an arrow) and then 2 lines of text to the right of the image, then a progress bar holder <div> with another <div> inside that will be widened and narrowed to fill the progress bar.

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

Now, what’s the problem you ask? Well the issue is that for some reason, and this has really stumped me, the first of these bar divs (there are 4 in total, all exactly the same as the code above, no changes what so ever) has a massive white space between itself and its border which forces the other 3 bars below to be pushed away.

Here’s the 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;}

This is the visual representation

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

Thanks in advance.

(Sorry for long windedness, just trying to paint a picture)

Answer 1

Remove the float:left property of .div p, and add display:inline-block;. Then, define the clear:both CSS property for the .clearBoth class.

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

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