SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,296
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Hi Julio. Welcome to SitePoint!

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

    Code:
    .vcard dd {
       float: left;
       margin: 0.5em 0px 0px;
       clear: right;
    }

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,471
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    .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. #4
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 :-)

    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. #5
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I forgot to add the name and url for the new css file:

    demo.qualityfollowup.com/css/cheers_ie.css

    Julio

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,296
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    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

    Code:
    <!--[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]-->
    <link rel="stylesheet" href="http://demo.qualityfollowup.com/css/global.css" type="text/css" media="screen, projection"/>

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

    Code:
    <link rel="stylesheet" href="http://demo.qualityfollowup.com/css/global.css" type="text/css" media="screen, projection"/>
    <!--[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. #7
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #9
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #10
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, well.

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

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,471
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    HI,

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

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

    Code:
    /* ---------------------
          Cheers for IE
       --------------------- */
    .vcard dd {
      float: none;
      margin-left: 120px;
        display:block;
    }
    I've tested this locally and it is working in IE6 although you may need to tweak the margins slightly.

  12. #12
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

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

    Thank you again,

    Julio

  13. #13
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,711
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    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
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •