Philippe Wittenbergh wrote: > On Jan 12, 2008, at 1:57 PM, Lopez-Anzures, Beatriz wrote: > >> Sorry to bother you...I'm a Multimedia student at UNF >> ( University of North Florida) >> I'm trying to see why my CSS file does >> not display correctly on IE. >> The scroll bar is not displayed correctly (it's out of place) >> when viewed in IE or Firefox. >> >> In safary looks ok but I need it to work in all for >> my final grade. >> Here is the link: >> please use safari to see it working correctly. >> http://www.unf.edu/~n00036081/zen_garden > <snip> > 2. Safari vs Firefox and Opera 9.5b. The right column is pushed far > away to the right in Firefox and Opera. Browsers have different > interpretation of how the margin on elements adjacent to a floated > block should behave.
Philippe, I seeing different at my end. Safari 3 and Opera 9.1~9.2 seems to show correct with the #scrollable div with overflow:auto sitting to the right of the #links floated left though the scroll bar of the #scrollable div sits outside the container. Opera 9.5 and IE 7 shows the #scrollable div sitting below the footer but under the space it should be. IE 5 and IE 6 show like each other, a complete mess. A simplefied demo. <http://css-class.com/x/zen/float-margins1.htm> and the same demo but the doctype has been changed from traditional to strict. <http://css-class.com/x/zen/float-margins2.htm> Now Safari 3 shows the sames as Opera 9.5 and IE 7. No change in any other browsers. Why this happens, I don't know so I will move on quickly here. > It doesn't help that the css 2.1 docs was change recently regarding > this issue (essentially making the behaviour in Safari correct) [1]. > > You can solve this: set the margin-left on #scrollable to '0' (zero). > > 3. your #container should be 5px wider to accommodate the content, > #header and #footer 15px wider. > > [1] <http://www.w3.org/TR/CSS21/visuren.html#floats> > The 5th paragraph is relevant here. Before the latest version, it > stated that the horizontal margin should not collapse/slide under the > floated block; the reverse is through now. > <http://www.w3.org/TR/CSS21/changes.html#q57> The change as I see in the specs is "Specified that the border box of a table, block-level replaced element, or element in the normal flow that establishes a new block formatting context must not overlap any floats in the same block formatting context." Wouldn't that make Firefox (Gecko 1.7~1.9) correct. Overflow:auto establish a new block formatting context as I see in the specs [2], part of which reads (edited). "Floats, absolutely positioned elements, inline-blocks, table-cells, table-captions, and elements with 'overflow' other than 'visible' establish new block formatting contexts." "In a block formatting context, each box's left outer edge touches the left edge of the containing block. This is true even in the presence of floats, unless the box establishes a new block formatting context" So the left margin (box's left outer edge) specified on the #scrollable div is pushing the #scrollable div away from the #links div in Firefox (correct). In the other browsers (not Opera 9.1~9.2) the same left margin is forcing the #scrollable div to render under the #links div as if the #scrollable div was a float. IE is doing the same but that is also due to hasLayout for this browser. I have done some test. <http://css-class.com/test/css/viseffects/overflow-box-next-to-float.htm> First example: (with container width of 250), Gecko 1.7~1.9 and Opera 9.5 shows correct. Safari 3 and Opera 9.1~9.2 show incorrect (according to the old specs I presume). IE 7 shows the overflow box has dropped because of hasLayout. Second example: (with container width of 249px), I presuming that because the containers' width is now 1px less then the combined widths of the float (100px) and overflow (100px) boxes and the margin left of the float (50px) the overflow box now drops in every browser apart from Gecko and Opera 9.1~9.2, but Opera also show the wrong placement. Changing the doctype from strict to traditional will now cause Safari 3 to render as Opera 9.1~9.2 (without the drop). <http://css-class.com/test/css/viseffects/overflow-box-next-to-float.htm> > Philippe > --- > Philippe Wittenbergh > <http://emps.l-c-n.com> Beatriz, I do recommend that you add to your CSS bit by bit instead of giving styles to this and that element before there is even content within these elements and thus making your stylesheet hard to follow. Also you can use shorthand. Take the background image style. background-repeat: no-repeat; background-image: url(images/deck_title.jpg); background-position: left; this can easily be done with. background: url(images/deck_title.jpg) left no-repeat; The same can be done with margins, paddings and borders. Also your markup can be more organized by indenting the nested elements. The fixes are varied, but simply it's what Philippe has already said "set the margin-left on #scrollable to '0' (zero)." I have added some other changes for IE 5 and IE 6. Please find the CSS with changes commented embedded in the head of the source. <http://css-class.com/x/zen/float-margins4.htm> Adding the changes to the original document. <http://css-class.com/x/zen/float-margins5.htm> Now we are face with one last problem. The links within the #links div causes differences in all browsers if the specified font-size is ignored. If you try to control this with a height then the text will just overflow out on the box in the good browsers. The heights must be removed from the #container and #links div. To force the #container div to enclose the float a clearing div needs to be inserted before the end of the #container div. This is not the only method for enclosing floats but this is a potentiality buggy layout already. This leaves us with this. <http://css-class.com/x/zen/float-margins6.htm> Doesn't look the best now but you have a float with a height that is dictated by it contents sitting beside an overflow box of fixed height. The two will never match. At least the layout is somewhat stable. Good luck in your studies. 2. <http://www.w3.org/TR/CSS21/visuren.html#block-formatting> Alan http://css-class.com/ ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
