Sent by Christian Kirchhoff on 27 August 2007 16:04
Short version (for thos who don't have time but still would like to help
Wdith of div#zenoMF is set to 77em, but in IE 6 it's a lot wider, whereas
the red div#zenoTF has the same definition and it's width is correct. What
is happening there, and how can I correct it?
The left border of div.zenoCO toughes the right edge of the left column, but
only in IE 6. In IE 7 and Firefox the box is positioned and sized correctly.
How can I correct that?
The div.zenoCOFooter has to be "clear: both;". But since I changed the
positioning of the parent from absolute back to relative, the
div.zenoCOFooter now clears the left floated left column as well. Is there
any way to correct this?
I am in the middle of changing a layout. The HTML base (that won't change)
is a 6-cell-grid:
- top area (header) with three columns (left, middle, right)
- main area with three columns (left, middle, right)
This layout can be seen here:
So far the left and right column had a fixed but em-driven width. The middle
column with the main contant adjusted it's size dynamically. Problems with
Internet Explorer forced me to absolutely set the position of the middle
column. That problem was:
Normally the middle column was aligned to the right edge of the left column,
because that left column was set to "float: left;". But when I resized the
window and made it too small, then the middle column "broke" down in IE, so
it was placed under the left column. To repair that, I positioned the middle
column absolutely. That led to another very ugly bug in IE 6: Text selection
is buggy in the middle column for text that is below...imagine the bottom
edge of the left columns content and extend that to the right. That is the
line below which I have those problems. Try
http://www.zeno.org/Kafka-Werke/M/Romane/Amerika/Der+Heizer and you should
No I have to change some things:
- The width shell be fixed. Might be em driven so it will adjust when the
user changes the zoom with his browser. But when resizing the window, the
columns shouldn't adjust.
- It could be that there will be a new advertisement "channel" around the
content. I visualiszed this with a dummy ad
The new layout so far can be seen here:
Because the layout is fixed, I could drop the absolute positioning of the
middle column and thus get rid of the text selection bug in IE 6.
If you look at the page
http://www.digitale-bibliothek.de/Downloads/CSS-Test/Fixe%20Breite.htm in IE
6 you should see that the width of the main area (div#zenoMF) is wrong. Both
the header and the main area are set to 77em in width. They don't have any
font-size defined thus they should inherit the font-size of the parent and
use that to compute the actual width. But the width of the header is
correct, the width of the main area not.
I guess it is some problem with IE's box modell, maybe it adds margin or
padding and thus spreads the width of the main area.
The main content is in a box that has this one pixel border (div.zenoCO). In
the example, in IE 6, the left border touches the right edge of the left
column. Does anybody now why that is? Strangely enough, if I copy more text
into the page (like in
the div.zenoCO is positioned just fine.
In the example, the headline of the main content says "Urenkel". Below the
text itself there will always be additional information (source, permalink
etc.). It is wrapped in a div.zenoCOFooter. On the page
main content can contain right floated images as well, therefore I set the
div.zenoCOFooter to "clear: both;". In the old layout, with the absolutely
positioned middle column, that worked as desired. But now with the static or
relatively positioned middle column, the div.zenoCOFooter clears the left
floating left column as well, and thus jumps way to far to the bottom. Plus:
The width of the div.zenoCOFooter is too big, as you can see by the
top-border that extends way too far to the right.
O.k., I understand that an absolutely positioned element is totally taken
out of the box flow. Therefore the browser - when working with the clear
attribute of some child element, doesn't take into account floated elements
that are outside of that absolutely positioned div (like the left column).
But is there still any way to position the middle column static or
relatively, and still let the div.zenoCOFooter do "clear: both;"?
Directmedia Publishing GmbH · Möckernstraße 68 · 10965 Berlin
AG Berlin-Charlottenburg · HR B 58002 · USt.Id. DE173211737
Geschäftsführer: Ralf Szymanski · Erwin Jurschitza
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/