One thing that came up tonight was, if hasLayout have to be in each box in a webpage (#wrapper, #header, #left and #right column, #footer)?
Paul O’B will say (correctly) that it’s a good idea to do so (at least on major containers), however relax and don’t worry too much about it. When I started Lloyd’s book, he really didn’t talk much about Haslayout and I was fine. Instead, as a beginner, just learn what works in all browsers and use Haslayout as your First Attemp to fix any IE bugs that pop up (since Haslayout is the most common cause).
Okey, but do I have to use all of those “dimensions, float, abso-po, and overflow-in-IE7” for one box at time, or how to know what comes where…?
No. I didn’t sit there when I was new and memorise those. It’s just that, after 3 or 4 or whatever years of writing code, I now have those memorized (just, over time) and so I know when I’m using those (for OTHER reasons) that they are triggering Haslayout. Or, if I have a big box (like a container) and I know I need to trigger Haslayout (sometimes it’s only because I look at my page so far in IE6 and something’s not right), I know what I can choose.
When I first started doing bug-fixing, I did always go back to the list of triggers to see what I could use.
So this is not a hasLayout, “just” another IE bug (IE6 expanding bug) and I have to but the other hasLayout´s (“dimensions, float, abso-po, and overflow-in-IE7”) also to trigger hasLayout?
Setting height triggers Haslayout (like it says on those Haslayout pages and as Paul said, dimensions). Usually, you can’t just say
#someElement {
height: 1%;
}
because for other browsers, that really does mean 1%! Which certainly isn’t high enough!
But in IE6, we can set the height (to something small and stupid… someone started using 1% and everyone else just copied him, it doesn’t matter what it is) and we don’t have to worry about 1% not being high enough, due to IE6 having another, unrelated bug.
You can read about the expanding box bug at Big John’s page.
hmm… the width:100%; can not be set if I want a specific width in pixels? Or can I then set the width:100% somehow just for the IE6?
If I have a box, a box that I know will need Layout because of a bug in IE6, then if it’s a static block (who naturally wants to be 100% width of its container anyway), then one way I can trigger Haslayout and still be safe is to state
width: 100%;
or any width, because other browsers usually can’t tell the difference in that circumstance.
As I said in my PMs to you a month or so back, I would never do this if I needed to set side padding or side margins, because then I’ll have more than 100% (which breaks the universe and everything).
Why isn´t the width for #container enough for triggering the hasLayout?
It is. The Tony-Aslett :after stuff isn’t for IE… it’s for all the other browsers (Tony’s code was supposed to get rid of those <div style=“clear: both”></div> that we think are ugly and don’t want, and the overflow: hidden trick hadn’t yet been discovered by Paul O’B : )
Then…
#container:after {
content: “.”;
display: block; /*why use block? */
height: 0;
clear: both;
visibility: hidden;
}
We use block because when we make our content:
#container:after {
content: “.”;
}
that’s a “.”, a dot. A full-stop. It’s an inline, and inline can’t do clearing. Blocks can. So, we make it a block so that it can clear.
The height: 0 I actually use for Firefox, not IE. Other people use it for IE (because, sigh, ANOTHER bug, IE will take a box and set its height at least as tall as the font-size set… so you can override that with a 0 height).
The visibility: hidden was a just-in-case-you-could-still-see-the-dot.
Don´t understand about the seperate declaration and also why you have first inline-block and then block… it is the same in your 4th example with the #notfloat…?
I don’t personally use that technique, but I think I put it in there as a another way to do it.
If I say
#container {
display: inline-block;
}
then it has Haslayout in IE.
But, do I really want all my browsers to show that box as inline-block??? No. Inline-blocks act in some ways like inlines, and some ways like blocks (hence the name). Like inlines, they will shrink-wrap to the width of the content inside them. I could set a width on them (like a block), but it’s just a lot easier to make #container a block again (I always wanted it to be a block, and I only set “inline-block” for IE).
So, we can:
#container {
display: block;
}
it’s not an inline-block anymore, and this is the ONLY Haslayout setting that, when you undo it, the Haslayout remains. It’s a super-special Haslayout trigger.
So, it goes like this:
you have a #container. You want to keep it a normal block, but you also want to trigger Haslayout on it. For whatever reason, on this web page you can’t set a height or a width because it’ll break something else somewhere. So, you could use the super-special inline-block trick:
#container {
display: inline-block;
}
/Haslayout is set!/
#container {
display: block;
}
/*overrides the previous statement, as happens in CSS, but IE STILL has layout. Yay! */
