IE makes a pig's breakfast out of my page!! Any ideas why?

[Alan Silver]

Hello,

Without wishing to get the obvious "IE is rubbish" response, could
anyone tell me why IE makes such a mess of the page linked below?

The HTML and CSS validate, and Firefox and Opera display it fine. IE
doesn't ;-)

The problem seems to be the width of the #pagebody div. If I set it to
an absolute value (in pixels or percentage), then IE shows it fine. What
I really want is to allow the div to expand to fill the width of the
browser, but use max-width to keep it from getting too wide.

I got around the problem by doing this...

#pagebody {
width: 90%;
}
div[id="pagebody"] {
width: 99% !important;
max-width: 1100px;
}

.... but I don't really like relying on the sort of thing and would
prefer to see if there is a way of doing it properly.

TIA for any help and advice.

http://www.kidsinaction.org.uk/iebarf.html

--
Alan Silver
(anything added below this line is nothing to do with me)

[Beauregard T. Shagnasty]

Alan Silver wrote:

Without wishing to get the obvious "IE is rubbish" response, could
anyone tell me why IE makes such a mess of the page linked below?

The HTML and CSS validate, and Firefox and Opera display it fine. IE
doesn't ;-)

IE doesn't understand position: absolute (or fixed?)
Why do you need those?

--
-bts
-Warning: I brake for lawn deer

[Alan Silver]

In article <O2********************@bgtnsc04-news.ops.worldnet.att.net>,
Beauregard T. Shagnasty <a.*********@example.invalid> writes

Alan Silver wrote:

Without wishing to get the obvious "IE is rubbish" response, could
anyone tell me why IE makes such a mess of the page linked below?

The HTML and CSS validate, and Firefox and Opera display it fine. IE
doesn't ;-)
IE doesn't understand position: absolute (or fixed?)

Are you sure? I've used these before with IE and not had this sort of
problem. I know it doesn't understand fixed, but I'm absolutely sure it
understands absolute (as much as IE understands any CSS).
Why do you need those?

Because I want the masthead to appear below the content in the HTML, but
I want it to be displayed at the top of the page. Is there a better way
of doing this?

Ta ra

--
Alan Silver
(anything added below this line is nothing to do with me)

[Spartanicus]

"Beauregard T. Shagnasty" <a.*********@example.invalid> wrote:

IE doesn't understand position: absolute
Beeshit
(or fixed?)

IE =< 6 doesn't support fixed

--
Spartanicus

[Beauregard T. Shagnasty]

Spartanicus wrote:

"Beauregard T. Shagnasty" <a.*********@example.invalid> wrote:

IE doesn't understand position: absolute

Beeshit

(or fixed?)

IE =< 6 doesn't support fixed

Well, I knew it was one of them ... :-)

--
-bts
-Warning: I brake for lawn deer

[Arne]

Once upon a time *Alan Silver* wrote:

Hello,

Without wishing to get the obvious "IE is rubbish" response, could
anyone tell me why IE makes such a mess of the page linked below?

The HTML and CSS validate, and Firefox and Opera display it fine. IE
doesn't ;-)

The problem seems to be the width of the #pagebody div. If I set it
to an absolute value (in pixels or percentage), then IE shows it
fine. What I really want is to allow the div to expand to fill the
width of the browser, but use max-width to keep it from getting too
wide.

I got around the problem by doing this...

#pagebody { width: 90%; } div[id="pagebody"] { width: 99% !important;
max-width: 1100px; }

... but I don't really like relying on the sort of thing and would
prefer to see if there is a way of doing it properly.

TIA for any help and advice.

http://www.kidsinaction.org.uk/iebarf.html

Why do you have set "float: left;" for the #pagecontent?

If you remove that, IE will show the header on the right spot. I belive
IE interpret the fact that you have the id="header" placed belowe the
id="pagecontnet" in the source, as it should be on the right since
id="pagecontent" is floated.

But you need to add/change paddings to ge the space above the content
header.

--
/Arne

Proud User of SeaMonkey. Get your free copy:
http://www.mozilla.org/projects/seamonkey/

[Alan Silver]

In article <4d*************@individual.net>, Arne
<in*****@domain.invalid> writes

http://www.kidsinaction.org.uk/iebarf.html
Why do you have set "float: left;" for the #pagecontent?

Because in the full version of this page (this is a stripped down
sample), there are two more divs to be floated next to it, giving three
columns.
If you remove that, IE will show the header on the right spot.
You are right!! Trouble is, I need to float this div so that I can
position it next to the other two (not in this sample).

I suppose I could place all three divs in a wrapper div, but that is
adding extra markup for no semantic purpose. Isn't there a better way?
I belive IE interpret the fact that you have the id="header" placed
belowe the id="pagecontnet" in the source, as it should be on the right
since id="pagecontent" is floated.
Fair enough, except for the fact that #header is not floated, nor is it
in the document's flow. It's absolutely positioned, so should be placed
relative to its parent container, which in this case is #pagebody. IE
gets this completely wrong. It's supposed to place it absolutely at the
top left of the parent container, with a width of 100%. IE places to the
right of its parent, but not completely clear of it, leaving a small
overlap.
But you need to add/change paddings to ge the space above the content
header.

Huh? Don't understand what you mean here. Please clarify.

Thanks for the reply, any further help appreciated.

--
Alan Silver
(anything added below this line is nothing to do with me)

[Alan Silver]

In article <4d*************@individual.net>, Arne
<in*****@domain.invalid> writes

Why do you have set "float: left;" for the #pagecontent?

OK, since posting my reply, I have added an extra div to hold the
#pagecontent and the other two divs that will go in there. I added one
of the two others to see how it worked, but IE now does different stupid
things with it!!

If you look at http://www.kidsinaction.org.uk/iebarf2.html in a decent
browser, you'll see a basic layout with content on the left and links on
the right. Look at it in IE, and you won't see the content, nor the
links. If you watch carefully when you load the page, you see a quick
flash of them, but then they disappear. The IE developers' toolbar shows
me that IE is positioning them correctly, but it's not showing them
right.

Any ideas? Thanks again

--
Alan Silver
(anything added below this line is nothing to do with me)

[niels.froehling]

> If you watch carefully when you load the page, you see a quick

flash of them, but then they disappear. The IE developers' toolbar shows
me that IE is positioning them correctly, but it's not showing them
right.
Probably PekaBoo-bug, don't use too much floats, or float in ...
inapropriate (for IE) areas. This is the most enerving bug I ever found
in IE. You think you can rely on CSS1 and setup nice floating stuff,
and in the end it all disappears.
Sometimes you can fix it by 'position: relative' (which does nothing
at all in other browsers, as long as you don't give coordinates). But I
also had cases where even that failed (20+ floats, ~10 clears).
A not for the width you may want to give to IE but not to others, the
equivalent of 'max-width' in IE is 'width', that has an alias '_width',
doesn't validate as CSS but works. Put it in conditional contents if
you like.
Any ideas? Thanks again
Make two versions of your page, the IE-version looks terrible, bad,
usability breaks completely, then put a screen-shot of a
<better-browser-here> on the IE-version and say how much IE sucks and
they should download <better-browser-here>. ;)
No, seriously, go to Meditation-Groups, there is nothing you can do,
so stay calm.
Alan Silver

Ciao
Niels

[Alan Silver]

In article <11*********************@y43g2000cwc.googlegroups. com>,
ni*************@seies.de writes

If you watch carefully when you load the page, you see a quick
flash of them, but then they disappear. The IE developers' toolbar shows
me that IE is positioning them correctly, but it's not showing them
right.
Probably PekaBoo-bug

<snip>

Yup, that was it. Thanks for the heads-up.
Sometimes you can fix it by 'position: relative' <snip>

Phew, that worked!! I'm glad I didn't have to do anything more than
that, I get all nervous when I get into the realms of hacks and tricks.
This was innocuous enough for even me!!

Any ideas? Thanks again

Make two versions of your page, the IE-version looks terrible, bad,
usability breaks completely, then put a screen-shot of a
<better-browser-here> on the IE-version and say how much IE sucks and
they should download <better-browser-here>. ;)

<g>
I wish it were that simple!!
No, seriously, go to Meditation-Groups, there is nothing you can do,
so stay calm.

Oh I'm calm, I have a pleasant and soothing background on my computer,
and some pleasant and soothing music playing!!

Thanks for the reply.

--
Alan Silver
(anything added below this line is nothing to do with me)

[Jim Moe]

Alan Silver wrote:

If you look at http://www.kidsinaction.org.uk/iebarf2.html in a decent
browser, you'll see a basic layout with content on the left and links on
the right. Look at it in IE, and you won't see the content, nor the
links. If you watch carefully when you load the page, you see a quick
flash of them, but then they disappear. The IE developers' toolbar shows
me that IE is positioning them correctly, but it's not showing them
right.

It's a stacking problem. If you remove the background color from
#pagecontent, you will see the floated elements.
Or just remove "position:relative" from #pagecontent.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Alan Silver]

In article <Ut******************************@giganews.com>, Jim Moe
<jm***************@sohnen-moe.com> writes

Alan Silver wrote:

If you look at http://www.kidsinaction.org.uk/iebarf2.html in a decent
browser, you'll see a basic layout with content on the left and links on
the right. Look at it in IE, and you won't see the content, nor the
links. If you watch carefully when you load the page, you see a quick
flash of them, but then they disappear. The IE developers' toolbar shows
me that IE is positioning them correctly, but it's not showing them
right.

It's a stacking problem. If you remove the background color from
#pagecontent, you will see the floated elements.
Or just remove "position:relative" from #pagecontent.

Not sure how it's a stacking problem as the page content should be the
topmost element, so it's content should be on top. Also, I can't remove
the "position:relative" as that is used to create a positioning context
for some absolutely positioned elements inside.

It turned out to be the peekaboo bug, and adding some
"position:relative" bits fixed it. Thanks anyway.

--
Alan Silver
(anything added below this line is nothing to do with me)