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
    Join Date
    Dec 2009
    Posts
    108
    Thanks
    22
    Thanked 2 Times in 2 Posts

    floating problem with IE7

    if the layout is designed like this:

    As I've already cleared the left float of that box, when I want to add another element, it SHOULD continue the flow of the content, which is what IE8 & FF behaves. However, there are always bugs in IE7 and lower. So is there any workaround to this problem?

    Thanks in advance.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello mehere8,
    Going to need to see your code to see how you're doing that. A screencap doesn't do much more than explain the output.
    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

  • #3
    Regular Coder
    Join Date
    Dec 2009
    Posts
    108
    Thanks
    22
    Thanked 2 Times in 2 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    #container {
    	height: 600px;
    	width: 600px;
    	border: thin solid black;
    }
    #container #rightBox {
    	margin: 20px;
    	float: right;
    	height: 60px;
    	width: 100px;
    	border: thin solid #000;
    }
    #container #leftBox {
    	margin: 20px;
    	height: 120px;
    	width: 150px;
    	border: thin double #000;
    	float: left;
    }
    -->
    </style>
    </head>
    
    <body>
    <div id="container">
    	<div id="leftBox"></div><div id="leftBox"></div>
        <div id="rightBox"></div>
        <div id="leftBox" style="clear: left"></div><div id="leftBox"></div><div id="leftBox"></div><div id="leftBox"></div>
    </div>
    </body>
    </html>
    something like this

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    The validator shows you some of the problems. See the links about validation in my signature line below.

    You are only allowed to use an id once on a page. Classes can be used multiple times. See id vs. class here.

    You also set a height on #container and that is probably not needed. Instead, use overflow: auto; to clear the floats that element contains. See how overflow: auto; clears floats.

    Try it like this -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    #container {
    	/*height: 600px; */
    	width: 600px;
    	overflow: auto; /*clears floats*/
    	border: thin solid black;
    }
    #container #rightBox {
    	margin: 20px;
    	float: right;
    	height: 60px;
    	width: 100px;
    	border: thin solid #000;
    }
    #container .leftBox {
    	margin: 20px;
    	height: 120px;
    	width: 150px;
    	border: thin double #000;
    	float: left;
    }
    -->
    </style>
    </head>
    
    <body>
        <div id="container">
            <div class="leftBox"></div>
            <div class="leftBox"></div>
            	<div id="rightBox"></div>
            <div class="leftBox" style="clear: left"></div>
            <div class="leftBox"></div>
            <div class="leftBox"></div>
            <div class="leftBox"></div>
        <!--end container--></div>
    </body>
    </html>
    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
    Regular Coder
    Join Date
    Dec 2009
    Posts
    108
    Thanks
    22
    Thanked 2 Times in 2 Posts
    oh mistake by using id for those divs

    the code above still doesn't work in IE7

    the box which should come next to the one with 'clear: left' still goes up and sits on the first line...

    you can toggle IE modes by pressing F12 in IE8 explorer to see the difference of box layout.

    Any help will be appreciated

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Yup, gotta love IE (pick any version).

    It doesn't work until you give #rightBox some margin. I don't know if this will be acceptable but try adding this bit highlighted in red -
    Code:
    #container #rightBox {
    	margin: 20px 20px 80px;	
    	float: right;
    	height: 60px;
    	width: 100px;
    	border: thin solid #000;
    }
    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

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    And just to clarify, that .leftBox is obeying the clear: left; you've put on it.
    Put a background color on it to see, like this -
    Code:
        <div id="container">
            <div class="leftBox"></div>
            <div class="leftBox"></div>
            	<div id="rightBox"></div>
            <div class="leftBox" style="clear: left; background: #f00; "></div>
            <div class="leftBox"></div>
            <div class="leftBox"></div>
            <div class="leftBox"></div>
        <!--end container--></div>
    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
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    This looks like an IE7 bug to me - where a subsequent floated element incorrectly renders higher than an earlier floated element.

    There was a thread here in a similar vein.

  • #9
    Regular Coder
    Join Date
    Dec 2009
    Posts
    108
    Thanks
    22
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Excavator View Post
    Yup, gotta love IE (pick any version).

    It doesn't work until you give #rightBox some margin. I don't know if this will be acceptable but try adding this bit highlighted in red -
    Code:
    #container #rightBox {
    	margin: 20px 20px 80px;	
    	float: right;
    	height: 60px;
    	width: 100px;
    	border: thin solid #000;
    }
    Ha, it seems that the right-floating box is 'large' enough' that subsequent floating box after the left-clearing box is forced to reside right after it, which means that it will display the same result even if the previous box is not cleared left...

    is there any better way to solve this problem?


  •  

    Posting Permissions

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