I'm pretty new to web design, and I can't figure out what's wrong with the CSS in my page. I'm doing the page for a course and it's in it's early stages. While it displays fine in IE7, the container doesn't display correctly in Firefox, Opera or netscape. Any suggestions would be really appeciated. site is here: http://marwes.freehostia.com/potsandpans/ CSS is here: http://marwes.freehostia.com/potsandpans/style.css
In your css file Change background: white; To the correct hex code, ffffff I think. I have to look up even the simple things sometimes. You really like those tabs for that css don't you.
The modern browsers are acting correctly. Anytime there are differences between IE and a modern browser, assume IE has screwed up. It is best practice to do your development with a good browser, Firefox is the present cream of the crop, then fix things for IE. If you develop in IE, you will learn to write crappy code. It is much easier to make good code work for IE than it is to make crappy code work for modern browsers. Float elements are not in the flow as far as other block elements are concerned. But anytime the parent element in IE has layout[1], it expands the parent to enclose its child elements. This is wrong. See Enclosing Float Elements for a demo and explanation. In the meantime, do this #container { overflow: hidden;}, which works in this case. cheers, gary [1] See On Having Layout
I believe overflow:auto will trigger HasLayout as well. I have run into situations where it just doesn't work though, such as clearing contained floats that need to clear contained floats... I was using a definition list in that case which may or may not have contributed to the problem though. I might send you a PM with that example Gary. I'd love to see what you can come up with as a solution because it stumped me to say the least.
Wow, {overflow: hidden;} works a treat. I just wish I knew why. Like I said, I'm pretty new to this and CSS really hard to get to grips with. Thanks guys.
Because that's actually what overflow: hidden is designed to do. When you add it to a container, it expands the container to contain any 'overflow', thus making the overflow "hidden". It has a different effect when added to an element that is wrapping around a float. Let's say you have a picture floated to the left, then a paragraph immediately below it that wraps around the picture, some text on the right, some below the picture. If you add "overflow: hidden" to the paragraph, then it won't wrap under the picture, but will rather continue strait down on the side. This lets you use either effect as you choose. One is great for embedding small pictures with text (like how some newspapers and articles do), but also lets you have the starting position for each line of text in the same place when you need to, like is often the style for bio sheets with lots of text to one side of the picture.
It's my understanding that overflow:hidden is intended to not display contained content that lies beyond the containing elements borders. Useful when using a set width and/or height. I belive the reason overflow:hidden does the trick here is that it triggers HasLayout and reminds the browser "oh yeah, I should be wrapping this content". This is just my understanding though. I believe Gary could straighten it out better than I can though.
IE≤6 did not properly cause {overflow: hidden | auto;} to create a block formatting context. This is important, and I'll get to it soon. IE7 worked its way around the non-support, not by following the specs in its implementation, but by adding the two values to the list of things that trigger hasLayout. For any of the methods of enclosing floats, there are cases where it won't work as desired. For any case, though, there is at least one method that will work for you. Send it on, though it would be better to post it for all to benefit. The overflow property takes the values visible (default), hidden and auto. With visible, any overflow is just that, visible beyond the limits of it container. The hidden value, um, well, it hides any overflow. And auto is what triggers the scrollbars when there's overflow. That's very close. When done according to the specs, setting overflow to other than visible triggers a block formatting context. IE's hasLayout is roughly equivalent, except that MSFT made a right cock-up of it. For example, if your container has a dimension, that triggers hasLayout, and the container will expand to include all its content. That means instead of overflowing, the box gets bigger and breaks your layout. It also means you cannot make a float drop through the bottom of its container. There is a single obscure paragraph, that tells us that certain conditions require that containers enclose their float children. Other bits describe just what should cause a new block formatting context, eg., {display: table | table-cell;}. There is a place that describes in excruciating detail just how the height is to be adjusted, but thankfully, I can't find it right now. cheers, gary
Thanks again for the help and explanations (though at this stage a lot of it goes over my head). I dare say I will be back for more advice.
Soon, if you try, you will grok in fullness. It's not really necessary to know all the nuts and bolts, and most developers don't have clue one. It is the difference between doing things because you learned that they work, and doing things because you understand how things work and can apply the understanding to new problems. The W3 Recommendations are not written for us. They're written by and for the user agent (UA—browsers are a type of UA) vendors, and describe how those UAs are supposed to work. The web developer profits by understanding these recommendations, so it's worth it to learn just how to read and understand them. There's a lot of esoteric arcana (or is it arcane esoterica?) to dig through. Believe it or not, it's actually kinda fun. See http://www.w3.org/TR/CSS21/ cheers, gary