Geek asks and answers

How to fix my css floats on IE 6 and 7? Or how can I make it better?

I try to make a list of tasks that I create, and it is difficult for me to solve individual tasks. The main layout consists of the task and the patient’s name on the left, and the date and expired date on the right.

The problem starts when the content on the right overlaps the content on the left. In all browsers except IE 6 and 7, the content on the right just falls below the content on the left, for example.

Title    Date Created
Patient Name
         Date Overdue

In IE 6 and 7, the contents on the left and right are compressed, as if it occupied all the necessary space, even if it is not, for example

Title            Date
              Created
Patient          Date 
Name          Overdue

Has anyone done a similar layout before and tell me how they solved it? Is there a better way to lay this out NOT with floats? Do you hate IE like me?

HTML CSS ( SASS) jsFiddle, .

<li class="task clear-fix">
  <span class="task-title">{title}</span>
  <span class="task-date secondary">{dateCreated}</span>
  <span class="patient-name">{patientName}</span>
  <span class="task-overdue-date">{dateOverdue}</span>
</li>

li.task {
    .task-title,
    .patient-name {
        clear: left;
        float: left;
    }
    .task-date,
    .task-overdue-date {
        clear: right;
        float: right;
    }
}
.clear-fix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clear-fix {
    *zoom: 1; /* IE 6 & 7 only */
}
+3
3

this?

HTML:

<ul>
  <li class="task">
    <div class="line">
      <span class="task-date">Date Created</span>
      <span class="task-title">Task Title</span>
    </div>
    <div class="line">
      <span class="task-due-date overdue">Date Overdue</span>
      <span class="patient-name">Patient Name</span>
    </div>
  </li>
</ul>

CSS

.task {
  border: 1px solid red;
  min-height: 3em;
  width: 200px;
  padding: 0px;
}

.patient-name {
  font-weight: bold;
}

.task .task-date {
  float: right;
}

.line .task-due-date {
  float: right;
}

.task .overdue {
  color: red;
}
+1

?

span {
    white-space: nowrap;
}
+2

This worked in your jsfiddle example.

<div class="task clear-fix">
    <div class="task-title">Title</span>
    <div class="task-date secondary">Date Created</div>
    <div class="patient-name">Patient Name</div>
    <div class="task-overdue-date">Date Overdue</div>
</div>

Also: before and: after do not work in ie 6 or ie 7. Instead, create a clear div for compatibility.

<div class="task clear-fix">
        <div class="task-title">Title</span>
        <div class="task-date secondary">Date Created</div>
        <div class="patient-name">Patient Name</div>
        <div class="task-overdue-date">Date Overdue</div>
    </div>    
<div class="clear"></div>

.clear
{
    clear: both;
}
0
source

More articles:


All Articles