469,319 Members | 2,415 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,319 developers. It's quick & easy.

Avoid overlap of img and ol

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/courseno...ulEqn.html#sec
tion1-2-1>
Jun 25 '07 #1
1 2556
In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:
On 2007-06-25, David Stone <no******@domain.invalidwrote:
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/courseno...ulEqn.html#sec
tion1-2-1>

Make the <olcontaining 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

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.

--
dorayme
Jun 26 '07 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

16 posts views Thread by Michael Rozdoba | last post: by
6 posts views Thread by gdekhayser | last post: by
reply views Thread by dag | last post: by
2 posts views Thread by John Baker | last post: by
6 posts views Thread by Igor | last post: by
reply views Thread by JIM.H. | last post: by
1 post views Thread by Andrew Poulos | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
reply views Thread by Gurmeet2796 | last post: by
reply views Thread by mdpf | last post: by
reply views Thread by listenups61195 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.