Strange behaviour of IE 6.0 in a two column layout

[Günther Steinmetz]

I am trying to build a page with a header, 2 columns in the middle and
a footer. The left column contains the menu, the right column the real
content. Instead of giving the content column a left margin with the
width of the menu, i am giving the content column a border with the
width of the menu. (This makes life easier for me in the case that the
menu column is higher than the content column). This solution works
fine in all browsers i used for testing except IE 6.0. Surprisingly IE
gives my footer a width greter than the viewport. As a consequence the
left aligned text in the footer is not visible. Why is IE doing this?
What can i do the force IE to display my footer as intended?

The address of test page is
http://www.impotenz-selbsthilfe.de/test/ie-footer.html

Thanks for any hints!

Günther

[ironcorona]

Günther Steinmetz wrote:

I am trying to build a page with a header, 2 columns in the middle and
a footer. The left column contains the menu, the right column the real
content. Instead of giving the content column a left margin with the
width of the menu, i am giving the content column a border with the
width of the menu. (This makes life easier for me in the case that the
menu column is higher than the content column). This solution works
fine in all browsers i used for testing except IE 6.0. Surprisingly IE
gives my footer a width greter than the viewport. As a consequence the
left aligned text in the footer is not visible. Why is IE doing this?
What can i do the force IE to display my footer as intended?

Nice design.

Unfortunately I've got the beta version of IE7 running on my machine
(where there's no problem by the way) so I'm doing this from memory;
I've seen it before.

Try setting the
div#foot {width:99%;}

Sorry if this doesn't help.

--
ironcorona

[Günther Steinmetz]

Hello,
thanks for your answer. Unfortunately setting the width to 99% made
things worse. Any other ideas?

Günther

[Arne]

Once upon a time *Günther Steinmetz* wrote:

Hello,
thanks for your answer. Unfortunately setting the width to 99% made
things worse. Any other ideas?

Talking to your self, are you. If not, then who do you say hallo to, and
thank's for what answer?

* How to quote: http://www.netmeister.org/news/learn2quote.html#toc2
* From Google: http://www.safalra.com/special/googlegroupsreply/

Google Group Users, read about The Usenet Improvement Project:
http://blinkynet.net/comp/uip5.html

--
/Arne

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

[axlq]

In article <11************ **********@j33g 2000cwa.googleg roups.com>,
Günther Steinmetz <gs********@web .de> wrote:

I am trying to build a page with a header, 2 columns in the middle and
a footer. The left column contains the menu, the right column the real
content. Instead of giving the content column a left margin with the
width of the menu, i am giving the content column a border with the
width of the menu. (This makes life easier for me in the case that the
menu column is higher than the content column). This solution works
fine in all browsers i used for testing except IE 6.0. Surprisingly IE
gives my footer a width greter than the viewport. As a consequence the
left aligned text in the footer is not visible. Why is IE doing this?
IE is doing this because it uses a different "box model" than other
browsers. If you don't know what that means, look at the CSS2 spec.
What can i do the force IE to display my footer as intended?

If you want compatibility with all browsers, then on your main
content column, you really need to set a left margin at least equal
to the width of your left-floated menu column.

At the bottom of your main column, have this before the closing /div:
<div style="clear: both">&nbsp;</div>

That will force both columns to the same height, and the footer will
then always appear beneath them.

-A

[Günther Steinmetz]

axlq wrote:

IE is doing this because it uses a different "box model" than other
browsers. If you don't know what that means, look at the CSS2 spec.

Really? I am using IE in standards-compliant mode (at least i think, i
do), so IE should use the same box model as other standards-compliant
browsers. Furthermore i am not giving the footer a width, margin and
padding are explicitly set to 0.

Günther

[ironcorona]

Günther Steinmetz wrote:

Really? I am using IE in standards-compliant mode
IE doesn't *have* a standards-compliant mode
IE should use the same box model as other standards-compliant
browsers.

It doesn't and it won't. They messed it up.

--
ironcorona

[ironcorona]

Günther Steinmetz wrote:

Hello,
thanks for your answer. Unfortunately setting the width to 99% made
things worse. Any other ideas?

In footl and footr you have 3px of padding set. This means that you
have an extra 12px of padding in total along the horizontal.

What is the 20em of margin-right doing in footl. You might try losing
that and seeing what happens.

Try changing the <p> of footl and footr into <div>.

footl seems unnecessary since you can just use code like this:

#foot {clear: left; background-color: #FFFB00; margin: 0; border-top:
1px solid black; padding: 0; font-size: .8em;}
#footr {float: right; width: 20em; text-align: right; margin: 0;
padding: 3px;}

<div id="foot">

Haben Sie Anregungen, Fragen, Kritik?<br>
Oder wollen Sie einfach mal mit anderen Betroffenen reden?<br>
Dann nehmen Sie <a href="/wir/kontakt.html">K ontakt</a> mit uns auf!

<div id="footr">Letz te Änderung: 3.&nbsp;Mai&nbs p;2006</div>

</div>
--
ironcorona

[Günther Steinmetz]

ironcorona wrote:

Günther Steinmetz wrote:

Hello,
thanks for your answer. Unfortunately setting the width to 99% made
things worse. Any other ideas?
In footl and footr you have 3px of padding set. This means that you
have an extra 12px of padding in total along the horizontal.

Yes, but in the original source i did not assign a value to width.
Therefore the padding in footl and footr shouldn't be a problem.
What is the 20em of margin-right doing in footl. You might try losing
that and seeing what happens.
footr is floating to the right side. Consequently i give footl a margin
to make sure that no text appears below the content of footr.
Try changing the <p> of footl and footr into <div>.
Didn't change anything.
footl seems unnecessary since you can just use code like this:

footl is necessary since i want its contents not to be printed.

Günther

[Günther Steinmetz]

ironcorona wrote:

Günther Steinmetz wrote:

Really? I am using IE in standards-compliant mode

IE doesn't *have* a standards-compliant mode

Are you saying that what MS tells me on page
http://msdn.microsoft.com/library/de...hancements.asp
about standards-compliant mode is not true? Can you please point me to
an article which shows that IE 6.0 cannot be forced into a
standards-compliant mode?

Günther