Hallo, Short version (for thos who don't have time but still would like to help me): http://www.digitale-bibliothek.de/Downloads/CSS-Test/Fixe%20Breite.htm (HTML) http://www.digitale-bibliothek.de/Downloads/CSS-Test/main.css (CSS)
Problem 1: 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? Problem 2: 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? Problem 3: 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? Best Regards, Christian Kirchhoff ---------------------------------------------------------------------------- --------------------------------- Long version: 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: http://www.zeno.org/Zeno/-/Hauptseite (HTML) http://www.zeno.org/main.css (CSS) 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 see... 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: http://www.digitale-bibliothek.de/Downloads/CSS-Test/Fixe%20Breite.htm (HTML) http://www.digitale-bibliothek.de/Downloads/CSS-Test/main.css (CSS) 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. First problem: 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. Second problem: 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 http://www.digitale-bibliothek.de/Downloads/CSS-Test/Fixe%20Breite%202.htm), the div.zenoCO is positioned just fine. Third problem: 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 http://www.digitale-bibliothek.de/Downloads/CSS-Test/Fixe%20Breite.htm. The 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;"? Best regards, Christian Kirchhoff Directmedia Publishing GmbH · Möckernstraße 68 · 10965 Berlin www.digitale-bibliothek.de AG Berlin-Charlottenburg · HR B 58002 · USt.Id. DE173211737 Geschäftsführer: Ralf Szymanski · Erwin Jurschitza ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d 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/
