...

View Full Version : floating problem with IE7



mehere8
02-23-2011, 04:39 PM
if the layout is designed like this:
http://dl.dropbox.com/u/21587269/xx.png
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.

Excavator
02-23-2011, 05:13 PM
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.

mehere8
02-25-2011, 05:03 PM
<!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

Excavator
02-25-2011, 05:50 PM
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 (http://www.tizag.com/cssT/cssid.php).

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 (http://www.quirksmode.org/css/clearing.html).

Try it like this -
<!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>

mehere8
02-26-2011, 08:09 AM
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 :)

Excavator
02-26-2011, 03:47 PM
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 -

#container #rightBox {
margin: 20px 20px 80px;
float: right;
height: 60px;
width: 100px;
border: thin solid #000;
}

Excavator
02-26-2011, 03:50 PM
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 -

<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>

SB65
02-26-2011, 04:12 PM
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 (http://www.codingforums.com/showthread.php?t=162916) in a similar vein.

mehere8
02-27-2011, 07:46 AM
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 -

#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?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum