Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder howie2009's Avatar
    Join Date
    May 2009
    Location
    Ireland
    Posts
    204
    Thanks
    37
    Thanked 0 Times in 0 Posts

    IE7 clear both float issue - Help Please!

    Hi,
    In IE7 the image called below aligns above the text instead of to the left of the text. I tried the .clearfix method but no luck. It aligns perfect in IE8 and FF. Any ideas please?

    HTML:
    <div class="colHeadWrapper">
    <div id="img-mid-cols-1"></div><h2>Office Details</h2>
    <div style="clear:both;"></div>
    </div>

    CSS:
    div#img-mid-cols-1{ background-image:url(../images/common/main-mm-sprite.png); width:32px; min-height:40px; background-position:-783px -344px; background-image:url(../images/common/main-mm-sprite.png);
    background-repeat:no-repeat; float:left;}


    I tried:
    <div class="colHeadWrapper">
    <div id="img-mid-cols-1" class="clearfix"></div><h2>Office Details</h2>

    </div>


    with:
    .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

    .clearfix {display: inline-block;} /* for IE/Mac */



    <!--[if IE]>

    .clearfix {
    zoom: 1; /* triggers hasLayout */
    display: block; /* resets display for IE/Win */
    } /* Only IE can see inside the conditional comment
    and read this CSS rule. Don't ever use a normal HTML
    comment inside the CC or it will close prematurely. */

    <![endif]-->


    but no joy.

    THANKS

  • #2
    Regular Coder howie2009's Avatar
    Join Date
    May 2009
    Location
    Ireland
    Posts
    204
    Thanks
    37
    Thanked 0 Times in 0 Posts
    This is my colHeadWrapper class

    div.colHeadWrapper{margin-left: 10px; min-height:46px;}

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    The fact that it works in IE8 but not IE7, combined with the fact that .colHeadWrapper does not have hasLayout set suggests it might be a hasLayout issue. Try:

    Code:
    div.colHeadWrapper{margin-left: 10px; min-height:46px;height:1%}
    This will set hasLayout on .colHeadWrapper.

    If that doesn't fix the problem then a link to your page would help, or failing that your entire code.

  • #4
    Regular Coder howie2009's Avatar
    Join Date
    May 2009
    Location
    Ireland
    Posts
    204
    Thanks
    37
    Thanked 0 Times in 0 Posts
    Hi SB65,
    I tried the below but no joy. Do i need to include clearfix or anything or remove
    <div style="clear:both;"></div>? Thanks a million

    Code I tried:
    CSS
    div.colHeadWrapper{margin-left: 10px; min-height:46px; height:1%}

    HTML
    <div class="colHeadWrapper">
    <div id="img-mid-cols-1"></div><h2>Office Details</h2>
    <div style="clear:both;"></div>
    </div>

    In IE7 it positons as:

    img
    text

    but in IE8 and Firefox it aligns:
    img text

    THANKS

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Can you give a link to your page?

    The clearfix class is clearing a float - which isn't your issue here.

  • #6
    Regular Coder howie2009's Avatar
    Join Date
    May 2009
    Location
    Ireland
    Posts
    204
    Thanks
    37
    Thanked 0 Times in 0 Posts
    Hi,
    Unfortunately is only accessible via a CMS I'm using thats protected. Its a clients site so I cant post it. Clients!

    It definitely seems to be an issue with:

    div.colHeadWrapper{margin-left: 10px; min-height:46px;}

    or

    div#img-mid-cols-1{ background-image:url(../images/common/main-mm-sprite.png); width:32px; min-height:40px; background-position:-783px -344px; background-image:url(../images/common/main-mm-sprite.png);
    background-repeat:no-repeat; float:left;}

    i tried:

    div.colHeadWrapper{margin-left: 10px; min-height:46px; height:1%;}

    I'm testing using:
    HTML
    <div class="colHeadWrapper">
    <div id="img-mid-cols-1"></div><h2>Office Details</h2>
    <div style="clear:both;"></div>
    </div>

    Sorry I cant provide more.

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Ok, well, if I use this test code I don't see the problem in IE7.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    div#img-mid-cols-1{ background-image:url(../images/common/main-mm-sprite.png); width:32px; min-height:40px; background-position:-783px -344px; background-image:url(../images/common/main-mm-sprite.png);
    background-repeat:no-repeat; float:left;}
    div.colHeadWrapper{margin-left: 10px; min-height:46px;}
    </style>
    </head>
    
    <body>
    <div class="colHeadWrapper">
    <div id="img-mid-cols-1"></div><h2>Office Details</h2>
    <div style="clear:both;"></div>
    </div>
    </body>
    </html>
    Even without a doctype IE7 seems to behave itself on this one. Can you post your code?

  • Users who have thanked SB65 for this post:

    howie2009 (08-16-2010)

  • #8
    Regular Coder howie2009's Avatar
    Join Date
    May 2009
    Location
    Ireland
    Posts
    204
    Thanks
    37
    Thanked 0 Times in 0 Posts
    I cant post the code as its a clients. I will try ur fix on another pc with ie7 on it. Thanks for ur help Might be back 2moro!

  • #9
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    No problem - not much of a fix though as I haven't amended your code at all.


  •  

    Posting Permissions

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