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 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Float not clearing in IE

    Hi

    I hope someone can help advise.

    I have been working on a site for a while and I thought I had it sorted until I looked at some of the pages in IE and realised that the clear:both does not seem to be clearing.

    I have gone through everything for hours and cannot find where the problem could be. It looks fine in firefox and on the iphone.

    http://nationwideinnovations.co.uk/garage-doors.html

    Thanks in advance for any advice.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Good morning ollyno1uk,
    It looks like you have many elements containing uncleared floats, #also_interested and #product_content for example...there are others as well.

    My preferred method for clearing floats is adding overflow: auto; to the containing elements CSS.
    Like this -
    Code:
    #also_interested {
        background: #FF0000;
        margin: auto;
        overflow: auto;
        padding-top: 25px;
    }
    I use the background color as a demo just to show the floats are cleared.

    See this explanation of how overflow: auto; clears your floats.

    Using overflow this way has the added benefit of showing you when your box model is off. It will make a scroll bar appear if thing do not fit in a container. See the box model here. The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    ollyno1uk (01-07-2012)

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi thanks for helping!

    I was not familiar with this so I will certainly look into it.

    Does this mean I need to apply it just to the outer div that I wish the footer to be beneath not over or do I need it on each element?

    Is the reason it is not currently working because there are some uncleared floats even though they are within a cleared div?

    Thanks again!

    Olly

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by ollyno1uk View Post
    Does this mean I need to apply it just to the outer div that I wish the footer to be beneath not over or do I need it on each element?

    Is the reason it is not currently working because there are some uncleared floats even though they are within a cleared div?

    It kind of sounds like you are under the impression your clear is cascading to child elements and that is not the case. If you have a new div element with floats that is contained in a cleared div, that new one will likely need cleared as well.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ok thanks - makes sense. I think I may have to rewrite the code as tried several options but I cannot achieve it in IE.

    Thanks again

  • #6
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    It is still baffling me.

    I changed the background of #products_text to red to make try and diagnose.

    This is the div that I need the footer to sit beneath. Directly below this div there is a clear:both so surely it should be clearing any floating elements above it, yet the footer still sits over it?

    Help!!!??!!?

    (only in IE)
    Last edited by ollyno1uk; 01-07-2012 at 10:41 PM. Reason: adding note

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    In your style.css you have #products set at height: 50px;
    Remove that setting and see what happens.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ok this is good, at least there is improvement.

    It seems to have solved the issue however the bottom of the "no 1 for..." has now gone, which was why I had that height set.

    ***actually*** I then moved a clear:both to the bottom of the products div which I guess would expand it to the inner divs and it seems to have solved it.

    So was that it? if so I would love to buy you a pint as this has been driving me mad!

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by ollyno1uk View Post

    So was that it? if so I would love to buy you a pint as this has been driving me mad!
    It seems to work in everything I've got. I looked at it in FF10, IE9, IE8 and IE7.
    Good job on the valid code too
    A couple small things in the CSS you might want to look at - http://jigsaw.w3.org/css-validator/v...age-doors.html

    I'll sure let you buy me a pint next time your in Alaska , Thanks!
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks again

    Regarding the css, I know the lightyellow; is not valid but the other CSS comes with 2 x scripts I bought and I am not sure if I can validate them.

    Never the less, I have done the best I can!

    PM me your paypal if you have one - I don't need to be in Alaska to buy you a pint thanks to the wonderful internet!

  • #11
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I have now gone live with this site now and it is pretty much up together however I seem to have an issue with IE6 dropping my right hand column float below the rest - almost like it doesn't have room to sit there.

    Currently about 1% of traffic uses IE6 which is still considerable and certainly not worth losing.

    So any idea how I fix this one?

    http://www.nationwideltd.co.uk/awnings.html


    (apologies if I should have started a new thread)

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by ollyno1uk View Post
    I have now gone live with this site now and it is pretty much up together however I seem to have an issue with IE6 dropping my right hand column float below the rest - almost like it doesn't have room to sit there.

    I get a 404 with that link right now, I'll check it later and see if it's up.
    IE6 has a nasty habit of wrecking floats, there are any number of bugs specific to that browser that can cause what you're seeing.
    There is some help though, check out these websites:


    Or you can do like I've started and just not support a 10yr old browser that was crap when it was new. I add this to some of my sites just to be polite to people that are stuck with that browser:
    Code:
            <!--[if lt IE 7]>
                    <div id="ie6Warning">
                        <h2>Time to upgrade your browser?</h2>
                            <p>
                                If you're reading this, you're surfing using Internet Explorer 6, a 10+ year-old browser that 
                                cannot cope with the demands of the modern internet. For the best web experience, it is strongly recommended 
                                you upgrade to a more modern version of any of the browsers listed here:
                                    <ol>
                                        <li><a href="http://www.getfirefox.com/">Firefox</a></li>
                                        <li><a href="http://www.opera.com/">Opera</a></li> 
                                        <li><a href="http://www.apple.com/safari/">Safari</a></li>
                                        <li><a href="http://www.google.com/chrome">Google Chrome</a></li>
                                        <li>or a more recent version of <a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
                                    </ol>
                                 The layout of this site is designed to work with those browsers. We are reasonably certain that even if the layout is not quite
                                 right in older browsers, the funcionality should still be available to you. Our suggestion of upgrading your browser is only for 
                                 your viewing pleasure and is by no means a requirement for using this website.
                            </p>
                    </div>
          	<![endif]-->
    Here's a bit of CSS that goes with that statement:
    Code:
    #ie6Warning {
    	width: 600px;
    	padding: 25px;
    	background: #f00;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    ollyno1uk (01-13-2012)

  • #13
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for the excellent response once again. I will work my way through the two resources you mentioned. Even if not for now, they will certainly be useful for the future!

    I gave you the wrong link:

    http://www.nationwideltd.co.uk/sun-awnings.html

    I like your idea of not supporting it and if there is not a simple fix, this is the way I will go with this site!


  •  

    Tags for this Thread

    Posting Permissions

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