IE7 float & clear bug

[damir]

Below is the HTML and CSS. What I can't manage it is to make IE7 to display it right. Here is also the link how it looks in any other browser and in IE7.

Please help me out!

/* HTML */

<div class="box">

<p class="rel">Con tact:</p>
<a href="tel:12345 6789" class="phone">1 23 456 789</a>
<p class="rel">Alt ernative:</p>
<a href="tel:12345 6789" class="phone">1 23 456 789</a>
<p class="rel">E-mail:</p>
<a href="mailto:te st@test.com">te st@test.com</a>

</div>
<div class="box">

<p class="rel">Reg istered:</p>
<time>22:15</time>
<time datetime="2010-08-16">August 16.</time>
<p class="rel">Las t login:</p>
<time>22:15</time>
<time datetime="2010-08-16">August 16.</time>

</div>

/* CSS */

.box
{
border-top: 1px solid #D9D9D9;
clear: both;
overflow: hidden;
padding: 20px;
}

.box p,
.box a
{
display: block;
float: left;
}

.rel
{
clear: both;
float: left;
margin-right: 15px;
text-align: right;
width: 100px;
}

[JKing]

The .rel class isn't being applied in IE7.

You need to explicitly declare your selector in your CSS.

.box p.rel
{
clear: both;
float: left;
margin-right: 15px;
text-align: right;
width: 100px;
}

[damir]

It's not helping. It is declared, but the clear style clears only the .rel elements, it doesn't affect the elements after them (the one that have float left declared)

[hellodipak]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="pt">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<title>Dipak</title>

<style type="text/css" media="screen">

.box{
border-top: 1px solid #D9D9D9;
/*clear: both;
overflow: hidden;*/
padding: 20px;
}

.box p, .box a{
display: inline-block;
float: left;
margin:0;
padding:0;
}

.rel{
clear: both;
/*float: left;*/
overflow: hidden;
margin-right: 15px;
text-align: right;
width: 400px;
}

</style>

</head>

<body>

<div class="box">

<div class="rel">
<p>Contact:</p>
<a href="tel:12345 6789" class="phone">1 23 456 789</a>
</div>

<div class="rel">
<p>Alternative: </p>
<a href="tel:12345 6789" class="phone">1 23 456 789</a>
</div>

<div class="rel">
<p>E-mail:</p>
<a href="mailto:te st@test.com">te st@test.com</a>
</div>

</div>
<div class="box">
<div class="rel">
<p>Registered :</p>
<time>22:15</time>
<time datetime="2010-08-16">August 16.</time>

</div>

<div class="rel">
<p class="rel">Las t login:</p>
<time>22:15</time>
<time datetime="2010-08-16">August 16.</time>
</div>

</div>
</body>

</html>