Problems with IE 7

[Twinkie]

I made a pretty decent layout that works in all popular browsers of the latest versions. However, I am facing a float issues in the bottom of the page in IE 7, which is unfortunately the browser that my school uses and therefore my target audience. I can't for the life of me find out why. Please view the link below in IE 8 compatibility mode and notice how it mutilates the bottom bar.

http://twinkie.pcriot.com/math

Thank you misson for showing me where I can learn to use floats properly. I read extensively on them, their models, ect. Now, I need to learn to deal with IE and floats....

 

[misson]

Floated elements are generally positioned to the side of elements that follow them in document order. Place #bottom_right immediately after #bottom_left, before the other content in #bottom.

An alternative that doesn't depend on document order is to use absolute positioning. Create PNGs with the background color portion visible and the foreground transparent. Make sure you test the colors in the major browsers, which vary in their handling of gamma and color spaces (you might need to include or exclude these in the image). Insert those images as you will (setting them as the backgrounds of four <div>s is the easiest to theme) and absolutely position the elements.

These are only two of many rounded corner options.

 

[Twinkie]

I don't understand. I did place them in order of how it was to be displayed. How can I put the text after the corners in the document order and still have it display beside them (it did work I am just trying to understand)?

I thought that the floats were messing up because they were block elements, so I switched the display to inline-block.

 

[misson]

I don't understand. I did place them in order of how it was to be displayed.

Display order induced by document order is the "flow". The whole point of floating, absolute positioning and fixed positioning is to position elements outside of the flow--to use something other than document order for positioning. Placing elements in the document in the order you want them displayed is precisely what you shouldn't do. You don't want left floated elements, followed by content, followed by right floated elements. You want left & right floated elements followed by content.

        <div id="bottom">
            <div id="bottom_left"></div>
    	    <div id="bottom_right"></div>
	    Visit Number 276162
       </div>

What's supposed to happen is floated elements get shifted to the left (or right) until they're up against another float. Line boxes are thinned to fit in between floats. Block boxes are unaffected (a block's left margin will be to the left of left-floats). IE 7's behavior is non-compliant, but consistent: floats are placed next to content that follows them and placed below content that's before the float. Specifically, IE violates rule 8 of the float behavior rules, which specifies that floats should be placed as high as possible. It also violates the fourth paragraph of CSS 2.1, § 9.5 Floats:

Any content in the current line before a floated box is reflowed in the first available line on the other side of the float. In other words, if inline boxes are placed on the line before a left float is encountered that fits in the remaining line box space, the left float is placed on that line, aligned with the top of the line box, and then the inline boxes already on the line are moved accordingly to the right of the float (the right being the other side of the left float) and vice versa for rtl and right floats.

The standard specifies that if an element has block level children, then inline children are placed in anonymous block boxes (the block boxes don't actually have to be created, but the page must be rendered as if they do). In this case, the anonymous block boxes aren't positioned, so should flow as if the floats didn't exist. IE probably treats the anonymous block box as a block-level element, so the (block level) #bottom_right gets moved underneath the content. That is, IE treats it as:

        <div id="bottom">
            <div id="bottom_left"></div>
	    <div>Visit Number 276162</div>
    	    <div id="bottom_right"></div>
       </div>

though it shouldn't, because a block box ≠ a block level element.