IE7 float & clear bug

14 New Member

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

Dec 30 '10 #1

Subscribe Reply

2734

JKing

1,206

Recognized Expert Top Contributor

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

New Member

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

New Member

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

Jan 3 '11 #4

Similar topics

1400

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

7223

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 style="border: 1ps solid red; float: left;">This is my 2nd float</div> <br clear="left">

HTML / CSS

3643

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 realised I need to have clear: left, to keep the headings against the lefthand side, should they come near floats. I can't see how to do this without having to introduce unpleasant extra markup.

HTML / CSS

10294

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 paragraph is showed correctly</p> <table style="width:300px"> <tr><td>This table is not moved downwards in Firefox. </td></tr> <tr><td>IE gets it right.</td></tr>

HTML / CSS

5719

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 http://dochawk.org/sample.html . This was made by stripping out the google ads from the regular pages. It validates as strict 4.01 at http://validator.w3.org. (The google ads drive it nuts!) The main (right) column is made with alternating left and right floats to...

HTML / CSS

1397

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. (use a fixed-width font to view this!) Some short text. +-------+ | | +-------+

HTML / CSS

4867

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 types. First there is some inefficiency in calculations. And then you get data inflation and questionable dependencies - e.g. with pickle,ZODB,mpi's ... : 0.0...

Python

2347

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

2715

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 also am not sure how to make my clear button, clear out all controls on all 3 forms. thanks

Microsoft Access / VBA

8184

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 were to wrap around the float, even better, but that's not necessary. However, I'm continuously running into two issues: 1.) If I make my table 100%, it writes over the float: right for tables where the content text is long enough. 2.) If I...

HTML / CSS

9650

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

10363

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

10110

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

6748

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

5398

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

5534

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

4067

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

3670

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

2894

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General