IE7 float & clear bug

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">Contact:</p>
<a href="tel:123456789" class="phone">123 456 789</a>
<p class="rel">Alternative:</p>
<a href="tel:123456789" class="phone">123 456 789</a>
<p class="rel">E-mail:</p>
<a href="mailto:test@test.com">test@test.com</a>

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

<p class="rel">Registered:</p>
<time>22:15</time>
<time datetime="2010-08-16">August 16.</time>
<p class="rel">Last 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;
}

Dec 30 '10 #1

Subscribe Post Reply

2701

JKing

1,206

Expert 1GB

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

You need to explicitly declare your selector in your CSS.

Expand|Select|Wrap|Line Numbers

 
.box p.rel

{

clear: both;

float: left;

margin-right: 15px;

text-align: right;

width: 100px;

}

Dec 30 '10 #2

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)

Dec 30 '10 #3

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:123456789" class="phone">123 456 789</a>
</div>

<div class="rel">
<p>Alternative:</p>
<a href="tel:123456789" class="phone">123 456 789</a>
</div>

<div class="rel">
<p>E-mail:</p>
<a href="mailto:test@test.com">test@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">Last login:</p>
<time>22:15</time>
<time datetime="2010-08-16">August 16.</time>
</div>

</div>
</body>

</html>

Jan 3 '11 #4

Similar topics

distinction between float & int

by: Ishwor | last post by:

hi all, can anyone tell me why this distinction? i mean why it returns False on floats?? >>> a = 1 >>> b = 1 >>> a is b True >>> a = 1.1 >>> b = 1.1 >>> a is b

Python

IE Bug with CSS float and clear - is there a workaround

by: Urs Martini | last post by:

Hi! I experienced some problems using IE 6 and some kind of css like this: .... text above ... <div style="border: 1ps solid blue; float: left;">This is my 1st float</div> <div...

HTML / CSS

Shrink wrap header background & clearing floats

by: Michael Rozdoba | last post by:

I want to set a background colour on one level of headings, but have their width span only the text & a small amount of padding. I was styling display to inline to achieve this. Then I...

HTML / CSS

Possible Firefox bug: float:right and tables

by: Jesper Rønn-Jensen | last post by:

Hope you can help me out on this one. I have a a box that is floated right. Below (in the normal float) I have a wide table. <body> <div style="float:right; width:200px">...</div> <p>This...

HTML / CSS

A different IE float bug: text flows under right images only

by: Dr. Richard E. Hawkins | last post by:

I've googled around, and asked everyone I know, but I still can't find any reference to anyone else having faced this particular IE bug with floats. I've put a page at...

HTML / CSS

Problem aligning with float and clear

by: Paul E Collins | last post by:

Hello. I want to display a number of individual blocks of text. Each block has an associated image, which should be displayed on the right and aligned with the top of its block of text, i.e....

HTML / CSS

numpy magic: cast scalar returns auto to python types float & int?

by: robert | last post by:

Turning algs for old NumPy modules into numpy code I suffer from this: Upon further processing of returns of numpy calculations, lots of data in an apps object tree will become elementary numpy...

Python

Clear issue

by: shapper | last post by:

Hello, Consider the following design: <div id="container"> <div id="A" class="A"></div> <div id="B" class="B"></div> </div> And the CSS classes:

HTML / CSS

How to make cmd buttons (undo & clear) work on subforms

by: imrosie | last post by:

Hello anyone, Is there someone that has a routine to do this? On the Main form I have cmd buttons that clear and undo.. Specifically the Undo doesn't undo the subforms, just the Main form. I...

Microsoft Access / VBA

CSS Float & Table Won't Play Nicely

by: shannona | last post by:

I've been banging my head against an interaction between a table and float element. I want the two of them to together take up 100% of the width of their container. If the table cells' content...

HTML / CSS

Wordpress or something else?

by: Faith0G | last post by:

I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

Content Management Systems

Access Europe: Command bars, the Access Shortcut Tool and a simple Audit Log - Wed 3 April

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

General

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware