phpknight Posted March 5, 2008 Share Posted March 5, 2008 Hi, I realized that when you have floating content in a div that you have to make a clear: both div to get the spacing to work correctly. For this example, let's say the background color of the main div is red and the background color of the floating div is gray. Here is what I want (while using one div within another): A red box with a gray bottom. Here is what I get in FireFox: Exactly what I want! Here is what I get in IE 7: Under the gray box, I get another red line as if IE inserts a <p> tag for the clear:both div. Is this normal IE, buggy behaviour for this sort of this, or should I expect it to look the same in both browsers? Quote Link to comment Share on other sites More sharing options...
michaelsmyth88 Posted March 11, 2008 Share Posted March 11, 2008 it is important that you specify all the dimesnions exaclty as you want them, height and width for IE to display elements correctly. Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted March 11, 2008 Share Posted March 11, 2008 This is the infamous "HasLayout" issue in IE (which will FINALLY be resolved in IE8). You need these two nasty little hacks in your css as follow (for your floated div let's use #floated_div): /* for ie6 use height of one percent */ * html #floated_div {height:1%} /* for ie7 use min-height of one pixel */ *:first-child + html #floated_div {min-height:1px} However, this only works for non-quirks mode pages (must have a doctype). It works superbly with the "clearfix after" technique. /* add this to the bottom of your css - of course replacing "#floated_div" with the id or class you want to clear. No extra divs or markup code is needed ... this will auto clear your floated element. */ #floated_div:after { content: "."; display: block; height: 0; margin:0; padding:0; clear: both; visibility: hidden; } /* for ie6 use height of one percent */ * html #floated_div {height:1%} /* for ie7 use min-height of one pixel */ *:first-child + html #floated_div {min-height:1px} This is the preferred method of float clearing by most professionals. The pseudo class of ":after" Quote Link to comment Share on other sites More sharing options...
phpknight Posted March 11, 2008 Author Share Posted March 11, 2008 Oh, well if it is fixed in IE8, then I'll just wait for it, lol! It is not worth that much trouble. It looks okay, but I just wanted to get rid of it if I could. Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted March 12, 2008 Share Posted March 12, 2008 Oh, come on! Don't be such a baby. LOL! How much trouble could it be?? Once you start using this technique, your floats will work in all browsers (including IE5.3 for mac!). Here is the original "clearfix" technique, it is worth bookmarking: http://www.positioniseverything.net/easyclearing.html The technique I posted is a modified version (without extra classes or empty div holders in the markup). Quote Link to comment Share on other sites More sharing options...
haku Posted March 12, 2008 Share Posted March 12, 2008 Besides, even if IE8 shows it properly, a huge number of people will still be using IE6 and IE7, and it wont be fixed in them. Quote Link to comment Share on other sites More sharing options...
phpknight Posted March 13, 2008 Author Share Posted March 13, 2008 Okay, maybe I will try that clearfix thing. Right now, I am using the spacer div technique. But, how do you know if it is IE6 or IE7? I try not to have to use javascript to get every bug to look right. Does this clearfix way work for both IE7 and Firefox, or is it a hack? I thought the clear: both of the official answer from W3, but it leaves a blank line in IE7. BTW, I usually just program to the latest browser. If some guy has IE4, then too bad, lol! Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted March 13, 2008 Share Posted March 13, 2008 You don't need to worry about which solution to use - you use them both. They are independant of each other (one targeting ONLY IE6 and below, while the other targets ONLY IE7). It is recommended (but not necessary) that you place them into an IE only css and call them in your head tag by using a conditional comment. Like this (which only targets any IE version including IE7): <head> <title>The horror of HasLayout</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" media="screen" href="master.css" /> <!--[if lt ie 7]><link rel="stylesheet" type="text/css" media="screen" href="ie-win.css" /><![endif]--> </head> contents of "ie-only.css" would then be: /* for ie6 use height of one percent */ * html #floated_div {height:1%} /* for ie7 use min-height of one pixel */ *:first-child + html #floated_div {min-height:1px} They ARE hacks and they cleverly target the IE version necessary. The "hasLayout" solution for IE6 uses the "star" hack (* html) which is ignored by ALL browsers except IE6 and below (which also don't recognize min/max widths and height) - it is: * html #floated_div {height:1%} Since IE7, like modern browsers, ignores the "star" hack and DOES recognizes min/max - but still causes "HasLayout" - the solution for IE7 was extremely clever (using the "first-child" pseudo class to force IE7 to auto provide a min-height which subsequently forces it to accept the css element's dimensions): *:first-child + html #floated_div {min-height:1px} IE's "HasLayout" is very convoluted, but, in essence, it is that IE will automatically over-rule a css element's dimensions for containers or boxes that meet certain conditions that IE decides it needs to ignore - which cause layout problems including: * Many common IE float bugs. * Boxes themselves treating basic properties differently. * Margin collapsing between a container and its descendants. * Various problems with the construction of lists. * Differences in the positioning of background images. * Differences between browsers when using scripting. (for the brave and scholarly this link "explains" it all in "high-Geek language": onhavinglayout ... my eyes glaze over halfway through it no matter how many times I try) Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.