Layout ruined in IE for some pages...

[TomB]

Although all pages share the exact same structure (put together with
php on the server) some display more or less as intended on IE, while
others are totally messed up. The content div is put below all other
content. I can't really figure out why that is. Any ideas?

http://deimos.curious.be/~dusk

For example the band, main media links and main contact pages display
"correctly", while biography and news don't. I'm really puzzled by
that. I don't have any fixed width content on those pages, so that
can't be the problem.

Of course on FF/Opera all is fine.

Tia

Tommy

[Evertjan.]

TomB wrote on 05 sep 2006 in comp.infosystems.www.authoring.stylesheets:

Although all pages share the exact same structure (put together with
php on the server) some display more or less as intended on IE, while
others are totally messed up. The content div is put below all other
content. I can't really figure out why that is. Any ideas?

http://deimos.curious.be/~dusk

Try a full window in a wider screen than 1024 and it looks all right.

So you expect to many horizontal pixels.

Solution 1: do not expect that many.

Solition 2:
Enclose the whole page in a
<div style='width:1280px'>

While the number of pixels in solution 2 is extravagant as long as most
people use 1024, setting a outer div to prevent floating accidents like
this is not that bad, but for the purists among us.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[TomB]

Evertjan. schreef:

Try a full window in a wider screen than 1024 and it looks all right.

Right. Never noticed that.

So you expect to many horizontal pixels.

I'm not. There is not a single bit of the code that tells the browser
how wide the "main" div should be. Hence e.g. FF having no problems
with it.

The main div should be as wide as there is space available, and then
still it is set to overflow...

[Evertjan.]

On 05 sep 2006, you wrote in comp.infosystems.www.authoring.stylesheets:

Evertjan. schreef:

>Try a full window in a wider screen than 1024 and it looks all right.

Right. Never noticed that.

>So you expect to many horizontal pixels.

I'm not. There is not a single bit of the code that tells the browser
how wide the "main" div should be. Hence e.g. FF having no problems
with it.

Niks hoor, that is no valid argument.
FF and IE have different defaults for margins etc.
and the fact that a bigger window does not have the behavour
virtually proves somewhere there must be an absolute size effect.

The main div should be as wide as there is space available, and then
still it is set to overflow...

Try some debugging like:

- putting the whole thing in a fixed width div.

- surrounding the block elements with temporary borders
to see what is really happening:

<style>div {border:1px red dotted;}</style>

My

container has a width of 90%
logo.png has an absolute!!! width of 180px,
and that 180px must fit in the 10% left over.

Something like that.

Succes.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[Stephen Poley]

On 4 Sep 2006 23:00:14 -0700, "TomB" <to*************@gmail.comwrote:

>Although all pages share the exact same structure (put together with
php on the server) some display more or less as intended on IE, while
others are totally messed up. The content div is put below all other
content. I can't really figure out why that is. Any ideas?

http://deimos.curious.be/~dusk

...
Of course on FF/Opera all is fine.

Well, you may be hitting a bug that I've hit a couple of times with IE.
I never found exactly what triggered it, but on putting 1px test borders
around a couple of elements it went away. So I left the borders in and
changed the colour to the same colour as the background ...

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

[TomB]

Evertjan. schreef:

My

container has a width of 90%
logo.png has an absolute!!! width of 180px,
and that 180px must fit in the 10% left over.

Something like that.

Yeah, but in that case you have a specified width for you container. I
specify nothing. Ja, helemaal niks ;-)

Anyway, I noticed I was putting my content in two nested divs for some
reason I cannot remember. Removing the inner one solved the IE issue.
Yay.

[Evertjan.]

TomB wrote on 06 sep 2006 in comp.infosystems.www.authoring.stylesheets:

Evertjan. schreef:

>My

container has a width of 90%
logo.png has an absolute!!! width of 180px,
and that 180px must fit in the 10% left over.

Something like that.

Yeah, but in that case you have a specified width for you container. I
specify nothing. Ja, helemaal niks ;-)

Not true, the image without wrelative width specification, so absolutely
180px and the 90% div width are from your(!!!) js file.

Echt waar.

Anyway, I noticed I was putting my content in two nested divs for some
reason I cannot remember. Removing the inner one solved the IE issue.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[TomB]

Evertjan. wrote:

Yeah, but in that case you have a specified width for you container. I
specify nothing. Ja, helemaal niks ;-)

Not true, the image without wrelative width specification, so absolutely
180px and the 90% div width are from your(!!!) js file.

Echt waar.

Oh, the "sub" div you mean! But that's in another div without a
specified width, so that is 90% of whatever width the enclosing div
has.

Anyway, I found out what the problem is. When you put a 90% width div
in the main div and you specify a margin for that div IE does't use the
horizontal overflow when width (90%) + margin becomes too wide for the
main div.

See
http://deimos.curious.be/~dusk/gmm/case1.html
http://deimos.curious.be/~dusk/gmm/case2.html

So i reckon this is an IE bug, nietwaar?

Tommy