Incorrect floating to the top of container -- IE6 and 7

HTML & CSS
1

I have a definition list where I floated all its elements to the left. I cleared the left hand side of the definition terms in order to form rows; definitions are floated left and they should align vertically with the definition terms. They work as expected in Firefox and Chrome.

IE6 and at least one of the IE7 versions I tested move the floated definitions all the way up to the top of the definition list, completely breaking the effect.

I put an example of the problem at: demo.qualityfollowup.com/example.html (sorry; this is my first post so no links for me).

Note that I am using Blueprint and a CSS file I wrote myself; it seems the problem lies within my file. It is at demo.qualityfollowup.com/css/global.css

Thank you and best regards,

Julio

2

Hi Julio. Welcome to SitePoint!

This may not help, but have you tried adding clear: right to the <dd>s? E.g.

.vcard dd {
   float: left;
   margin: 0.5em 0px 0px;
   [COLOR="Red"]clear: right;[/COLOR]
}
3

You would need to set the dd to non floated because IE will always try stack the floats even if you have cleared a previous one.

e.g.


.vcard dd{float:none;margin-left:120px;}

Put that in the IE stylesheet (which should be addressed to ie7 and under in the Conditional comment. lte IE7)

4

Hello Ralph,

Thank you for the warm welcome. I did try adding the clear: right but it did not work. I also tried tripping the ‘haslayout’ property by using zoom: 1 in the dl. That’s why I posted at 3:22am :slight_smile:

Paul,

I have added a new css file with your suggestion but I still have the same problem. I am searching more bugs regarding IE and floated elements; I hope to find something. I think your suggestion is in the right track.

Julio

5

I forgot to add the name and url for the new css file:

demo.qualityfollowup.com/css/cheers_ie.css

Julio

6

Paul’s an expert at this stuff, Julio, so I’m sure his solution is the right one. Your mistake is to put the global.css after your IE reset sheets. The stylesheet that comes last prevails where there is any duplication.

Currently you have

<!--[if IE]><link rel="stylesheet" href="http://demo.qualityfollowup.com/css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
<!--[if lte IE 7]><link rel="stylesheet" href="http://demo.qualityfollowup.com/css/cheers_ie.css" type="text/css" media="screen, projection"><![endif]-->
[COLOR="Red"]<link rel="stylesheet" href="http://demo.qualityfollowup.com/css/global.css" type="text/css" media="screen, projection"/>[/COLOR]

Reverse that order and you’ll probably see the difference. E.g.

[COLOR="Red"]<link rel="stylesheet" href="http://demo.qualityfollowup.com/css/global.css" type="text/css" media="screen, projection"/>[/COLOR]
<!--[if IE]><link rel="stylesheet" href="http://demo.qualityfollowup.com/css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
<!--[if lte IE 7]><link rel="stylesheet" href="http://demo.qualityfollowup.com/css/cheers_ie.css" type="text/css" media="screen, projection"><![endif]-->
7

Hi Ralph,

Thank you for spotting the mistake on the ordering of CSS files linking. It did changed stuff, but I still has some misplaced elements. See the screenshot:

Regards

Julio

8

You can see that the dt and dd are misaligned; also, when the width of a dd is short, the following dd is rendered in the same row.

I tried adding a large right margin to push the following element to the next row but this did not work and moved the dd to a row on their own.

Do you think this situation has a solution or should I start looking for a different way of laying out my page? :-S

9

Ralph, Paul:

First of all thank you both for your time and help.

I have changed the cheers_ie.css file to implement a different layout. However, the example file with the proposed fix is still at http://demo.qualityfollowup.com/example.html; the css file is now at http://demo.qualityfollowup.com/css/example_ie.css. The screenshot in the previous post is using this file.

This is the original design in Firefox:

This is the new design, which only applies to IE6 and IE7:

10

Oh, well.

The example file is at http://demo.qualityfollowup.com/example.html (without the semi-colon).

11

HI,

You must have added the display:inline after I saw the last version :slight_smile:

You need to set the vcard dd to display:block.


/* ---------------------
      Cheers for IE
   --------------------- */
.vcard dd {
  float: none;
  margin-left: 120px;
[B]    display:block;[/B]
}

I’ve tested this locally and it is working in IE6 although you may need to tweak the margins slightly.

12

Hi Paul,

I will test this change tonight. It’s exiting that it works for you.

Thank you again,

Julio

13

Hello Paul, Ralph:

I made the last change suggested by Paul and it works!

I took out the display: inline from the global css file (as opposed to the IE specific css file) because that was intended as a trick to make IE work correctly. I will leave the display: block declaration in the IE specific file anyway, as it does not hurt. When I said float: left in the global file, display: inline was set to be ignored according to the CSS rules.

A big THANK YOU for your kind help and patience!

14

Yes by rules of the CSS specs a floated element ignores the display type. However Paul gave you float:none; so basically you didn’t have it floated anymore and thus the display type matters :slight_smile: