Validated page falls apart in IE8
Ed Jay
This page renders fine in Opera and FF, but collapses in IE8. The page
validates to 4.01 strict, and the CSS validates. Why?
--
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
Ed Mullen
> <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?
>
It also falls apart on text size increase in:
SeaMonkey - http://edmullen.net/temp/capture_23052009_140419.jpg
Firefox 2
Safari
IE7
Using Opera 9.64 and IE7 screen zoom works.
IE7 is also giving me a script error:
Line: 69
Character: 1
Code: 0
Error Message: Invalid character
URL: http://www.edbjay.com/brth_usermenu.html
--
Ed Mullen
http://edmullen.net
If electricity comes from electrons, where does morality come from?
Jeff
> <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
>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?
>>
>It also falls apart on text size increase in:
>
>SeaMonkey - http://edmullen.net/temp/capture_23052009_140419.jpg
>Firefox 2
>Safari
>IE7
Thanks. It's a dedicated web app that's designed to be viewed in the
custom browser we supply to our clients, in a 1024X768 window. That said,
I need it to play properly in all browsers, as this page is also, albeit
infrequently, used by Joe Public for demos. (I'll max-width the page.)
>
>Using Opera 9.64 and IE7 screen zoom works.
>
>IE7 is also giving me a script error:
>
>Line: 69
>Character: 1
>Code: 0
>Error Message: Invalid character
>URL: http://www.edbjay.com/brth_usermenu.html
Good old IE identified < as an invalid character. I can't find any invalid
characters.
Ed Jay
>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.
>
>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.
Jeff
> 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 Mullen
In IE7 there seem to be missing images:
http://edmullen.net/temp/capture_24052009_120748.jpg
--
Ed Mullen
http://edmullen.net
Alzheimer's advantage: New friends every day.
Ed Jay
Yes, logo, etc., but not background images.
The page isn't rendering properly in IE7. The 'buttons' all have top and
bottom borders.
Ed Mullen
http://www.edbjay.com/bluestreak.gif
http://www.edbjay.com/images/words.gif
http://www.edbjay.com/images/tas.gif
All produce a 404 Not found.
--
Ed Mullen
http://edmullen.net
Occasionally doing something totally crazy prevents permanent insanity.
Jukka K. Korpela
> 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.
The dirty but often effective way to fix this is to add the tag
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
as described in
http://blogs.msdn.com/ie/archive/2008/06/10/introducing-ie-emulateie7.aspx
The tag needs to be placed before any CSS code, i.e. before any <style>
element and before any <link> element referring to an external style sheet.
It's perhaps safest to make it the very first subelement of <head>, i.e.
place it immediately after the start tag <head>.
You can test whether this trick helps (and I tested that it works on the
page discussed here) by turning IE 8 into compatibility mode, via the Page
menu.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
Ed Jay
I know. I intentionally didn't include them.
Ed Jay
>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 was clearing the floats after closing the div that was hosting the
floated elements.
Correct:
</ul><clearfloats></div>
Thanks.
>The dirty but often effective way to fix this is to add the tag
><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
>as described in
>http://blogs.msdn.com/ie/archive/2008/06/10/introducing-ie-emulateie7.aspx
>
>The tag needs to be placed before any CSS code, i.e. before any <style>
>element and before any <link> element referring to an external style sheet.
>It's perhaps safest to make it the very first subelement of <head>, i.e.
>place it immediately after the start tag <head>.
>
>You can test whether this trick helps (and I tested that it works on the
>page discussed here) by turning IE 8 into compatibility mode, via the Page
>menu.
Thanks. I tried your suggestion. and yes, it worked. Then realized my
error, and now I don't need the "trick." As a bonus, the buttons, which
were missing their borders, are now rendering properly.
Seems that if one breaks an IE8 'standard,' it can manifest in more than
one way.
Thank you all again.
Jeff
> 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
>
Jonathan N. Little
>
> 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
Ed Jay
It didn't work for me.
BootNic
"Jonathan N. Little" <lws...@centralva.net> wrote in:
<gvh056$s1e$1...@news.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.
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.
--
BootNic Tue May 26, 2009 11:59 am
Truly great madness cannot be achieved without significant
intelligence.
*Henrik Tikkanen*
Jeff
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
dorayme
"Jonathan N. Little" <lws...@centralva.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.
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.
--
dorayme
Ed Jay
I want to elaborate on 'it didn't work for me.' I mentioned that I had two
issues: the margins collapsing and the element borders didn't render
correctly. I eliminated all of my clear floats and tried overflow:hidden.
That worked to the extent that the margins didn't collapse; however, the
borders went back to their errant behavior. I stuck with the clearing of
floats.
Jeff
> In article <gvh056$s1e$1...@news.eternal-september.org>,
> "Jonathan N. Little" <lws...@centralva.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
>
Helpful person
>
> - 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?
Jeff
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
Andy Dingley
> 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/
Sherm Pendley
> 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
Helpful person
>
> 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
>
columns. As you say, maybe in the future.
Helpful person
Helpful person
>
> It's very easy to get them to work as they're supposed to. Perhaps the
> problem is your expectations?
>
> sherm--
>
to be easy to learn and use.
dorayme
<c53debf3-29d5-4bf7...@f19g2000yqh.googlegroups.com>,
Helpful person <rrl...@yahoo.com> wrote:
How about something that is not a tutorial but musings which helped me
make sense of it ages ago:
<http://netweaver.com.au/floatHouse/>
--
dorayme
GTalbot
Interactive demo: CSS 2.1, Section 9.5 Float
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/Float2p.html
Interactive demo: CSS 2.1, Section 9.5 Float with clear: left example
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/Float2p-with-clear-left.html
regards, Gérard
--
Internet Explorer 7 bugs: 175 bugs so far
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/
Internet Explorer 8 bugs: 49 bugs so far
http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/