Re: Validated page falls apart in IE8

Ed Jay wrote:

http://www.edbjay.com/brth_usermenu.html

This page renders fine in Opera and FF, but collapses in IE8. The page
validates to 4.01 strict, and the CSS validates. Why?

Probably because validation is not sufficient.

It's a little broken in IE6, looks as you wanted in IE7.

Why don't you remove your wildcard margin/padding and see what happens.

The mix of styles is too much trouble for me to sort through, and I
don't have IE8 on the computer.

You are missing background images also (in IE6 too), which I find
curious.

Jeff

Ed Jay wrote:

Jeff wrote:

Ed Jay wrote:
http://www.edbjay.com/brth_usermenu.html

This page renders fine in Opera and FF, but collapses in IE8. The page
validates to 4.01 strict, and the CSS validates. Why?
Probably because validation is not sufficient.

It's a little broken in IE6, looks as you wanted in IE7.

Why don't you remove your wildcard margin/padding and see what happens.

Did, and nada.

What I see in IE8 is collapsed top and bottom margins. Since everything
is block level, I can't imagine why they are missing. I wonder if it is
an issue with the floats, if so, overflow: hidden might fix it.

The mix of styles is too much trouble for me to sort through, and I
don't have IE8 on the computer.

You are missing background images also (in IE6 too), which I find
curious.

I don't know what you're trying to tell me.

You have background images that aren't showing up in IE6. I don't
remember if I saw them in IE7 and IE8. I've got access to 3 windows
boxes with a different IE version on each... a pain...

Jeff

Ed Jay wrote:

Jukka K. Korpela wrote:

Jeff wrote:

What I see in IE8 is collapsed top and bottom margins. Since
everything is block level, I can't imagine why they are missing. I
wonder if it is an issue with the floats, if so, overflow: hidden might
fix it.
It could be an issue with floats. I've seen page layout break badly on IE 8,
apparently due to floats, presumably because IE 8 tries so hard to be
"standard" that it's over-standard.

Jeff, Jukka, thanks. It was an issue with floats, and it was my own error.

If you're interested, I had:
div><ul
li style='float:left;'>yada</li><li style='float:right;'>yada2</li
/ul></div
div class=clearfloats></div

I've been getting away from the float clearing div and doing this
(Doraymes suggestion):

<div style="overflow: hidden"><ul>
<li style='float:left;'>yada</li><li style='float:right;'>yada2</li>
</ul></div>

See if that also fixes this. I don't have IE8 on hand at the moment.

Not that I know why that works, or for that matter why a clearing div
works. But both do prop up the box. I personally prefer the one without
extraneous markup.

Jeff

Jeff wrote:

I've been getting away from the float clearing div and doing this
(Doraymes suggestion):

div style="overflow: hidden"><ul
li style='float:left;'>yada</li><li style='float:right;'>yada2</li
/ul></div

Works in IE8, does not in IE6

See if that also fixes this. I don't have IE8 on hand at the moment.

Not that I know why that works, or for that matter why a clearing div
works. But both do prop up the box. I personally prefer the one without
extraneous markup.

Because by default floats are *not* contained by their parent blocks in
normal flow. What does that mean? Well if you have 2 paragraph blocks
and within the 1st you have an image that you float. If the image is
taller than the parent paragraph is *should* "break out" of the bottom
of its parent and displace the contents of the 2nd.

+-----------------+

paragraph 1 |
|
|
+--------+ |
float |--------+
image |--------+
+--------+ |
|
paragraph 2 |
+-----------------+

Just as you see in print like magazines.

Now if you add a clearing element after the image it changes the flow so
that paragraph 1 expands to fully contain the image. This works with IE6

+-----------------+

paragraph 1 |
|
|
+--------+ |
float | |
image | |
+--------+ |

+-----------------+
+-----------------+

paragraph 2 |
|
+-----------------+

Now there is an obscure feature that if you change the block formating
context of the container that you can get it to "expand" contain the
float. Setting its overflow property to something other than the default
"visible"

http://www.w3.org/TR/CSS21/visuren.html#block-formatting

So setting paragraph 1 'overflow: hidden' should make it expand to
encompass the float. It does, but not in IE6.



--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

BootNic wrote:

On Tue, 26 May 2009 10:59:57 -0400
"Jonathan N. Little" <lws4art (AT) centralva (DOT) net> wrote in:
gvh056$s1e$1 (AT) news (DOT) eternal-september.org

Jeff wrote:

I've been getting away from the float clearing div and doing this
(Doraymes suggestion):

div style="overflow: hidden"><ul
li style='float:left;'>yada</li><li style='float:right;'>yada2</li
/ul></div

No need for the containing div. Style could be applied directly to the
ul element.

Works in IE8, does not in IE6

[snip]

Now if you add a clearing element after the image it changes
the flow so that paragraph 1 expands to fully contain the image.
This works with IE6

No need to add clearing elements.

[snip]

Now there is an obscure feature that if you change the block
formating context of the container that you can get it to
"expand" contain the float. Setting its overflow property to
something other than the default "visible"

http://www.w3.org/TR/CSS21/visuren.html#block-formatting

So setting paragraph 1 'overflow: hidden' should make it expand
to encompass the float. It does, but not in IE6.

Adding zoom:1; will allow IE 6 to clear the float.

That's very interesting and comes as a surprise to me. Apparently it
triggers "has layout", whatever that is. I'll add it to my toolkit as it
does no harm.

Oh, thanks Jonathan for the detailed explanation. I'm going to read
through it again.

Jeff

IE 6/7 will be more then happy to clear the floats with just
zoom:1;.

One could just add zoom:1; and validate as CSS3 or use
conditional comments to add zoom:1; for IE 6.

dorayme wrote:

In article <gvh056$s1e$1 (AT) news (DOT) eternal-september.org>,
"Jonathan N. Little" <lws4art (AT) centralva (DOT) net> wrote:

Jeff wrote:

I've been getting away from the float clearing div and doing this
(doraymes suggestion):

div style="overflow: hidden"><ul
li style='float:left;'>yada</li><li style='float:right;'>yada2</li
/ul></div
Works in IE8, does not in IE6

You will find that quite often IE6 does not give this problem because
somewhere along the line the browser has been tripped (against
standards) into giving height to the parent by the presence of an
explicit width or height.

I was wondering about that because I didn't remember seeing this
problem in IE6. Turns out that I normally set a width. Indeed, setting
widths is common.

But I suspect we all have our own uses for floats. I'm enjoying the
inline-block option for product and image thumbs, I like not having to
set heights to keep rows from starting at the least tall block. That has
always annoyed me.

In the above example, it is true that IE6 is not affected by any
overflow rule. But one fix is simply to give an explicit width (100%
say) or a nominal height (say 1px) and hide this from other browsers via
a conditional. This latter is enough to make an IE6 container gain
enough height to cover all its floated children.

http://netweaver.com.au/floatHouse/page9.php


ul class="coversItsFloats"
li style='float:left;'>yada</li
li style='float:right;'>yada2</li
/ul

with, in the HEAD:

!--[if IE 6]
.coversItsFloats {background: #fcc; height: 1px;}
![endif]--

should do it.

Options options!

Jeff

On May 26, 11:13*am, Ed Jay <ed... (AT) aes-intl (DOT) com> wrote:

Jeff wrote:
Ed Jay wrote:
Jukka K. Korpela wrote:

Jeff wrote:

What I see in IE8 is collapsed top and bottom margins. Since
everything is block level, I can't imagine why they are missing. I
wonder if it is an issue with the floats, if so, overflow: hidden might
fix it.
It could be an issue with floats. I've seen page layout break badly on IE 8,
apparently due to floats, presumably because IE 8 tries so hard to be
"standard" that it's over-standard.

Jeff, Jukka, thanks. It was an issue with floats, and it was my own error.

If you're interested, I had:
div><ul
li style='float:left;'>yada</li><li style='float:right;'>yada2</li
/ul></div
div class=clearfloats></div

I've been *getting away from the float clearing div and doing this
(Doraymes suggestion):

div style="overflow: hidden"><ul
li style='float:left;'>yada</li><li style='float:right;'>yada2</li
/ul></div

* See if that also fixes this. I don't have IE8 on hand at the moment..

* Not that I know why that works, or for that matter why a clearing div
works. But both do prop up the box. I personally prefer the one without
extraneous markup.

It didn't work for me.

--
Ed Jay (remove 'M' to reply by email)

Win the War Against Breast Cancer.
Knowing the facts could save your life.http://www.breastthermography.info- Hide quoted text -

- Show quoted text -

As a beginner I have a simple question (the question is simple) about
floats. It seems to me that it is very difficult to get them to work
as expected. Is their logic left over from old specifications or is
there really a good method to what seems like madness?

www.richardfisher.com

Helpful person wrote:

On May 26, 11:13 am, Ed Jay <ed... (AT) aes-intl (DOT) com> wrote:
Jeff wrote:
Ed Jay wrote:
Jukka K. Korpela wrote:
Jeff wrote:
What I see in IE8 is collapsed top and bottom margins. Since
everything is block level, I can't imagine why they are missing. I
wonder if it is an issue with the floats, if so, overflow: hidden might
fix it.
It could be an issue with floats. I've seen page layout break badly on IE 8,
apparently due to floats, presumably because IE 8 tries so hard to be
"standard" that it's over-standard.
Jeff, Jukka, thanks. It was an issue with floats, and it was my own error.
If you're interested, I had:
div><ul
li style='float:left;'>yada</li><li style='float:right;'>yada2</li
/ul></div
div class=clearfloats></div
I've been getting away from the float clearing div and doing this
(Doraymes suggestion):
div style="overflow: hidden"><ul
li style='float:left;'>yada</li><li style='float:right;'>yada2</li
/ul></div
See if that also fixes this. I don't have IE8 on hand at the moment.
Not that I know why that works, or for that matter why a clearing div
works. But both do prop up the box. I personally prefer the one without
extraneous markup.
It didn't work for me.

--
Ed Jay (remove 'M' to reply by email)

Win the War Against Breast Cancer.
Knowing the facts could save your life.http://www.breastthermography.info- Hide quoted text -

- Show quoted text -

As a beginner I have a simple question (the question is simple) about
floats. It seems to me that it is very difficult to get them to work
as expected. Is their logic left over from old specifications or is
there really a good method to what seems like madness?

I think floats were thought of with images in mind, see Jonathans take
on that. We tend to use them for block level items like columns, and
invariably those block level items are inside other containers that we
don't want collapsed. That's where the tricks come in to give that
container some height.

I think it's that floats can do a lot of things you can't do well
otherwise, so they get used for things that probably weren't conceived
of. I'm using inline blocks for many things I used to use floats for,
just to take a load off of the poor overused float.

By the time CSS5 is widely implemented, we all should either be very
happy, or dead.

Jeff

www.richardfisher.com

On 5 June, 15:50, Helpful person <rrl... (AT) yahoo (DOT) com> wrote:

As a beginner I have a simple question (the question is simple) about
floats. *It seems to me that it is very difficult to get them to work
as expected. *

Read a _good_ tutorial
http://brainjar.com/css/positioning/

Helpful person <rrllff (AT) yahoo (DOT) com> writes:

As a beginner I have a simple question (the question is simple) about
floats. It seems to me that it is very difficult to get them to work
as expected.

It's very easy to get them to work as they're supposed to. Perhaps the
problem is your expectations?

sherm--

--
My blog: http://shermspace.blogspot.com
Cocoa programming in Perl: http://camelbones.sourceforge.net