How to get some order?

Hey!

I am new at the forum and also to css.
I am having trouble remember and see the different rules (css coding and IE bugs) that are out there in the internet space. Talking about things like contained floats, enclosing floats, collapsing margins, hasLayout, etc. etc.
How to “see” if the code is having one or more of these problems? :shifty:
Is there somehow a way to remember all “rules” that are out there?
Which of them are important and in which order are they?

Wondering though about how is the best way to start looking at the webpage; if the webpage is not having this and that (collapsing margins, overflow, all IE bugs, etc.)? What are the things I have to look for?

Thinking of doing a so called check-list, but having trouble beginning it. :blush:

Thanx for any answer! :cool:

All browsers are covered by the clearfix method.

Simply add that code to your stylesheet, and then reference it on any element that needs to enclose its contents.

So, if you have a div that needs to wrap around floated contents, you can mark it up like so:

<div class="clearfix">

</div>

If you don’t want to add that extra “clearfix” class to your HTML, and the element already has ts own class or ID (such as “wrapper”), you could instead modify the clearfix code like this:

#wrapper:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

#wrapper {display: inline-block;}

/* Hides from IE-mac \\*/
* html #wrapper {height: 1%;}
#wrapper {display: block;}
/* End hide from IE-mac */

Have to admit I´m now quite confused, after reading about clearing floats; what actually have to be done and how for all browsers? What is the best way to do it and so… :frowning: :blush:

Hi,

The code above is placing a period after the content in the non floated parent div.

e.g.


<div>
    <div>This is some floated inner content</div>
    [B]<!-- the generated content would be inserted at this point -->[/B]
 .
</div>


That element is placed after the float and then set to clear:both so that it clears the float and then the non floated parent div now has some real content inside and will stretch its arms all around the whole lot.

The content property supplies the period into the html and then to make it invisible sets it visibility to hidden and the height to zero otherwise you would see the period in your page and get an extra line-break.

The period isn’t actually necessary these days a space will do as the period was there to support older browsers.

The content property could supply a whole load of text if you wanted but of course real content should not be supplied like this but you can find some examples here.

I have been reading and reading and also became a little bit more familiar with css and the hacks.

I am now stucked with clearing floats and what the content: “.”; means in the (beneath)…?

.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}

After reading this page I also been wondering about what it means with the “period”? Is that the questions above or…? And what´s about the talk about “no one wants a line space messing up the end of their clean container box, so we also use {height: 0;} and {visibility: hidden;} to keep our period from showing.”?

Thanx!!

It’s just placing a character there. It could be anything e.g. content: “x”;

It’s just that a period/dot was originally used as it was small and would go unnoticed if it didn’t get hidden by any chance.

It could be anything but as I said above a black space is good enough these days.

The code above is placing a period after the content in the non floated parent div.

okey, that explains a lot. But still don´t get the word “period” in this context? :blush:

IF I got this code right, this code is not an IE bug fixing code, it´s for non-IE browsers (I test only in FF and IE)?

Am I thinking right?:shifty:

What does it means in this article about the “Tony’s method originally used “overflow: hidden;””? Was the overflow:hidden; in the code aswell?

Where can I find what has to be done for IE7 (what have to be done for IE8)?
IF I decide not to support IE6…
(Don´t want to hear anything about why to still support IE6…)

Short answer… Sorry, I ment what is the hasLayout in the example?

By the way, I have tried the examples on the webpage and after that came this questions…

thanx for the explanations, they did help. =o)

Short answer… Sorry, I ment what is the hasLayout in the example?

In his stylesheet:


<!--[if lt IE 8]><style>
/*	Su p per posizione background e per evitare extra spazio (raddoppio padding-top?) che a volte ci sarebbe se blocco precedente non "stabile" */
[b].containerLay,[/b] .containerGC, p {
	_height: 0;
	[b]zoom: 1;[/b]
}
</style><![endif]-->

He’s got a lot in there, but the zoom: 1 is setting Haslayout in Ie6 and IE7. This is a way to trigger Haslayout that in general we try to avoid because it is considered an error by the W3C Validator (it’s IE-only so, proprietary and the validator does not recognise it).

However he’s using it because it changes nothing else (so it’s safe, whereas setting a height or width may not be) and it’s inside an IE7-and-lower-only stylesheet.

On the santanez.de site, or the haslayout.net (since it’s been renewed), there’s a list of all the things that can trigger Haslayout (and also why a few of them shouldn’t be used). For me, I only have to remember “dimensions, float, abso-po, and overflow-in-IE7” for haslayout triggers. If I can’t use any of those easily, and IE6 is the only one I need to hit, I’ll also use

  • html #element {height: 1%;} since IE6 has the expanding-box bug and so generally will allow the #element to get pushed larger than 1% high by inner content.

But, mostly it’s better to try to use something that can sit out in the open. Sometimes I have code like this:

#someElement {
width: 100%; /IE6/
my other codes;
}
where setting the width has no adverse effects in other browsers.

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! */

Next problem…
With a clearing br inside the container and hasLayout for IE7-/Win…
What is the hasLayout ? Just for IE7 or also for IE8?

Poe, btw, have some questions about your floaties-page, examples 5. Of course can anyone answer it if they want… :stuck_out_tongue:

Why isn´t the width for #container enough for triggering the hasLayout?

Then…
#container:after {
content: “.”;
display: block; /*why use block? */ :blush:
height: 0;
clear: both;
visibility: hidden;
}
/*if IE needed Haslayout triggered, here’s what you’d do:
#container {
display: inline-block; this triggers Haslayout, and MUST remain in a separate declaration as you see here…
}

#container {
display: block; this sets the container back to what it was for all browsers while KEEPING the Haslayout!
}
*/

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

Poe, you gave me this webpage to take a look at.

I´ve been looking at the “Containing Floats”-page. Where it says about “If the container has display:inline-block,” I came across a problem in FF (have vers. 3.6.3.). The container´s width isn´t anymore as long as it has been above, the same is actually with display:table.
Why is that? Is there a simple answer to this…? :wink:

Display:table and display-inline-block are properties that work on a “shrink to fit” basis (just like absolute elements do). If they have no width provided they will be as wide as the content they contain. Unlike normal block elements that stretch automatically to fill the containing block’s width.

The solution is to provide them with width:100% and then they will be full width. However, I would advise against using them as clearing methods because the methods I previously mentioned are better.

Next problem…
With a clearing br inside the container and hasLayout for IE7-/Win…
What is the hasLayout ? Just for IE7 or also for IE8?

Haslayout is explained here and applies to ie7 and under only. When an element is in “haslayout” mode (which can be triggered with a dimension) then it will auto clear any children that it contains in the same way that other browsers clear floats when overflow:hidden is used.

  1. I have understand that overflow:hidden, is a useful one to use.
    Is it just for IE6 this one overflow:hidden isn´t working. How to get around that?

NO IE6 doesn’t auto clear floats when overflow:hidden is used and IE6 needs “haslayout” as mentioned above which can be as easy as setting width:100% on the element if no padding/borders have been applied.

IE7 will however auto clear floats when overflow:hidden is used but probably not for the same reasons as other browsers but for the fact that overflow other than visible is a haslayout trigger in IE7.

  1. Is it possible to use in all cases the "parent container has float and width ( float: left; width: 100% or width: as wanted in pixels)?
    If I use this, do I have to use overflow:hidden; for some other reasons?

If the parent is floated it will automatically encompass its children and does not need anything else. However it’s not a good idea to float everything as you run into more bugs than you fix and as a general rule only float elements that really need to be floated and clear the children in some other way.

  1. Parent container has clearing br (inside the container) + hasLayout for IE7-

Yes just place an element before the closing div of the parent (and after the floated children) and then set it to clear:both and it will do the job but at the cost of non semantic empty mark up. Don’t use a break for clearing as it is buggy in some browsers. Use an empty div instead.

It’s a reliable method but ugly and wasteful when there are more unobtrusive methods around.

What does this mean?

  • With hasLayout alone there is stable enclosing and rendering, but the float’s margin-bottom is lost in IE6-7. In presence of hover this may come back (creating some jumping float’s bottom margin effect).
    There may also be other problems.
  • With hasLayout and a clearing element all is usually fine.

If you apply a bottom margin to the float in IE6 and 7 and you have only cleared the element using haslayout then the bottom margin on the float is lost. You would need an empty clearer set to clear:both under the float for the margin to come back into play. However the margin could simply be applied to the original parent to avoid this issue anyway.

And what is this for hack, for what?

It’s for ie5mac and not really needed these days.

With all these tests you should try them out yourself and become familiar with what is happening. However don’t overcomplicate things and just use the clearfix technique or overflow:hidden as it works for most cases.

Heh! Perhaps I will do that…

I am Swedish-speaking Finn and as my client. :stuck_out_tongue:

Thanx Poe!

You say “zoom: 1 is setting Haslayout in Ie6 and IE7”.
But I should avoid this… :stuck_out_tongue:
Thanx for that webpage.

For me, I only have to remember “dimensions, float, abso-po, and overflow-in-IE7” for haslayout triggers. If I can’t use any of those easily, and IE6 is the only one I need to hit, I’ll also use

  • html #element {height: 1%;} since IE6 has the expanding-box bug and so generally will allow the #element to get pushed larger than 1% high by inner content.

But, mostly it’s better to try to use something that can sit out in the open. Sometimes I have code like this:

#someElement {
width: 100%; /IE6/
my other codes;
}
where setting the width has no adverse effects in other browsers.

Okey, getting there now to understand your coding and explanations… :stuck_out_tongue: :rolleyes:
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)?

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

  • html #element {height: 1%;} since IE6 has the expanding-box bug and so generally will allow the #element to get pushed larger than 1% high by inner content.

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?

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?

Mostly thinking of my webpage (you know…)

I I got it right about the float enclosement there is quite many ways to get the result “works in all browsers”. IF I want it to work properly in IE and FF, which one is the best to choose of this examples underneath? Is it up to how the rest of the webpage looks like? Or is it a “opinion question”?

  1. I have understand that overflow:hidden, is a useful one to use.
    Is it just for IE6 this one overflow:hidden isn´t working. How to get around that?

  2. Is it possible to use in all cases the "parent container has float and width ( float: left; width: 100% or width: as wanted in pixels)?
    If I use this, do I have to use overflow:hidden; for some other reasons?

  3. Parent container has clearing br (inside the container) + hasLayout for IE7-

  4. Parent container has empty clearing br + hasLayout for IE7- and a border (or padding) on the parent container
    Is this particularly used when the parent container has border or padding or both?

What does this mean?

  • With hasLayout alone there is stable enclosing and rendering, but the float’s margin-bottom is lost in IE6-7. In presence of hover this may come back (creating some jumping float’s bottom margin effect).
    There may also be other problems.
  • With hasLayout and a clearing element all is usually fine.

Then I read this and thinking that never is the browsers satisfied…

And what is this for hack, for what?
/\//*/

  • html .containerGC {display: inline-block;width: 100%;}
  • html .abs {margin-right: -100%;}
    /**/

<!–[if lt IE 8]><style>
.containerLay, .containerGC, p {_height: 0;zoom: 1;}
</style><![endif]–>

Sorry for the many questions and long list of them… :p:rolleyes: