Ul formatting problem

HTML & CSS
1

Hi chaps, back again with another newbie question! (Where would I be without you guys and girls?)

I have a site with a number of unordered lists, but just one of them is causing me a problem by displaying differently from the others. Whereas the lists on all other pages are indented, this one has placed its bullets in the margin, leaving the text flush with the rest of the text. It is next to an image, which is what I assume is causing the problem. If I float the image right rather than left then everything works well, but the contents of the image don’t allow that. I can’t see any differences in the formatting between the lists that work and those that don’t - but your eagle eyes may well spot something!

I think it’s best if I give you the links so that you can check ALL of the code, in case I’ve put something odd elsewhere, which is messing things up. So the problem is the ul at http://www.gillwykes.com/development/access_new_business/event_management.html. An example of a page where everything is working fine is at http://www.gillwykes.com/development/access_new_business/business_reviews.html.

Any help much appreciated, and thanks in advance!

Cheers
Badger

2

Hi,

Margins and padding slide under floated content so the margin/padding of the ul that is next to a float slide all the way to the containing block which is why they appear to have no effect. You need to create a new block formatting context for the ul and then the margins won’t slide under the float but the drawback is that the list will not wrap back around the image when it reaches the bottom of the image - although I guess that would be more sensible in this case.

So add this:


#content_box ul{overflow:hidden;zoom:1.0}
3

Wow, brilliant. Thanks so much, not only did you solve it for me, but I understand why too! And there’s no way I would have figured that out myself.

Just to help me really get to grips with it for next time, I assume the overflow:hidden stops the text from flowing under the image, but what is the zoom doing?

Sorry to be a pain, but if I understand it, I find it so much easier to use next time.

Badge

4

Hi,

The overflow:hidden is one of a small number of properties that create a new block formatting contex and it is this behaviour that we require and nothing to do with the overflow being hidden or not. I could have used float, or inline-block instead to do a similar affect as they also create block formatting contexts. However the overflow method has less side effects than the other methods so is the method of choice.

When you create a new block formatting context the element forms a rectangular block and margins and padding won’t slide under floats. However as I said before it would also mean that the text would no longer wrap underneath a floated element. However in a lot of cases this is exactly what you want.

The zoom:1.0 is a proprietary IE rule that is mainly used to trigger haslayout and is needed here for IE6 and 7 that don’t create a block formatting context width the overflow as they should. However they do create a block formatting context for any element that is in haslayout mode which is just what we need. You could use a dimension for the same effect but in a lot of cases you don’t want a dimension so zoom is a good choice because it zooms the layout to 1.0 which means no zoom and no detrimental effect except to apply haslayout. The downside is that zoom is not valid but will do no harm. You can read more abut haslayout in the FAQ.

5

Great. Thanks so much. It just shows how much more I still have to learn, but I think I followed it. Will read up on the faqs, and thanks for your help.

6

Wow this helped me so much–thanks, Paul O’B!