Avoid overlap of img and ol

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

David Stone - 25 Jun 2007 19:56 GMT

I have a div containing an image which is floated left. I have a
list (in this case an ol, but the problem is the same for ul) which
should flow down the side and then under the image, which is related
to a list of steps set out in the ol.

Right now, the image overlaps the list numbering. How can I
avoid this and create a 0.5em or 1em space between the right
side of the image and the numbers or bullets of the list?

<http://www.chem.utoronto.ca/coursenotes/analsci/stats/FormulEqn.html#sec
tion1-2-1>

Reply to this Message

Ben C - 25 Jun 2007 22:06 GMT

> I have a div containing an image which is floated left. I have a
> list (in this case an ol, but the problem is the same for ul) which
[quoted text clipped - 7 lines]
><http://www.chem.utoronto.ca/coursenotes/analsci/stats/FormulEqn.html#sec
> tion1-2-1>

Make the <ol> containing the list-items overflow: hidden.

By doing that you're relying on a slightly dubious part of the spec,
which reads:

In a block formatting context, each box's left outer edge touches the
left edge of the containing block (for right-to-left formatting,
right edges touch). This is true even in the presence of floats
(although a box's line boxes may shrink due to the floats), unless
the box establishes a new block formatting context (in which case the
box itself may become narrower due to the floats).

By making the <ol> overflow: hidden, it becomes a new block formatting
context meaning it "may become narrower due to the floats"; in other
words, its left edge may (and does in all browsers I've tried) move to
the right of the floats.

To see the difference, try giving the ol a thick border. You will see
that when the ol is not a block formatting context, its left border is
right over to the left, behind the image. But make it overflow: hidden
(and therefore a block formatting context), and its border moves to the
right of the image. So too does its padding, and its inside padding edge
which is where left margins on the <li> are measured to. So however the
default stylesheet indents list-items this should work.

Reply to this Message

dorayme - 26 Jun 2007 01:46 GMT

> > I have a div containing an image which is floated left. I have a
> > list (in this case an ol, but the problem is the same for ul) which
[quoted text clipped - 14 lines]
>
> In a block formatting context, each box's left outer edge touches the

Must study this Ben, sounds interesting. (OPs page looks very
nice). The CSS is sort of complicated with all the commentary and
number of sheets and imports and stuff so I just tried adding
some margin-left:

.page-content ol li{

margin-left:20px;
}

and in FF at least this _seemed_ to remove the problem and seem
appropriate to the context.

But I am not confident.

Signature

dorayme

Reply to this Message

Ben C - 26 Jun 2007 08:44 GMT

>> > I have a div containing an image which is floated left. I have a
>> > list (in this case an ol, but the problem is the same for ul) which
[quoted text clipped - 27 lines]
> and in FF at least this _seemed_ to remove the problem and seem
> appropriate to the context.

Yes that does seem to work in FF, although not in Opera.

> But I am not confident.

Well FF is doing some quite fishy things there.

Consider this example in FF and Opera:

span
{
float: left;
width: 300px;
height: 300px;
background-color: palegreen;
}
li {
border: 1px solid red;
width: 600px;
}
</style>

<body>
<span></span>
<ol>
<li>apples</li>
<li>pears</li>
</ol>
</body>

In Opera, the li measures 600px from the left hand edge of body, as it
should, so protrudes 300px from the right of the float. Firefox has
moved the whole box to the right, and it extends 600px to the right of
the float.

It's not supposed to do that. Note too that the red borders should be
over on the left, behind the float, where you can't see them. A
list-item box is not supposed to be any different from a block box apart
from having some markers attached to it somewhere; and we know that
block boxes[1] start from the left of their containers, behind any
floats-- it's just their inline contents that are moved sideways past
the floats.

Now where should the list item markers go? According to the spec
"outside the principal block box". The principal block boxes in this
page are the ones with red borders, so in left-to-right direction, we'd
expect the markers to be positioned relative to the left edges of those
red boxes somewhere, i.e. miles behind the float.

Most of the browsers "helpfully" move them to somewhere where you have
some chance of seeing them. But where does a left margin on those red
boxes go? Try adding lots of content to the last <li>; it should wrap
underneath the float making the position of its left border evident.
Adding left margin will go outside that left border in the way you would
expect. Opera gets this right; Firefox moves the whole list item box
right of the float; Konqueror would apparently like to do that but gets
confused and doesn't visibly apply the left margin at all.

If on the other hand I make <ol> "overflow: hidden", the whole list item
principal block box gets moved to the right of the float, in Opera as
well. This is something that browsers don't have to do, but "may" do,
according to the spec, although I've yet to meet one that doesn't.

[1] Unless they're block formatting context roots.

Reply to this Message

Hendrik Maryns - 26 Jun 2007 11:01 GMT

Ben C schreef:

>>>> I have a div containing an image which is floated left. I have a
>>>> list (in this case an ol, but the problem is the same for ul) which
[quoted text clipped - 62 lines]
>
> It's not supposed to do that.

So did you file a bug report? Please do: http://bugzilla.mozilla.org

H.
- --
Hendrik Maryns
http://tcl.sfs.uni-tuebingen.de/~hendrik/
==================
http://aouw.org
Ask smart questions, get good answers:
http://www.catb.org/~esr/faqs/smart-questions.html

Reply to this Message

David Stone - 26 Jun 2007 12:23 GMT

In article
<doraymeRidThis-E6992F.10462026062007@news-vip.optusnet.com.au>,

> > > I have a div containing an image which is floated left. I have a
> > > list (in this case an ol, but the problem is the same for ul) which
[quoted text clipped - 9 lines]
> >
> > Make the <ol> containing the list-items overflow: hidden.

[snip]

> Must study this Ben, sounds interesting. (OPs page looks very
> nice). The CSS is sort of complicated with all the commentary and
[quoted text clipped - 5 lines]
> margin-left:20px;
> }

Well, both of those appear to work! I've opted for overflow: hidden,
and switched the padding on the floated image to a border. I had to
increase the specificity of the overflow rule since I needed to apply
it to both ol's and ul's, but making it a default rule for all ul's
broke the menu behaviour. Tested so far in FF, Camino, and Safari...

Final CSS:

/** ensures that list item markers don't overlap floats **/
.page-content ol, .page-content ul
{ overflow: hidden }

/** Float an img left within an enclosing div, p, etc. **/
img.image-left {
border-right: 0.5em solid white;
border-bottom: 0.5em solid white;
float: left
}

Reply to this Message

David Stone - 26 Jun 2007 13:04 GMT

> In article
> <doraymeRidThis-E6992F.10462026062007@news-vip.optusnet.com.au>,
[quoted text clipped - 41 lines]
> float: left
> }

I spoke to soon: if the list contains sufficient text to continue past
the bottom of the image, it no longer wraps underneath it! Simply
applying a margin, border, or padding to the list (ol or ul) doesn't
seem to work. Any other ideas?

Reply to this Message

Ben C - 26 Jun 2007 21:41 GMT

>> In article
>> <doraymeRidThis-E6992F.10462026062007@news-vip.optusnet.com.au>,
[quoted text clipped - 44 lines]
> I spoke to soon: if the list contains sufficient text to continue past
> the bottom of the image, it no longer wraps underneath it!

In Firefox it _never_ wraps underneath it, and this is a non-conformance
in my opinion which we ought to report to them.

In Opera it wraps underneath it normally, but if we set overflow: hidden
on <ol>, then it doesn't. This is the expected behaviour as I was trying
to explain.

> Simply applying a margin, border, or padding to the list (ol or ul)
> doesn't seem to work. Any other ideas?

Use <div>s instead of a <li>s and put the counters in manually I
suppose. Even setting <li> to display: block doesn't cause the text to
wrap underneath the float in FF, which is very suspicious.

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / June 2007

Avoid overlap of img and ol