Re: Problem with clearing floats in Firefox

Niels wrote:

I'm trying to get the clear-div to clear all floats,
without actually being rendered. But Firefox apparently
thinks a div with height==0 shouldn't have any influence at
all on the document.

How can I solve this problem? How else can I do this?

Why don't you give it 1px height?
If you set the margins to 0, I'm sure no one will notice the
existence of the div.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Els wrote:

Why don't you give it 1px height?
True, that works. But why?

If you set the margins to 0, I'm sure no one will notice the
existence of the div.
I would. I suppose I could live with it, and I think I've done it before

somewhere else to solve the problem. But I feel it's a hack, and I don't
understand why Firefox apparently misbehaves like this.

Come to think of it, lately I've had several situations where Firefox was a
little too clever for it's own good.


Thanks though,
Niels

Niels wrote:

Els wrote:

Why don't you give it 1px height?

True, that works. But why?

Because it's a height.
height:0; is not a height. I find it quite logical for a
browser to ignore the presence of anything without any volume.
(what colour do you see when a blue line has zero length?)

Not saying it's proper behaviour - I haven't checked the specs
on it. Doesn't matter though, even if it's proper behaviour,
the other browsers are acting differently anyway.

If you set the margins to 0, I'm sure no one will notice
the existence of the div.

I would. I suppose I could live with it, and I think I've
done it before somewhere else to solve the problem. But I
feel it's a hack, and I don't understand why Firefox
apparently misbehaves like this.

Another way is of course to set the clear:both; property to
the next element, without using a seperate div for it.

Come to think of it, lately I've had several situations
where Firefox was a little too clever for it's own good.

<g>
And it's getting cleverer with each version. Firefox 0.9 is
the first Gecko to center a page properly without needing
hacks to make it stay inside the window. Firefox 0.8 still
needed the hack.
(see http://locusmeus.com/html-css/pageslipping.html )


--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Els wrote:

Because it's a height.
height:0; is not a height. I find it quite logical for a
browser to ignore the presence of anything without any volume.
Hmm... perhaps. On the other hand, a simple <br> doesn't have any volume as

such, but it still changes the document.

(what colour do you see when a blue line has zero length?)
None, obviously. But the document still contains it, and even if I can't see

it, it might influence other elements.

I agree that it a tricky subject.

Not saying it's proper behaviour - I haven't checked the specs
on it. Doesn't matter though, even if it's proper behaviour,
the other browsers are acting differently anyway.
And it's annoying.

Another way is of course to set the clear:both; property to
the next element, without using a seperate div for it.
I don't see how that would work.

However, this seems to work:

<br style='clear:both'>

I'll use that for now.

Come to think of it, lately I've had several situations
where Firefox was a little too clever for it's own good.

g
And it's getting cleverer with each version. Firefox 0.9 is
the first Gecko to center a page properly without needing
hacks to make it stay inside the window. Firefox 0.8 still
needed the hack.
(see http://locusmeus.com/html-css/pageslipping.html )

I haven't run into that one, fortunately.

I seems to me that Mozilla repeats the mistake of Explorer trying to
interpret the code, and thereby enabling bad coding. All in the name of
compatibility and market share. I just found out today that Firefox
apparently tries to guess mimetypes based on content, and ignores the
mimetype sent by the server. I'll have to investigate further before making
conclusions.

I'm quite annoyed about the whole quirks mode concept, but I suppose I'll
have to study it more before I can really start to hate it.


Thanks for the chat, my problem seems to be solved,
Niels

Niels wrote:

Another way is of course to set the clear:both; property
to the next element, without using a seperate div for it.

I don't see how that would work.

Leaving the 3rd div out, applying the clear:both; to the 4th
div, but indeed, you won't be able to give it a 20px margin-
top then I think.

However, this seems to work:

br style='clear:both'

That's the method I started to avoid when I noticed the
unavoidable distance between the divs before and after a <br>
:-)

(see http://locusmeus.com/html-css/pageslipping.html )

I haven't run into that one, fortunately.

As long as you don't try to center pages, you won't ;-)

I'm quite annoyed about the whole quirks mode concept, but
I suppose I'll have to study it more before I can really
start to hate it.

Even better: don't start to hate it; study it and live with
it. You'll feel better ;-)

Thanks for the chat, my problem seems to be solved,

I'm afraid the keyword here is 'seems', but without a url
that's impossible to tell.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Els wrote:

Leaving the 3rd div out, applying the clear:both; to the 4th
div, but indeed, you won't be able to give it a 20px margin-
top then I think.
Exactly, that's the problem.

br style='clear:both'

That's the method I started to avoid when I noticed the
unavoidable distance between the divs before and after a <br
:-)
No such problem here in Firefox and Konqueror. The only distance is the

top-margin, and it goes down all the way down to 0px!

I'm quite annoyed about the whole quirks mode concept, but
I suppose I'll have to study it more before I can really
start to hate it.
Even better: don't start to hate it; study it and live with
it. You'll feel better ;-)
I suppose that'd be the prudent thing to do. But then I'd have to find

something else to bitch and moan about... I know: Internet Explorer!

Thanks for the chat, my problem seems to be solved,

I'm afraid the keyword here is 'seems', but without a url
that's impossible to tell.
My example is 6 lines. If you're that curious you can paste them to your

local machine. I know y'all like urls for examples, but this was just a
simple question about how to get clear.


//Niels

Niels wrote:

Els wrote:

Leaving the 3rd div out, applying the clear:both; to the
4th div, but indeed, you won't be able to give it a 20px
margin- top then I think.
Exactly, that's the problem.


br style='clear:both'

That's the method I started to avoid when I noticed the
unavoidable distance between the divs before and after a
br
:-)
No such problem here in Firefox and Konqueror. The only
distance is the top-margin, and it goes down all the way
down to 0px!


I'm quite annoyed about the whole quirks mode concept,
but I suppose I'll have to study it more before I can
really start to hate it.
Even better: don't start to hate it; study it and live
with it. You'll feel better ;-)
I suppose that'd be the prudent thing to do. But then I'd
have to find something else to bitch and moan about... I
know: Internet Explorer!


Thanks for the chat, my problem seems to be solved,

I'm afraid the keyword here is 'seems', but without a url
that's impossible to tell.

My example is 6 lines. If you're that curious you can paste
them to your local machine. I know y'all like urls for
examples, but this was just a simple question about how to
get clear.

Okay, if those 6 lines are all, I'll make a sample page for
you then.

Your initial code:
http://locusmeus.com/temp/niels.html

Seems to work in my Firefox though... (0.8 in WinXP)

Now, changing the 3rd div the way Lauri said:
http://locusmeus.com/temp/niels2.html

You're right, the 4th div does go up, ignoring the clearing
div.

Now why don't I have that problem on my own pages...
Okay, I have non floating divs above the clearing one.
The &nbsp; inside the clearing div does solve the problem
though, although at the same time it gives the div a height:
http://locusmeus.com/temp/niels3.html

Adding line-height:0; to it avoids that:
http://locusmeus.com/temp/niels4.html

The reason I prefer <div> over <br>, is that if it's used on
more pages and I want a different look on all of them, I can't
just write a different style for the <br>, while I can do that
for a <div>.

But as it seems you only want it on one page, and won't have
any other content between the floats and the 4th div,
<br style="clear:both"> does the trick too, yes :-)
But not in IE (6.0 - WinXP)though:
http://locusmeus.com/temp/niels5.html



--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Thunder - Dirty Love

Els wrote:

Okay, if those 6 lines are all, I'll make a sample page for
you then.
Great! You've also added the strict doctype, which also is what I usually

use.

Your initial code:
http://locusmeus.com/temp/niels.html

Seems to work in my Firefox though... (0.8 in WinXP)
It's doesn't in my 1.0pre on Linux.

Now, changing the 3rd div the way Lauri said:
http://locusmeus.com/temp/niels2.html

You're right, the 4th div does go up, ignoring the clearing
div.

Now why don't I have that problem on my own pages...
Okay, I have non floating divs above the clearing one.
The &nbsp; inside the clearing div does solve the problem
though, although at the same time it gives the div a height:
http://locusmeus.com/temp/niels3.html

Adding line-height:0; to it avoids that:
http://locusmeus.com/temp/niels4.html
Yes, that also works on my Firefox. I usually add that to the clearer, but I

had left it out in the example.

But not on Konqueror -- I think its minimum font size is to blame here, plus
the fact that there's always been problems with line height in Konqueror.

Adding a overflow:hidden should solve that, limiting the div to the exact
height of 0px, regardsles of its content. That, however, causes Firefox to
disregard the div completely.

So it seems to be either Firefor or Konqueror if I want the div solution.

The reason I prefer <div> over <br>, is that if it's used on
more pages and I want a different look on all of them, I can't
just write a different style for the <br>, while I can do that
for a <div>.
That's a concern, true. Couldn't you write <br class='someclass'> ?

But as it seems you only want it on one page, and won't have
any other content between the floats and the 4th div,
br style="clear:both"> does the trick too, yes :-)
I'm writing a large intranet site. All html is generated by php, and <br> or

<div> is equally easy for me -- I just have to find the best.

But not in IE (6.0 - WinXP)though:
http://locusmeus.com/temp/niels5.html
Hmf! Oh well, I'll look into that later. IE is _not_ going to steal my time

on this one!



Thanks a lot for your comments!
Niels

Niels wrote:

Els wrote:

Okay, if those 6 lines are all, I'll make a sample page
for you then.

Great! You've also added the strict doctype, which also is
what I usually use.

That's good. :-)

Your initial code:
http://locusmeus.com/temp/niels.html

Seems to work in my Firefox though... (0.8 in WinXP)

It's doesn't in my 1.0pre on Linux.

Okay, starting up my SuSE here...
Starting Konqueror...
Starting Firefox (last week's version, 1.0 preview)
Looking at niels.html...

Indeed, it doesn't.

So it seems to be either Firefor or Konqueror if I want the
div solution.

How's this one:
http://locusmeus.com/temp/niels6.html

Exactly 20px between floats and 4th div, in WinXP: IE and
Firefox, and on Linux in Konqueror and Firefox.

The reason I prefer <div> over <br>, is that if it's used
on more pages and I want a different look on all of them,
I can't just write a different style for the <br>, while I
can do that for a <div>.

That's a concern, true. Couldn't you write <br
class='someclass'> ?

Yep, you can.
But what are the styles that could be applied to a <br>?

But as it seems you only want it on one page, and won't
have any other content between the floats and the 4th div,
br style="clear:both"> does the trick too, yes :-)

I'm writing a large intranet site. All html is generated by
php, and <br> or <div> is equally easy for me -- I just
have to find the best.

Okay.

But not in IE (6.0 - WinXP)though:
http://locusmeus.com/temp/niels5.html

Hmf! Oh well, I'll look into that later. IE is _not_ going
to steal my time on this one!

I hope your customer doesn't let his employees use IE on this
intranet site then ;-)

Thanks a lot for your comments!

No problem.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Living Colour - Cult Of Personality

Els wrote:

Okay, starting up my SuSE here...
Starting Konqueror...
Starting Firefox (last week's version, 1.0 preview)
Looking at niels.html...

Indeed, it doesn't.
Good to see that I haven't lost yet completely!

How's this one:
http://locusmeus.com/temp/niels6.html

Exactly 20px between floats and 4th div, in WinXP: IE and
Firefox, and on Linux in Konqueror and Firefox.
Yep, that works! Thanks for testing it!

It's a bit clumsy to implement in my html-making class, since the element
that wants the 20px isn't really the one getting it.

But not in IE (6.0 - WinXP)though:
http://locusmeus.com/temp/niels5.html

Hmf! Oh well, I'll look into that later. IE is _not_ going
to steal my time on this one!

I hope your customer doesn't let his employees use IE on this
intranet site then ;-)
That's his problem ;-) Seriously, if the site works in IE, but doesn't look

pixel-perfect, I'm not worried. If people insist on using IE they must be
prepared to pay for it. This isn't 2001!


//Niels